Survey Form - Build a Survey Form

This is part of the certification so my apologies if I’m not supposed to be asking for help.
First I am wondering if I am using the fieldset tag properly, but secondly and more vexing is I cannot seem to locate my error " You should have a select field with an id of dropdown ."
Any feedback or hints would be greatly appreciate.

Your code so far

<!-- file: index.html -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<section id="container">
<h1 id="title">Your candy is almost on the way! </h1>
<p id="description">Thank you for your interest in Pamzies Candiez, for us to best create your customized party favor needs please fill out your candy request below!</p>

<form id="survey-form">
  <fieldset id="personal"> <h2 class="form-heading"> Personl information: </h2>
    <label id="name-label" for="name">First Name:<input id="name" type="text" placeholder="Enter your first name" required></label>
    <label for="last-name">Last Name: <input id="name-last" type="text" placeholder="Enter your Last name" required></label>
    <label id="email-label"for="email">Email:<input id="email" type="email" placeholder="" required></label>
    <label for="birthday">Birthday:<input type="date" id="birthday" name="birthday"></label>
    <h2 class="form-heading">About your Event:</h2>
    <label id="number-label" for="number">About how many are attending? <input type="number" id="number" name="number" min="2" max="50"placeholder="2-50"> </label>
    <label id="dropdown" for="selection">What are you celebrating?
<select id="selection dropdown"  name="selection">
  <option value=""disabled selected>Select from below</option>
  <option value="baby">Baby Shower</option>
  <option value="bridal">Bridal Shower</option>
  <option value="wedding">Wedding</option>
  <option value="birthday">Birthday Party</option>
  <option value="other">Other</option>
    <label for="additional-information">Provide additional information:
          <textarea id="additional-information" name="additional-information" rows="5" cols="30" placeholder="The baby shower is a for a girl named Candy...."></textarea>
    <h2 class="form-heading">Would you like to add decorations for $30?</h2>
     <label for="yes"><input class="inline" type="radio"  id="yes" name="add-decorations" value="yes" checked>Yes Please!</label>
       <label for="no"><input class="inline" type="radio"  id="no" name="add-decorations" value="no">No Thank You.</label>
  <fieldset> <h2 class="form-heading"> Submit your order:</h2>
    <label for="agree">
    <input id="agree" type="checkbox" value="agree" required name="agree" class="inline" /> I agree to be contacted. </label>
     <label for="agree">
    <input id="subscribe" type="checkbox" value="subscribed" name="subscribe" class="inline" /> Please tell me about future deals! </label>
    <input type="submit" value="Submit" id="submit" />
/* file: styles.css */
* {
box-sizing: border-box;

@import url('');

#container {
  text-align: center;
  padding: 1%;
  width: 70%;
  background-color: pink;
  border-radius: 50px;
  box-shadow: 5px 10px 8px #D7C5D7;

#title, h1 {
  font-family: 'Emilys Candy', cursive;
  color: red;
  font-size: 1.8em;
h2 {
   font-family: 'Emilys Candy', cursive;
   font-size: 1.3em;
   margin: 8px 0;

#description, body {
  font-family: 'Edu NSW ACT Foundation', cursive;

body {
  display: flex;
  justify-content: center;
  background-image: url('')

p {
  font-size: 1.4em;
header {
  padding: 0 8px;

input:focus {
  background-color: lightblue;

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

#personal label {
  display: inline-block;
  text-align: left;
  margin: 2%;
  width: 40%;

label {
  display: block;
  text-align: left;
  margin: 2%;
  width: 50%;

input, textarea, select {
  width: 100%;
  min-height: 2em;

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #5EBEF1;
.form-heading {
  text-align: left;
  margin-bottom: 1rem;

width: 60px;
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  #selection {
    width: 150px;

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Just as a hint, id’s are supposed to be unique whereas your usage of id="dropdown is a little less (or more) than unique. :wink:

Hmm yes, I see my label has the same id, removing that! Okay that put me on track, changed it to for=“dropdown” and got rid of the extra id and passed!

Thank you!

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