Skip to main content

Survey Form

Source Code​

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>freeCodeCamp 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>
      <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Name<input id="name" name="name" type="text" placeholder=" Enter your name" required /></label>

        <label id="email-label" for="email">Email<input id="email" name="email" type="email" placeholder=" Enter your Email" required /></label>
        <label id="number-label" for="number">Age (optional)<input id="number" name="age" type="number" min="10" max="99" placeholder="Age"/></label>

        <label for="dropdown">Which option best describes your current role?
        <select id="dropdown" name="dropdown">
          <option value="">Select 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>

        <label for="reccomend">Would you recommend freeCodeCamp to a friend?
          <label for="definitely">
            <input id="definitely" type="radio" name="racommend" value="definitely" class="inline" checked /> Definitely
          </label>
          <label for="maybe">
            <input id="maybe" type="radio" name="racommend" value="maybe" class="inline" /> Maybe
          </label>
          <label for="not-sure">
            <input id="not-sure" type="radio" name="racommend" value="not-sure" class="inline" /> Not sure
          </label>
        </label>

        <label for="feature"> What is your favorite feature of freeCodeCamp?
          <select id="feature" name="feature">
            <option value="">Select an option</option>
            <option value="Challenges">Challenges</option>
            <option value="Projects">Projects</option>
            <option value="Community">Community</option>
            <option value="Open Source">Open Source</option>
          </select>
          <label>What would you like to see improved? (Check all that apply)</label>
            <label class="checkbox-label">
            <input class="improved" id="front-end-projects" name="front-end-projects" type="checkbox" value="front-end-projects">
            Front End Projects
          </label>

          <label class="checkbox-label">
            <input class="improved" id="back-end-projects" name="back-end-projects" type="checkbox" value="back-end-projects">
            Back End Projects
          </label>

          <label class="checkbox-label">
            <input class="improved" id="data-visualization" name="data-visualization" type="checkbox" value="data-visualization">
            Data Visualization
          </label>

          <label class="checkbox-label">
          <input class="improved" id="challenges" name="challenges" type="checkbox" value="challenges">
            Challenges
          </label>

          <label class="checkbox-label">
          <input class="improved" id="open-source-community" name="open-source-community" type="checkbox" value="open-source-community">
            Open Source Community
          </label>
          
          <label class="checkbox-label">
          <input class="improved" id="gitter-help-rooms" name="gitter-help-rooms" type="checkbox" value="gitter-help-rooms">
            Gitter help rooms
          </label>

          <label class="checkbox-label">
          <input class="improved" id="videos" name="videos" value="videos" type="checkbox">
            Videos
          </label>
          
          <label class="checkbox-label">
          <input class="improved" id="city-meetups" name="city-meetups" value="city-meetups" type="checkbox">
            City Meetups
          </label>

          <label class="checkbox-label">
          <input class="improved" id="wiki" name="wiki" value="wiki" type="checkbox">
            Wiki
          </label>

          <label class="checkbox-label">
          <input class="improved" id="forum" name="forum" value="checkbox" type="checkbox">
            Forum
          </label>

          <label class="checkbox-label">
          <input class="improved" id="additional-courses" name="additional-courses" value="additional-courses" type="checkbox">
            Additional Courses
          </label>

            <label for="comments">Any comments or suggestions?
              <textarea id="comments" name="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>

              <button id="submit" type="submit" class="submit">Submit</button>
        </fieldset>
      </form>
    </body>
  </html>