Survey Form - Build a Survey Form

Okay, so clearly I need help lol. I don’t know what to put for the type of e-mail, can I just put type=“email”? I don’t know how to fix type number (number"13-120"?), and I don’t know what to put as value for the radio buttons.

Also, how do I make each category (name, e-mail, age, etc.) get listed separately opposed to having everything on the same line as a paragraph? Would this be under the styling part (label { display: inline; })?

How do I make the checkboxes appear underneath the question? How do I make the submit button go underneath the textbox?

I also don’t know really where to start for the styling part of the project.

Hope to hear back from someone soon for assistance :slight_smile: Thank you!

  **Your code so far**
/* file: index.html */
<html lang="en">
<title>freeCodeCamp Survey</title>
<link rel="stylesheet" href="styles.css">
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Please fill out the survey below to help us improve our service. Thank you!</p>
<form id="survey-form">
<label id="name-label">Name</label>
<input id="name" type="text" placeholder="Enter your full name here" required />
<label id="email-label">E-Mail</label>
<input id="email" placeholder="Enter your personal E-Mail here" required />
<label id="number-label">Age</label>
<input id="number" type="0-9" min="13" max="120" placeholder="Enter your current age here"/>
<label>Which option best describes your current role?</label>
<select id="dropdown">
  <option>Select Best Fit for Current Role</option>
  <option>Student</option> 
  <option>Full Time Employee</option>
  <option>Looking to Change Careers</option>
  <option>Looking to Expand My Skillset</option>
  <option>Prefer Not to Say</option> 
  <option>Other</option>
</select>
<label>Would you recommend freeCodeCamp to a friend of yours?</label>
<input name="related" type="radio"/><option>Yes, Definitely!</option>
<input name="related" type="radio"/><option>Maybe</option>
<input name="related" type="radio"/><option>No way!</option>
<input name="related" type="radio"/><option>Not sure</option>
<label>What is your favorite feature of freeCodeCamp?</label>
<select>
  <option>Select an Option here</option>
  <option>Projects</option>
  <option>Community</option> 
  <option>Open Source Capability</option> 
</select>
<label>What would you like to see be improved at freeCodeCamp?</label> 
<input type="checkbox" value="1"/> Front-End Projects
<input type="checkbox" value="2"/> Back-End Projects
<input type="checkbox" value="3"/> Data Visualization
<input type="checkbox" value="4"/> Open Source Community
<input type="checkbox" value="5"/> Forums
<input type="checkbox" value="6"/> Videos
<input type="checkbox" value="7"/> Local Meetups
<input type="checkbox" value="8"/> Additional Courses
<label>Do you have any additional comments or suggestions for improvement?</label>
<textarea placeholder="Enter your Comment or Suggestion here">
</textarea>
<input id="submit" type="submit"/>
</form>
</html>
/* file: styles.css */

  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hey, I’ll do my best to help
You can Google"css input type" and you’ll see available options, but yes, type=“email” would be what you’re looking for.

Radio values are numerical with the first value being ‘blank’ ie. value=“”

To separate your inputs, try nesting the inputs inside your labels, then nest your labels inside one ‘fieldset’ element for each section.

Same idea goes for making elements appear above or below each other…make them separate elements. you can see this by right clicking the screen and selecting “inspect” then select the little arrow symbol. If you click on an element, you’ll see that it wants to take up an entire line. When you create another element below, it will(by default ) appear below. Not sure if that makes sense lol

As for styling, that’s up to you to play with. So far you’ve learned about font family/size/color, background-color, borders etc…

Hope that helps!

I tried to do what you told me, would each question be in its own fieldset? For instance, name is within a fieldset element, e-mail is within its fieldset element, etc.

It created some separation when I put the questions within a fieldset element, but I still don’t know how to make each answer go underneath the question. I tried using Inspect like you told me but I’m still stuck, and don’t know how to fix it to make all the fieldsets and content go underneath and not in a line like it is in a paragraph.

Example would be Name Input
E-Mail Input
Age Input
Instead of Name Input E-Mail Input Age Input

Hope to hear back from you soon, thanks!

1 Like

Hey
So what I did was take each section one at a time ie. the name/email/password area. I made one fieldset for each section. Then I nested a label and input for each inside the fieldset.

fieldset>
label>Enter your first name:
input name=“first” type=“text” required/>
/label>
etc…
Hope this helps

I see, so:

fieldset>
label>
input>
/label>
/fieldset>

Also, a few more questions. Each of my fieldsets are still in a line, how do I make each fieldset read as a separate line?

Also how do I make the input boxes longer so it reads the entire placeholder?

How do I make the radio buttons go on the same line as the label to select?

How do I make each option read as a list of items? Example:
(checkbox) Front-End Projects
(checkbox) Back-End Projects
(checkbox) Data Visualization

Instead of: (checkbox) Front-End Projects (checkbox) Back-End Projects (checkbox) Data Visualization

Hope to hear back from you, thank you!

1 Like

No worries, glad to help :grinning:
So if you Google ‘css display’ , check out all the different values and what they do…specifically the ‘block’ value. I believe it may have been in your cafe menu lesson(?)

Also what I did was open the example survey that they give, and right click/inspect to see how they made their survey, when I got stuck.
I’ve also read many many times now that even the pros have to Google stuff all the time.
Let me know if I can do anything else for you
Good luck!