Feedback for Survey Form

Hi everyone!

I am new at coding, it is my first time doing a survey form, so I would like to ask you for some feedback to improve my code and my skills. Thank you! :grinning:

HTML
<!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
     <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <div class="form">
    <form id="survey-form">
      <fieldset>
        <label id="name-label">Name
         <input id="name" name="name" type="text" placeholder="Enter your name" required></input>
        </label>
        <label id="email-label">Email
         <input id="email" name="email" type="email" placeholder="Enter you email" required></input>
        </label>
        <label id="number-label"> Age (optional)<input id="number" name="number" type="number" min="13" max="100" placeholder="Age">
        </label></fieldset>
<fieldset><label for="dropdown">Which option best describes your current role?
  <select id="dropdown" name="dropdown">
    <option value="">(Select your 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> Would you recommend freeCodeCamp to a friend?</p>
<label for="Definitely"><input id="Definitely" type="radio" name="recommend" value="definitely" class="inline" checked> Definitely</label>
<label for="Maybe"> <input id="Maybe" type="radio" name="recommend" value="Maybe" class="inline" checked> Maybe </label>
<label for="Not sure"> <input id="Not sure" type="radio" name="recommend" value="Not sure" class="inline" checked> Not sure </label>
</fieldset>
<fieldset>
  <label>What is your favorite feature of freeCodeCamp?
  <select id="feature" name="feature">
    <option value="">(Select one)</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Open Source</option>
  </select></label>
</fieldset>
<fieldset>
  <p>What would you like to see improved? (Check all that apply)</p>
   <label for="Front-end Projects"> <input id="Front-end Projects" type="checkbox" name="improvements" value="Front-end Projects" class="inline" checked> Front-end Projects
   <label for="Front-end Projects"> <input id="Front-end Projects" type="checkbox" name="improvements" value="Front-end Projects" class="inline"> Front-end Projects </label>
   <label for="Back-end Projcts"> <input id="Back-end Projects" type="checkbox" name="improvements" value="Back-end Projects" class="inline"> Back-end Projects </label>
  <label for="Data Visualizations"> <input id="Data Visualizations" type="checkbox" name="improvements" value="Data Visualization" class="inline"> Data Visualization </label>
  <label for="Challenges"> <input id="Challenges" type="checkbox" name="improvements" value="Challenges" class="inline"> Challenges </label>
  <label for="Open Source Community"> <input id="Open Source Community" type="checkbox" name="improvements" value="Open Source Community" class="inline"> Open Source Community </label>
  <label for="Gitter help rooms"> <input id="Gitter help rooms" type="checkbox" name="improvements" value="Gitter help rooms" class="inline"> Gitter help rooms </label>
  <label for="Videos"> <input id="Videos" type="checkbox" name="improvements" value="Videos" class="inline"> Videos </label>
   <label for="City Meetups"> <input id="City Meetups" type="checkbox" name="improvements" value="City Meetups" class="inline"> City Meetups </label>
   <label for="Wiki"> <input id="Wiki" type="checkbox" name="improvements" value="Wiki" class="inline"> Wiki </label>
  <label for="Forum"> <input id="Forum" type="checkbox" name="improvements" value="Forum" class="inline"> Forum </label>
  <label for="Additional Courses"> <input id="Additional Courses" type="checkbox" name="improvements" value="Additional Courses" class="inline"> Additional Courses </label>
</label></fieldset>
<fieldset>
  <label for="Comments">Any comment? 
    <textarea id="comments" name="comments" rows="5" cols="50" placeholder="Enter your comment here..."></textarea>
  </label>
      </fieldset>
<input id="submit" type="submit" value="Submit">
    </form>
    </div>
  </body>
</html>
CSS
body{
  background-image: url(https://t3n.de/news/wp-content/uploads/2018/06/shutterstock-1107121655.jpg);
  width:100%;
  height: 100vh;
  margin: 0;
  color: #f3f3f3;
  font-family: poppins, sans-serif;
  font-size:18px;
  padding: 30px;
    background-size: cover;
   }
   

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

form{
  width: 50vw;
  max-width: 400px;
  min-width: 100px;
  margin: 1em auto;
  padding-bottom: 3em; 
}

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

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

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

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

input[type="radio"] {
  width: unset;
  height: 1em;
  margin: 0 0.5 0 0;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"] {
  width: unset;
  height: 1em;
  margin: 0 0.5em 0 0;
  display: inline-block;
  vertical-align: middle;
}

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

.form{
  background-color: black;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
  min-width: 100px;
}

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

Congratulations on finishing your first project! However, its hard to see what your project looks like by giving us just the code. Most people are not going to take the time to copy and paste it somewhere to view it. I suggest making a new codepen, and pasting the html/css in the appropriate boxes and then posting the link of that here so we can view it better.

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