Help Please. Survey form project errors unexplained

Hi there! I am getting errors in my project that don’t make sense to me. Error 1 (#6)says I need to have my text equal to email, and it does. Error 2 (#13) says inside the form element I need to have at least 2 radio buttons, and I do. Error 3(#14) says inside the form element I need to have at least 2 check boxes, and I do. Error 4(#15) says my textarea is not inside the form element, but it is. Error 5(#16) says my submit button with id=“submit” is not inside the form element, but it also is. Any help is apreciated!
Code is :

//<div class="container">
  <header class="header">
    <h1 id="title" class="text-center">Nicole's Soaps Survey Form
    </h1>
    <p id="description"class="description text-center"> Thank you for taking the time to help me better my business!</p>
  </header>
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name"> Name</label>
      <input
             type="text"
             name="name"
             id="name"
             class="form-control"
             placeholder="Enter your name"
             required />
    </div>
    <div class="form-group">
      <label id="email-label" for="email"> Email</label>
      <input
             type="text"
             text="email"
             name="email"
             id="email"
             class="form-control"
             placeholder="Enter your Email"
             required /> 
    </div>
    <div class="form-group">
      <label id="number-label" for="number"> Age</label>
      <span class="clue">(optional)</span></label>
    <input
           type="number"
           name="age"  
           id="number"
           min="10"
           max="99"
           class="form-control"
           placeholder="Age"/>
    </div>
  <p> Which best describes your current role?</p>
  <select id="dropdown" name="role" class="form-control" 
     required />
  <option disabled selected value>Select current role</option>
  <option value="student">Student</option>
  <option value="job">Full-time job</option>
  <option value="prefer-no">Prefer not to say</option>
  <option value="other">Other</option>
  </select></div>
<div class="form-group">
  <p>Would you recommend Nicole's Soaps to a friend?</p>
  <label>
    <input
           name="user-recommend"
           value="definitely"
           type="radio"
           class="input-radio"
           checked/>Definitely</label>
  <label>
    <input
           name"user-recommend"
           value="maybe"
           type="radio"
           class="input-radio"/>Maybe</label>
  <label>
    <input
           name"user-recommend"
           value="no"
           type="radio"
           class="input-radio"/>No</label>
  <div class="form-group">
    <p>What is your favorite thing about Nicole's Soaps?</p>
    <select id="most-like"name="most-like" class="form-control"
            required/>
    <option disabled selected value>Select an option</option>
    <option value="scent">The scents</option>
    <option value="color">The colors</option>
    <option value="packaging">The packaging</option>
    <option value="speed">Shipping speed</option></select>
</div>
<div class="form-group">
  <p>What would you like to see improved?
    <span class="clue"> (Check all that apply)</span></p>
  <label> 
    <input
           name="prefer"
           value="quality"
           type="checkbox"
           class="input=checkbox"/> Soap quality</label>
  <label>
    <input
           name="prefer"
           value="scents"
           type="checkbox"
           class="input-checkbox"/> Scents</label>
  <label>
    <input
           name="prefer"
           value="colors"
           type="checkbox"
           class="input-checkbox"/> Colors</label>
  <label>
    <input
           name="prefer"
           value="packaging"
           type="checkbox"
           class="input-checkbox"/> Packaging</label>
  <label>
    <input
           name="prefer"
           value="shipping"
           type="checkbox"
           class="input-checkbox"/> Shipping</label>
  <label>
    <input
           name="prefer"
           value="website"
           type="checkbox"
           class="input-checkbox"/> Website</label>
</div>
<div class="form-group">
  <p>Any comments or suggestions?</p>
  <textarea
            id="comments"
            class="input-textarea"
            name="comment"
            placeholder="Enter your comment here">
  </textarea>
</div>
  <div class="form-group">
    <button type="submit" id="submit" class="submit-button">Submit</button>
</div>
</form>

Welcome to the forums @Manda1287.
It’s better if you provide a link to your code rather than just a snippet.
Also, Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>) so we don’t have to add it.

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing message says

If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
Email field should be HTML5 validated : expected 'text' to equal 'email'
AssertionError: Email field should be HTML5 validated : expected 'text' to equal 'email'

Can you see what it’s looking for?

You have typo’s in that causes the second failure message. Reading the entire message should help.

As a suggestion, to help with the typo’s, switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

Also it’s best to make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

1 Like

I was reading the entire message, but couldn’t find the errors. Even searching them a while, which is why I resulted to posting. Thank you for the tip about the syntax highlighting change! That was helpful. All tests are passing now, but I’m still working on the CSS. :slight_smile:

I am just learning how to do this(absolute beginner). It is one of my first projects, and I studied the sample to make sure I wrote the code properly. I don’t know(yet) how I could personalize the code to make it unique but also function the way HTML needs it to. In the CSS, I am playing around with things to make the design look how I want. The content, I switched up some of it to make it fit better for a project I am hopefully doing in the future for a friend. I am typing it all out though, no copy and paste, so that I can see things pop up as I enter them and how they change with each line I write, to better understand how this works.

How would I go about improving my code so that it works but is not the exact same as the sample? Is this taught in future lessons? Any thoughts or ideas are helpful! I want to learn, that’s why I’m here. Thank you!

I understand @Manda1287. Everyone here is a beginner. The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges. The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.

One of the user stories (User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id="dropdown".) in this project was one that was not covered in the lessons. FCC promotes using the Read - Search - Ask method.
In order to find how to do this rather than looking at the sample project you could have done some searching. A good search term for this project is html form elements.
Some of what you find when searching will reinforce what was learned in FCC and some will be new and that will strengthen the learning process.

Asking for feedback in the #project-feedback subforum once you complete a project is a way to help improve your coding skills.
The projects are the way to learn how to write your own code.
Following the user stories will give you the basic HTML layout of the page and the you use CSS to style it they way you’d like.
To help style a page one first step is to put pen to paper and sketch out your design and then start writing the stylesheet.

1 Like

Thank you so much! This is really useful information. I appreciate you taking time to respond. I will definitely be doing some searching. Thanks again!