Survery Form

index.html

<link href="https://fonts.googleapis.com/css?family=Dosis|Mali|Pacifico" rel="stylesheet">
<div id="main">
  <h1 id="title">About You</h1>
  <p id="description">Fill your Details</p>
  <form id="survey-form">
    <label for="name" class="labels" id="name-label">* Name</label>
    <input name="name" type="text" id="name"  placeholder="Enter Your Name" class="input" required><br>
    <label for="email" class="labels" id="email-label">* Email</label>
    <input name="email" type="email" id="email" placeholder="Enter your email" class="input" required><br>
    <label for="age" class="labels" id="number-label">*Age</label>
    <input name="age" type="number" id="number" placeholder="Enter your age" class="input" min="1" max="100" required><br>
    <label for="currentPos" class="labels">Which of these describes your current possition?</label>
      <select class="input" id="dropdown" name="currentPos">
        <option disabledValue >Select an option</option>
        <option value="student">Student</option>
        <option value="fullT">Full Time Job</option>
        <option value="partT">Part Time Job</option>
        <option value="Prefer-N-S">Prefer Not to Say</option>
       </select> <br>
       <div class="rowTab">
          <div class="labels">
            <label for="userRating">Are you intrested in becoming a developer?</label>
           </div>
           <div class="rightTab">
            <ul style="list-style: none;">
              <li class="radio"><label>Definitely<input name="radio-buttons" value="1"  type="radio" class="userRatings" ></label></li>
  <li class="radio"><label>Maybe<input name="radio-buttons" value="2"  type="radio" class="userRatings" ></label></li>
  <li class="radio"><label>Not sure<input name="radio-buttons" value="3"  type="radio" class="userRatings" ></label></li>
</ul>
      </div>
    </div>
  <div class="rowTab">
      <div class="labels">
        <label for="preferences">Things that should be improved in the future<br>(Check all that apply): </label>
      </div>
      <div class="rightTab">
        <ul id="preferences" style="list-style: none;">
          <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
          <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</li>
          <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
          <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
          <li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
          <li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter help rooms</label></li>
          <li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Videos</label></li>
          <li class="checkbox"><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
          <li class="checkbox"><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
          <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
          <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courses</label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="comments">Feedback</label>
      </div>
      <div class="rightTab">
        <textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
      </div>
    </div>
    <button id="submit" type="submit">Submit</button>
  </form></div>
  

script.js

const projectName = 'survey-form';
localStorage.setItem('example_project', 'Survey Form');

style.css

html{
  background:#6BB0FA;  
}
#main{
  text-align: center;
  background-color: #078FED  ;
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 900px;
  font-family: 'Mali', cursive;
  padding: 10px;
  padding-top: 20px;
}
#title{
  font-size: 30px;
  font-family: 'Pacifico', cursive;
}
.labels{
  display: inline-block;
  text-align: right;
  width: 20%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;

}
.input{
  height: 20px ;
  width: 280px ;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}
#dropdown {
  height: 35px;
  width: 280px;
}
.radio, .checkbox {
  position: relative;
  left: -43px;
  margin-left: 10px;
  display: block;
  padding-bottom: 10px;
}
.labels {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.input-field {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}
#submit {
  background-color: #59ace0;
  border-radius: 4px;
  color: white;
  font-family: 'Dosis', sans-serif;
  font-size: 1em;
  height: 40px;
  width: 96px;
  margin: 10px;
  border: 0px solid;
}
@media screen and (max-width: 833px) {
  .input-field {
    width: 80%;
  }
  select {
    width: 90%;
  }
}

@media screen and (max-width: 520px) {
  .labels {
    width: 100%;
    text-align: left;
  }
  .rightTab {
    width: 80%;
    float: left;
  }
  .input-field {
    width: 100%;
  }
  select {
    width: 100%;
  }
}

survery-form.markdown

Survery Form

A Pen by Ashish on CodePen.

License.