Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening: Hello guys, I’m currently working on my “build a survey form” project, and everything seemed to be going fine, but i got stuck on the last test " Your #submit should be a descendant of #survey-form ." All the other steps that asked the other elements to be descendant of survey form worked, but the submit button didn’t for some reason, and i can’t figure out why, as it is inside the element. Can someone help me spot what i have missed? I read the code over and over and can’t seem to find where i went wrong.

Your code so far


<!DOCTYPE hmtl>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
     <div class="container">
      <header class="header">
    <h1 id="title" class="text-center">VeganHub Survey Form</h1>
    <p id="description" class="description-text-center">Thank you for taking the time to help us improve our VeganHub Platform</p>
    </header>
    <form id="survey-form" class="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="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<span class="clue"> (optional)</span></label>
            <input type="number"
name="age"
id="number"
min="10"
max="99"
class="form-control"
placeholder="Age"/>
</div>
<div class="form-group">
  <p>Which option best describes your current diet/lifestyle?</p>
  <select id="dropdown" name="diet-lifestyle" class="form-control" required>
    <option disabled selected value> Select current diet</option>
    <option value="conventional">Conventional</option>
    <option value="pescetarian">Pescetarian</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="vegan">Vegan</option>
    <option value="other">Other</option>
    <option value="preferNo">Prefer not to say</option>
    </select>
    </div>
    <div class="form-group">
      <p>Would you recommend VeganHub 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="not-sure" type="radio" class="input-radio"/>Not sure</label>
        </div>
        <div class="form-group">
          <p> What is your favorite feature of VeganHub?</p>
     <select id="most-like" name="mostLike" class="form-control" required>
       <option disabled selected value>Select an option</option> 
       <option value="informative-material">Informative material (videos, articles, researches)</option>
       <option value="community-forum">Community forum</option>
       <option value="culinary-recipes">Culinary recipes</option>
       <option value="courses">Courses</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="articles" type="checkbox" class="input-checkbox"/>Articles</label>
           <label><input name="prefer"
          value="researches" type="checkbox" class="input-checkbox"/>Researches</label>
           <label><input name="prefer"
          value="statistics" type="checkbox" class="input-checkbox"/>Statistics</label>
           <label><input name="prefer"
          value="challenges" type="checkbox" class="input-checkbox"/>Challenges</label>
           <label><input name="prefer"
          value="community-forum" type="checkbox" class="input-checkbox"/>Community Forum</label>
           <label><input name="prefer"
          value="expert-chat" type="checkbox" class="input-checkbox"/>Chat with experts</label>
           <label><input name="prefer"
          value="videos" type="checkbox" class="input-checkbox"/>Videos</label>
           <label><input name="prefer"
          value="community-meetings" type="checkbox" class="input-checkbox"/>Community meetings</label>
           <label><input name="prefer"
          value="courses" type="checkbox" class="input-checkbox"/>Courses</label>
           <label><input name="prefer"
          value="expert-lectures" type="checkbox" class="input-checkbox"/>Expert Lectures
           <label><input name="prefer"
          value="culinary-recipes" type="checkbox" class="input-checkbox"/>Culinary Recipes</label>
          </div>
          <p>Any comments or suggestions?</p>
          <textarea id="comments" class="input-textarea"
          name="comment"
          placeholder="Enter your comments here..."></textarea>
          </div>
          <div class="form-group">
            <button type="submit" id="submit" class="submit-button">Submit</button> </div></form>
            </div>
    </body>
</html>
1 Like
2

Hello, welcome to the fCC forum!
So try moving your

<div class="form-group">
            <button type="submit" id="submit" class="submit-button">Submit</button> </div></form>
            </div>

to directly after your closing tag of your textarea element.

1 Like
3

Also a little bot of advice, try wrapping your label elements that contain text each in a separate section element so that it doesn’t go next to each other like that.
Example:

<section><label> 
                <input 
                name="improvements"
                value="back-end-projects"
                type="checkbox"
                class="inputthree"/>Back-end Projects</label></section>
1 Like
4

Welcome to the forum @tuquituns

In addition to advice from @zuhameer6, remove the first and last closing div tags shown in the following code block.

Happy coding

1 Like
5

Thank you so much @Teller and @zuhameer6 , i used both of yalls advices and it worked!

2 Likes
6

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