Survey Form - Build a Survey Form

Tell us what’s happening:
I can’t do the checkboxes and the radio thing and their texts in the same line. Please i need this to finish the project.

Your code so far

<!DOCTYPE html>
<html>
 <head>
   <title>Survey Form</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
     <h1>freeCodeCamp  Survey Form</h1>
     <p>Thank you for taking the time to help us improve the platform</p>
 </head>
 <body>
   <form id="survey-form"></form>
   <fieldset>
     <label>Name <input id="name" class="name" type="text" placeholder="Enter Your Name" required /></label>
     <label>Email <input id="email" class="email" type="email" placeholder="Enter Your Email" required /></label>
     <label>Age(optional) <input id="age" class="age" type="number" min="10" max="99" placeholder="Enter Your Age" /></label>
     <label>Which option best describes your current role? 
      <select id="dropdown" required>
       <option hidden> Select current role</option>
       <option value="Student"> Student</option>
       <option value="Full Time Job"> Full Time Job</option>
       <option value="Full Time Learner"> Full Time Learner</option>
       <option value="Prefer not to say"> Prefer not to say</option>
       <option value="Other"> Other</option>
      </select>
     </label>
     <label required>Would you recommend freeCodeCamp to a friend?
       <input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Definitely"> Definitely
       <input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Maybe"> Maybe
       <input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Not sure"> Not sure
     </label>
     <label required>What is your favorite feature of freeCodeCamp?
      <select id="dropdown" required>
        <option hidden> Select an option</option>
        <option value="Challenges"> Challengens</option>
        <option value="Projects"> Projects</option>
        <option value="Community"> Community</option>
        <option value="Open Source"> Open Source</option> 
       </select>
       </label>
       <label required>What would you like to see improved? (Check all that apply)
         <input type="checkbox" class="check" value="Front-end Projects"> Front-end Projects
         <input type="checkbox" class="check" value="Back-end Projects"> Back-end Projects
         <input type="checkbox" class="check" value="Data Visualization"> Data Visualization
         <input type="checkbox" class="check" value="Challenges"> Challenges
         <input type="checkbox" class="check" value="Open Source Community"> Open Source Community
         <input type="checkbox" class="check" value="Gitter help rooms"> Gitter help rooms
         <input type="checkbox" class="check" value="Videos"> Videos
         <input type="checkbox" class="check" value="City Meetups"> City Meetups
         <input type="checkbox" class="check" value="Wiki"> Wiki
         <input type="checkbox" class="check" value="Forum"> Forum
         <input type="checkbox" class="check" value="Additional Courses"> Additional Courses
       </label>
       <label>Any comments or suggestions?
         <textarea name="text" rows="3" cols="40" placeholder="Enter your comment here...">
         </textarea>
        </label>
        <input required type="submit" value="submit" id="submit">
   </fieldset>
 </body>
 </html>

h1{
  text-align: center;
  font-family: Helvetica;
  font-size: 30px;
  color: white;
  opacity: 95%;
}
p{ 
  text-align: center;
  font-family: Helvetica;
  font-size: 20px;
  font-style: italic;
  color: white;
  opacity: 90%
}
body{
  background-image: linear-gradient(90deg, rgba(70, 70, 255, 0.5), rgba(100, 90, 255, 0.8)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-position: center;
}
fieldset{
  border: none;
  width: 60vw;
  margin: 30 250;
  background: rgb(50, 70, 100)
}
label{
  display: block;
  margin: 0.5rem 0;
  color: white;
  font-size: 25px;
  font-family: Helvetica;
}
.name,.email,.age{
  display: block;
  margin-bottom: 1.5rem;
  margin-top: 0.2rem;
  width: 100%;
  height: 27px;
}
select{
  width: 100%;
  height: 26px;
  margin-bottom: 1.5rem;
  margin-top: 0.2rem;
}
input{
  display: block;
}
.inline{
  width: unset;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 100%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(0, 240, 80);
  min-width: 300px;
  border-color: rgb(0, 240, 80);
  color: white;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hi!

Can you please show me your html and css code?

To format the code, please select your pasted code and press the button that looks like this </> on the forum to format code. You can also surround your code with three backticks at the start and end.

This gif explains how;

hii !
I just editted it take a look now.

1 Like

Thanks! :smiley:

Okay, before I start on ways you can align the text and checkboxes/radios, you’ve got a h1 and p element in your html head. That is content that should go in the body and will throw an error if used in a real website.

Also, the entire of your form should be nested inside form element. Your form element is currently empty.

1 Like

Did it now. Thanks a lot. Now what about the alignment ?

One way this could be done is to wrap each checkbox/radio in a div which is set to display:block in your css.

Having the input set as display:block doesn’t work as the input doesn’t wrap around the text, so the text isn’t formatted as a block along with the checkboxes/radios.