FCC: Survey Form

fcc-survey-form.markdown

FCC: Survey Form

A Pen by xilikas on CodePen.

License.

index.html

<h1 id="title">Survey Form</h1>
<p id="description">How can we improve freeCodeCamp?</p>
<form action="post" id="survey-form">

  <label for="name" id="name-label">Name: </label>
  <input type="text" required id="name" placeholder="Enter your name">

  <label for="email" id="email-label">Email: </label>
  <input type="email" required id="email" placeholder="Enter your email">

  <label for="number" id="number-label">Age:</label>
  <input type="number" min="1" max="99" placeholder="Age" id="number">

  <label for="dropdown">Which best describes your current role?</label>
  <select name="role" id="dropdown">
    <option value="student">Student</option>
    <option value="ft-job">Full Time Job</option>
    <option value="ft-learner">Full Time Learner</option>
    <option value="none">Prefer not to say</option>
    <option value="other">Other</option>
  </select>

  <label>How likely are you to recommend freeCodeCamp to a friend?</label>
  <ul class="list">
    <li><input type="radio" name="recommendation" value="definitely" id="definitely"><label for="definitely">Definitely</label></li>
    <li><input type="radio" name="recommendation" value="maybe" id="maybe"><label for="maybe">Maybe</label></li>
    <li><input type="radio" name="recommendation" value="not-sure" id="not-sure"><label for="not-sure">Not Sure</label></li>
  </ul>

  <label for="dropdown2">What do you like most in FCC:</label>
  <select name="like-most" id="dropdown2">
    <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="open-source">Open Source</option>
  </select>

  <label>Things that should be improved in the future <br>(Check all that apply):</label>
  <ul class="list">
    <li><input type="checkbox" name="improve" value="front-end" id="front-end"><label for="front-end">Front-end Projects</label></li>
    <li><input type="checkbox" name="improve" value="back-end" id="back-end"><label for="back-end">Back-end Projects</label></li>
    <li><input type="checkbox" name="improve" value="data-visual" id="data-visual"><label for="data-visual">Data Visualization</label></li>
    <li><input type="checkbox" name="improve" value="challenges" id="challenges"><label for="challenges">Challenges</label></li>
    <li><input type="checkbox" name="improve" value="community" id="community"><label for="community">Open Source Community</label></li>
    <li><input type="checkbox" name="improve" value="gitter" id="gitter"><label for="gitter">Gitter help rooms</label></li>
    <li><input type="checkbox" name="improve" value="videos" id="videos"><label for="videos">Videos</label></li>
    <li><input type="checkbox" name="improve" value="meetups" id="meetups"><label for="meetups">City Meetups</label></li>
    <li><input type="checkbox" name="improve" value="wiki" id="wiki"><label for="wiki">Wiki</label></li>
    <li><input type="checkbox" name="improve" value="forum" id="forum"><label for="forum">Forum</label></li>
    <li><input type="checkbox" name="improve" value="courses" id="courses"><label for="courses">Additional Courses</label></li>
  </ul>

  <label for="comments">Any Comments or Suggestions?</label>  
  <textarea name="comments" id="comments" cols="30" rows="10"></textarea>

  <div></div>
  
  <input type="submit" id="submit">
</form>

<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: #12B179;
  color: #2059AE;
}

input, select {
  padding: 5px;
}

#survey-form {
  background-color: #FFAA72;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px 10%;
  margin: 0 20%;
  grid-gap: 10px;
}

.list {
  list-style: none;
  text-align: left;
  padding-left: 0;
  margin: 0;
}

label {
  text-align: right;
  padding-right: 1em;
}

#submit {
  width: 200px;
  margin-left: auto;
  margin-top: 2em;
}

@media screen and (max-width: 833px) {
  #survey-form {
    grid-template-columns: repeat(1, 1fr);
  }
  label {
    text-align: left;
  }

  #submit {
    width: 100px;
    margin-right: auto;
    margin-top: 0.2em;
  }
}