Survey Form - Build a Survey Form

Tell us what’s happening:
Ok, this is the maximum I can do without any help.
All the elements are in place and working but I got a bunch of errors that mostly are because of names or I don’t know…
Can someone please have a look at what I have done?
I know this is an evaluation challenge but I have to learn and I can’t without someone who verifies my work and mentor.

Thanks.

Your code so far

<h1 id="title"

freeCodeCamp Survey Form

Name Email <label Age(optional)
    <p>Which option best describes your current role? </>
    <select id="referrer" name="referrer">
        <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="4">Prefer not to say</option>
        <option value="5">Other</option>
      </select>
     </label>
  </fieldset>
  <fieldset>
    <p id="description"> Would you recommend freeCodeCamp to a friend? </p>
    <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" />Definitely</label>
    <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" />Maybe</label>
    <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" />Not sure</label>
    
    </label>
  </fieldset>
  <fieldset>
    
    <label for="referrer">What is your favorite feature of freeCodeCamp?
      <select id="referrer" name="referrer">
        <option value="">(select an option)</option>
        <option value="1">Challenges</option>
        <option value="2">Projects</option>
        <option value="3">Community</option>
        <option value="4">Open Source</option>
      </select>
    </label>

What would you like to see improved? (Check all that apply)

Front-end Projects Back-end Projects Data Visualization Challenges Open Source Community Gitter help rooms Videos City Meetups Wiki Forum Additional Courses Any comments or suggestions?

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/107.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

You haven’t pasted your code properly I guess. Please paste the whole code so that others can run and check it.

can you be more specific?

Which errors do you need help with?
What “names” do you mean?

Hi,
ok here is the code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css"/>
    </head>
  <body>
    <h1 id="title"</h1>
    <p id="description"> freeCodeCamp Survey Form </p>
    <form id="survey-form" id="name" type="text">
      <fieldset>
        <label for="name-label">Name<input id="name-label" name="name-label" type="text" placeholder="Enter your name" required /></label>
        <label for="email-label">Email<input id="email-label" name="email-label" type="email" placeholder="Enter your email" required /></label>
        <label <input id="number-label" for="number-label" placeholder="Age" required /></label>
        Age(optional<input type="number" name="number-label" id="number" min="10" max="99" class"form-control" placeholder="Age" required>

        <p>Which option best describes your current role? </>
        <select id="referrer" name="referrer">
            <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="4">Prefer not to say</option>
            <option value="5">Other</option>
          </select>
         </label>
      </fieldset>
      <fieldset>
        <p id="description"> Would you recommend freeCodeCamp to a friend? </p>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" />Definitely</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" />Maybe</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" />Not sure</label>
        
        </label>
      </fieldset>
      <fieldset>
        
        <label for="referrer">What is your favorite feature of freeCodeCamp?
          <select id="referrer" name="referrer">
            <option value="">(select an option)</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="4">Open Source</option>
          </select>
        </label>
 <p id="description"> What would you like to see improved? (Check all that apply) </p>
 <label for="personal-account"><input id="personal-account" type="checkbox" name="account-type" class="inline" />Front-end Projects</label>
        <label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Back-end Projects</label>
        <label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Data Visualization</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Challenges</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Open Source Community</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Gitter help rooms</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Videos</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />City Meetups</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Wiki</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Forum</label>
<label for="business-account"><input id="business-account" type="checkbox" name="account-type" class="inline" />Additional Courses</label>
<label for="comment">Any comments or suggestions?
          <textarea id="comment" name="comment" rows="7" cols="30" placeholder="Enter your comment here"></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

and this is the CSS


body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: poppins light;
  font-size: 10px;
}

h1, p, {
  margin: 1em auto;
  text-align: left;
 
}


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

}

fieldset {
  border: none;
  padding: 2rem 0;
  
  
}

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

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

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

input, textarea {
  background-color: white;
  border: 1px solid #0a0a23;
  color: grey;
}

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

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

input[type="file"] {
  padding: 1px 2px;

Does it work?

Thanks again.

Hi,
posted again the code.
The survey seems working but on the test I have errors about the syntax I guess.
I’m new in this.

is this all the code?
it kind of looks like it got cut-off?

you can use an online html validator to check your syntax here

Just past the html into it and read thru the reported errors and try to fix them.
(you can ask for help here if you are unsure what the messages are saying or how to fix them)

It’s all I have write from the start till the end.
Are u also a newbie?

The code I quoted is not complete. It is missing at the very least a closing curly brace }

I suggest you fix the html code using the link I provided.

This code is also incorrect.

Emile the comma on the right of the p selector

I don’t know why the Survey works, all the elements are working but I got errors?

Try to fix the syntax of your html and css first.

When those are fixed, you can try to understand any remaining errors by asking about them here.

it’s like my car is going, works great, but there is this sound that I don’t know from where it comes.
Who cares, the car is going.
So…why I should bother myself to fix something that doesn’t interfere with how the car is going?

I will rewrite some parts.
There are too many IDs with the same names and other incorrect entries.
I want to start doing well the thing.
This is just a form, can u imagine when I have to code an entire website?
I have lot to learn and patience I guess is one of the most important.
Thanks guys for support however.

1 Like

@hbar1st
I passed!
Today with a clear mind I figure it out!
Most were syntax errors but without a full check by a mentor or teacher I can’t say.
However, I passed!
Bring it on!

1 Like

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