# Feedback for Survey Form

**URL:** <https://forum.freecodecamp.org/t/feedback-for-survey-form/577188>\
**Category:** I Built This\
**Created:** [December 10, 2022, 8:38pm UTC](https://forum.freecodecamp.org/t/feedback-for-survey-form/577188 "2022-12-10T20:38:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maralobes](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@maralobes](https://forum.freecodecamp.org/u/maralobes)\
**Post date:** [December 10, 2022, 8:38pm UTC](https://forum.freecodecamp.org/t/feedback-for-survey-form/577188/1 "2022-12-10T20:38:56Z")

</div>

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! 😀

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![Cody\_Biggs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cody_biggs/32/358652_2.png) [@Cody\_Biggs](https://forum.freecodecamp.org/u/Cody_Biggs)\
**Post date:** [December 10, 2022, 10:26pm UTC](https://forum.freecodecamp.org/t/feedback-for-survey-form/577188/2 "2022-12-10T22:26:03Z")

</div>

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.

> **[CodePen](https://codepen.io/)**
>
> An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 11, 2023, 10:26am UTC](https://forum.freecodecamp.org/t/feedback-for-survey-form/577188/3 "2023-06-11T10:26:11Z")

</div>

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