Survey Form

index.html

<h1 id="title">Survey Form</h1>
<div id="form-outer"> 
  <p id="description">
    Please rate your service experience with E.G.
  </p>
  <form id="survey-form" method="post"
action="#">         
<div class="rowTab">
      <div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightTab">
        <input autofocus-type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="email-label" for="email">* Email: </label>
      </div>
      <div class="rightTab">
        <input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="number-label" for="age">* Age: </label>
      </div>
      <div class="rightTab">
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">

        </div>
      </div>
      <div class="rowTab">
        <div class="labels">
          <label for="industry">What is your current            industry?</label>
        </div>
        <div class="rightTab">
          <select id="dropdown" name="industry" class="dropdown">
            <option disabled-value>Select an option</option>
            <option         
            value="automotive">Automotive</option>
            <option
            value="insurance">Insurance</option>
            <option
            value="retail">Retail</option>
            <option
            value="government">Government</option>
            <option
                    value="finance">Finance</option>
            <option
                    value="medical">Medical</option>
            <option 
                    value="other">Other</option>
    </select>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels"><label for="userRating">* Will you use the services of E.G. in the future?</label>
 </div>
      <div class="rightTab">
        <ul style="list-style: none;">
          <li class="radio"><label>Yes<input name="radio-buttons" value="1"  type="radio" class="userRatings" ></label></li>
          <li class="radio"><label>No<input name="radio-buttons" value="2"  type="radio" class="userRatings" ></label></li>
          <li class="radio"><label>Undecided<input name="radio-buttons" value="3"  type="radio" class="userRatings" ></label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="most-like">What do you like most in FCC: </label>
      </div>
      <div class="rightTab">
        <select id="most-like" name="mostLike" class="dropdown">
      <option disabled selected value>Select an option</option>
      <option value="challenges">Challenges</option>
      <option value="projects">Projects</option>
      <option value="community">Community</option>
      <option value="openSource">Open Source</option>
    </select>
      </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">Customer Service</label></li>
          <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">File Quality</li>
          <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Troubleshooting</label></li>
          <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Follow-up</label></li>
          <li class="checkbox"><label><input         name="prefer" value="6" type="checkbox" class="userRatings">Timeliness</label></li>
          <li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Follow-up</label></li> 
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="comments">Please enter any comments or suggestions</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

// coded by @emusicmanager
const projectName = 'survey-form';
localStorage.setItem('example_project', 'Survey Form');

style.css

html,
body {
  background-color: #00DD;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  min-width: 300px;
}

header {
  font-size: 2em;
  font-weight: bold;
  margin: 20px;
}

#form-outer {
  background-color: rgb(250, 250, 250);
  margin: auto auto;
  border-radius: 100px;
  width: 75%;
  max-width: 900px;
  padding: 10px;
  padding-top: 20px;
}

.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;
}

#userAge {
  width: 40px;
}

.userRatings,
input[type="checkbox"] {
  float: left;
  margin-right: 5px;
}

#submit {
  background-color: #FF0000;
  border-radius: 4px;
  color: white;
  font-size: 1em;
  height: 40px;
  width: 96px;
  margin: 10px;
  border: 0px solid;
}

.dropdown {
  height: 35px;
  width: 140px;
  padding: 5px;
  margin: 10px;  
  margin-top: 15px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.radio, .checkbox {
  position: relative;
  left: -43px;
  margin-left: 10px;
  display: block;
  padding-bottom: 10px;
}

@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%;
  }
}

survey-form.markdown

Survey Form

FCC Survey Form

A Pen by EG on CodePen.

License.