Bee94/fcc-2-survey-form.markdown

## fcc-2-survey-form.markdown

      
    Raw
  

              fcc-2-survey-form.markdown
            
          
    FCC 2: Survey Form

A Pen by Bee94 on CodePen.
License.

  
## index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--
Survey form
-->
<!DOCTYPE html>
<html>
 <head> </head>
  <body>
    <h1 id="title">Survey Form </h1>

    <form id="survey-form" method="GET">
      <p id="description"> Please provide your feedback for FCC's Responsive Web Design course</p>
    <div>
      <label id="name-label" for="name">Name: </label>
      <input id="name" class= "input-field" type="text" name="name" placeholder="Enter your name" required="">
     </div>

      <div>
      <label id="email-label" for="email">Email:  </label>
        <input id="email" class="email-field" type="email" name="email" placeholder="Please enter your Email" required="">
      </div>

      <div>
      <label id="number-label" for="number">Contact: </label>
     <select id="dropdown" class="dropdown" name="country-codes">
       <option value="">Select</option>
       <option value="UK">UK(+44) </option>
       <option value= "IND">IND(+91)</option>
       <option value="USA"> USA(+1) </option>
       <option value="other"> Other </option>
     </select>
      <input id="number" class="input-field" name="phone" type="number" min="10" max="11" placeholder="Enter your contact number" required="">
      </div>

      <div>
        <label id="currentRole"> What describes your current role? </label>
       <ul style="list-style: none;">
          <li class="radio">
            <label>
              <input class="radio-buttons" name="describeRole" value="1" type="radio"> Student </label></li>

        <li class="radio">
          <label> <input class="radio-buttons" name="describeRole" value="2" type="radio"> Full-time employee </label></li>

        <li class="radio">
          <label> <input class="radio-buttons" name="describeRole" value="3" type="radio"> Part-time employee </label></li>

         <li class="radio">
          <label>  <input class="radio-buttons" name="describeRole" value="4" type="radio"> Unemployeed </label></li>
        </ul>
      </div>

      <div>
        <label> Education Level:  </label>
        <select id="dropdown" class="dropdown" name="education-level">
          <option value="">Select</option>
          <option value="Graduate">Graduate </option>
          <option value="HND/HNC">HND/HNC </option>
          <option value="A-Levels">A-Levels </option>
          <option value="GCSE">GCSE </option>
        </select>
      </div>

      <div>
        <label> How would you rate this course?</label>
        <ul style="list-style: none;">
          <li class="radio">
            <label>
              <input class="radio-buttons" name="rate" value="1" type="radio"> Poor </label></li>

          <li class="radio">
            <label>
              <input class="radio-buttons" name="rate" value="2" type="radio"> Average </label></li>

          <li class="radio">
            <label>
              <input class="radio-buttons" name="rate" value="3" type="radio"> Good </label></li> </ul>
      </div>
     <div>
       <label>Do you think there could be anymore additional material? (check what applies)</label>
       <ul style="list-style: none;">
          <li class="checkbox">
            <label>
              <input class="feedback" name="rate" value="1" type="checkbox"> Add videos </label></li>

          <li class="checkbox">
            <label>
              <input class="feedback" name="rate" value="2" type="checkbox"> Add more projects </label></li>

          <li class="checkbox">
            <label>
              <input class="feedback" name="rate" value="3" type="checkbox"> Add less projects </label></li>
       <li class="checkbox">
            <label>
              <input class="feedback" name="rate" value="3" type="checkbox"> Add other courses </label></li>
         <li class="checkbox">
            <label>
              <input class="feedback" name="rate" value="3" type="checkbox"> other (please specify) </label></li>
        <textarea id="add-more" class="input-field" name="textbox" type="text" placeholder="enter here..."></textarea>

       </ul>
      </div>
      <div>
        <label> What improvements do you think can be made to the course?</label>
        </br>
        <textarea id="feedback" class="input-field" name="textbox" type="text" placeholder="enter here..."></textarea>
     </div>

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

## style.css
body,html {
  font-family: Helvetica, Arial, sans-serif;
  background-color: white;
  position: relative;
  margin: 0;
  padding: 10px;
  text-align: center;
  font-size: 20px;
}

#survey-form{
  background-color: #FFFF70;
  margin: 0 auto;
  padding: 10px;
  border-radius: 5px;
  width:75%;
  max-width: 800px;

}
#add-more, #feedback{
  height:100px;
  width: 50%;
  resize:vertical;
}
div{
  padding: 10px;
  text-align: left;

}
.input-field, .dropdown, .email-field{
  font-size: 18px;
}

#submit{
  font-size: 25px;
  border-radius: 5px;
  background-color: #a7d8e9;
}
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

	<!--
	Survey form
	-->
	<!DOCTYPE html>
	<html>
	<head> </head>
	<body>
	<h1 id="title">Survey Form </h1>

	<form id="survey-form" method="GET">
	<p id="description"> Please provide your feedback for FCC's Responsive Web Design course</p>
	<div>
	<label id="name-label" for="name">Name: </label>
	<input id="name" class= "input-field" type="text" name="name" placeholder="Enter your name" required="">
	</div>

	<div>
	<label id="email-label" for="email">Email: </label>
	<input id="email" class="email-field" type="email" name="email" placeholder="Please enter your Email" required="">
	</div>

	<div>
	<label id="number-label" for="number">Contact: </label>
	<select id="dropdown" class="dropdown" name="country-codes">
	<option value="">Select</option>
	<option value="UK">UK(+44) </option>
	<option value= "IND">IND(+91)</option>
	<option value="USA"> USA(+1) </option>
	<option value="other"> Other </option>
	</select>
	<input id="number" class="input-field" name="phone" type="number" min="10" max="11" placeholder="Enter your contact number" required="">
	</div>

	<div>
	<label id="currentRole"> What describes your current role? </label>
	<ul style="list-style: none;">
	<li class="radio">
	<label>
	<input class="radio-buttons" name="describeRole" value="1" type="radio"> Student </label></li>

	<li class="radio">
	<label> <input class="radio-buttons" name="describeRole" value="2" type="radio"> Full-time employee </label></li>

	<li class="radio">
	<label> <input class="radio-buttons" name="describeRole" value="3" type="radio"> Part-time employee </label></li>

	<li class="radio">
	<label> <input class="radio-buttons" name="describeRole" value="4" type="radio"> Unemployeed </label></li>
	</ul>
	</div>

	<div>
	<label> Education Level: </label>
	<select id="dropdown" class="dropdown" name="education-level">
	<option value="">Select</option>
	<option value="Graduate">Graduate </option>
	<option value="HND/HNC">HND/HNC </option>
	<option value="A-Levels">A-Levels </option>
	<option value="GCSE">GCSE </option>
	</select>
	</div>

	<div>
	<label> How would you rate this course?</label>
	<ul style="list-style: none;">
	<li class="radio">
	<label>
	<input class="radio-buttons" name="rate" value="1" type="radio"> Poor </label></li>

	<li class="radio">
	<label>
	<input class="radio-buttons" name="rate" value="2" type="radio"> Average </label></li>

	<li class="radio">
	<label>
	<input class="radio-buttons" name="rate" value="3" type="radio"> Good </label></li> </ul>
	</div>
	<div>
	<label>Do you think there could be anymore additional material? (check what applies)</label>
	<ul style="list-style: none;">
	<li class="checkbox">
	<label>
	<input class="feedback" name="rate" value="1" type="checkbox"> Add videos </label></li>

	<li class="checkbox">
	<label>
	<input class="feedback" name="rate" value="2" type="checkbox"> Add more projects </label></li>

	<li class="checkbox">
	<label>
	<input class="feedback" name="rate" value="3" type="checkbox"> Add less projects </label></li>
	<li class="checkbox">
	<label>
	<input class="feedback" name="rate" value="3" type="checkbox"> Add other courses </label></li>
	<li class="checkbox">
	<label>
	<input class="feedback" name="rate" value="3" type="checkbox"> other (please specify) </label></li>
	<textarea id="add-more" class="input-field" name="textbox" type="text" placeholder="enter here..."></textarea>

	</ul>
	</div>
	<div>
	<label> What improvements do you think can be made to the course?</label>
	</br>
	<textarea id="feedback" class="input-field" name="textbox" type="text" placeholder="enter here..."></textarea>
	</div>

	<div>
	<button id="submit" type="submit"> Submit</button>
	</div>
	</form>
	</body>
	</html>
	body,html {
	font-family: Helvetica, Arial, sans-serif;
	background-color: white;
	position: relative;
	margin: 0;
	padding: 10px;
	text-align: center;
	font-size: 20px;
	}

	#survey-form{
	background-color: #FFFF70;
	margin: 0 auto;
	padding: 10px;
	border-radius: 5px;
	width:75%;
	max-width: 800px;

	}
	#add-more, #feedback{
	height:100px;
	width: 50%;
	resize:vertical;
	}
	div{
	padding: 10px;
	text-align: left;

	}
	.input-field, .dropdown, .email-field{
	font-size: 18px;
	}

	#submit{
	font-size: 25px;
	border-radius: 5px;
	background-color: #a7d8e9;
	}