Survey Form - Build a Survey Form

Tell us what’s happening:

Your code so far

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.

<html lang="en">
  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" type=text/css href="styles.css">
</head>
      <main>
  <body>
    <h1>freeCodeCamp Survey Form</h1>
     <h2><em>Thank you for taking the time to help us improve the platform</em></h2>
    <form method="post" 
    action='https://survey-form.freecodecamp.rocks'id="survey-form">
    <div class="menu">
    <fieldset>
      <p>Name</p>
        <label for="name-label"><input id="name" name="name" type="text" required placeholder="Enter your name" value:"name"></input></label>
        <p>Email</p>
<label for="Email-label"><input id="email" name="email" type="email" required placeholder="Enter your email" value:"email" ></input></label>  
<p>Age (optional)</p>  
<label for="number-label"><input id="number" name="age" type="number" placeholder="" value:"age" min="10" max="99"/></label>  
 <p>Which option best describes your current role?</p>
 <label for="dropdown">
         <select id="dropdown" name="dropdown">
           <option value="">Select current role</option>
           <option value="1">Student</option>
           <option value="2">Full Time Job</option>
           <option value="3">Full Time Learner</option>
            <option value="3">Prefer not to say</option>
           <option value="4">Other</option>
         </select>
<p>Would you recommend freeCodeCamp to a friend?</p>
<div>
<label for="definitely"><input id="Definitely" type="radio" name="recommend" class="inline" required /> Definitely</label> 
</div>

<div>
<label for="Maybe"><input id="Maybe" type="radio" name="recommend" class="inline" required /> Maybe</label> 
</div>

<div>
<label for="Not sure"><input id="Not sure" type="radio" name="recommend" class="inline" required/> Not sure</label> 
</div>

<p>What is your favorite feature of freeCodeCamp?</p>
<label for="dropdown">
         <select id="dropdown" name="dropdown">
           <option value="">Select an option</option>
           <option value="1">Challenges</option>
           <option value="2">Projects</option>
           <option value="3">Community</option>
            <option value="3">Open Source</option>
         </select>
<p>What would you like to see improved? (Check all that apply)</p>
<div>
<label for="Front-end Projects"><input id="Front-end Projects" type="checkbox" name="improve" class="inline"/> Front-end Projects</label> 
</div>

<div>
<label for="Back-end Projects"><input id="Back-end Projects" type="checkbox" name="improve"class="inline"/> Back-end Projects</label> 
</div>
<div>
<label for="Data Visualization"><input id="Data Visualization" type="checkbox" name="improve"class="inline"/> Data Visualizations</label> 
</div>
<div>
<label for="Challenges"><input id="Data Visualization" type="checkbox" name="improve"class="inline"/> Challenges</label> 
</div>
<div>
<label for="Open Source Communitys"><input id="Open Source Community" type="checkbox" name="improve" class="inline"/> Open Source Community</label> 
</div>
<div>
<label for="Gitter help rooms"><input id="Gitter help rooms" type="checkbox" name="improve" class="inline"/> Gitter help rooms</label> 
</div>
<div>
<label for="Videos"><input id="Videos" type="checkbox" name="improve" class="inline"/> Videos</label> 
</div>
<div>
<label for="City Meetups"><input id="City Meetups" type="checkbox" name="improve"class="inline"/> City Meetups</label> 
</div>
<div>
<label for="Wiki"><input id="Wiki" type="checkbox" name="improve" class="inline"/> Wiki</label> 
</div>
<div>
<label for="Forum"><input id="Forum" type="checkbox" name="improve" class="inline"/> Forum</label> 
</div>
<div>
<label for="Additional Courses"><input id="Additional Courses" type="checkbox" name="improve" class="inline"/> Additional Courses</label> 
</div>
<br></br>
<p>Any comments or suggestions?</p>
<label for="comments"><textarea id="comments" name="comments" type="text" required placeholder="Enter your comment here" value="comments" cols="40px" rows="7px"></textarea></label>

<div>
<input id="Submit" type="submit" name="submit" class="boton"/></input></div>
</div>
</div>
 </div>
</body>
</main>
</html> ``` line above and the ``` body {
 width: 100%;
 height: 100vh;
 margin: 0;
 color: #f5f6f7;
 font-family: Tahoma;
 font-size: 16px;
 background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}


.menu{
  width: 100%;
  background-color: brown; 
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}


h1 {
 margin: 1em auto;
 text-align: center;
  family-font: ginebra;
  margin-bottom: 0;
  margin-top: 2em;
} 

h2 {
margin: 1em auto;
text-align: center;
family-font: ginebra;
font-size: 15px;
}

p {
margin: 1em auto;
text-align: left;
family-font: ginebra;
}


form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  text-align: left;
}


fieldset {
  border: none;
  padding: 2rem 0;
  text-align: left;
  border-bottom: 3px solid white;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 0px 0 0 0;
  width: 100%;
  min-height: 3em;
}

input, textarea {
  background-color: white;
  border: 1px solid white;
  color: black;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 100%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: green;
  border-color: green;
  min-width: 300px;
}

input[name="submit"] {
 color: white ;
}


input[type="text"] {
  width: 100%;
}

Your browser information: Hey, I’m new coding and I’m trying to do this test but I didn’t get it. I don’t know what is wrong. Any clues? Please enlighten me.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hey, I’m new coding and I’m trying to do this test but I didn’t get it. I don’t know what is wrong. Any clues? Please enlighten me

  • You are missing the title and description ids on two of the elements.

  • Your for and id attributes do not match or have incorrect values.

  • You are missing other attributes on various elements.


Read the tests and start to fix it from the top.

For example:

You should have an h1 element with an id of title.

You have:

<h1>freeCodeCamp Survey Form</h1>
1 Like

Ok! Thank you so much for your help. I solved everything except these one. I don’t know what to do. I tried every combination but it doesn’t work.

LINK PROJECT

The link does not contain your code. You have to post it again.

Use the “preformatted text” tool in the editor (</>) to add backticks around the code.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.