A Pen by Grace Hanssen on CodePen.
Created
September 6, 2018 08:43
-
-
Save GraceHanssen/4abfb15bffa32c08a5de0eefae222c41 to your computer and use it in GitHub Desktop.
Responsive Web Design Project: A Survey Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!-- Font Awesome Icon Library --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<h1 id="title">A Survey Form</h1> | |
<p id="description">Track Customer's Feedback and Satisfaction Level</p> | |
<section> | |
<form id="survey-form"> | |
<fieldset> | |
<h4>Instructions: Take a few moments to fill up this short survey and click submit.</h4> | |
<div class="labels"> | |
<label id="name-label" for="name">* Name: </label><div> | |
<input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required><br> | |
<div class="labels"> | |
<label id="email-label" for="email">* Email: </label></div> | |
<input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email"><br> | |
<div class="labels"> | |
<label id="number-label" for="age">* Age: </label></div> | |
<input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age"> | |
</input> | |
<h4>1. How did you find my website?</h4> | |
<input id="facebook" type="checkbox" name="" value="facebook"> | |
<label for="facebook">Facebook</label><br> | |
<input id="twitter" type="checkbox" name="" value="twitter"> | |
<label for="twitter">Twitter</label><br> | |
<input id="google" type="checkbox" name="" value="google"> | |
<label for="google">Google</label><br> | |
<input id="freecodecamp" type="checkbox" name="" value="freecodecamp"> | |
<label for="freecodecamp">freeCodeCamp</label> | |
<div id="dropdown"> | |
<h4>2. What level of education do you have?</h4> | |
<select name="level"> | |
<option value="elementary">Elementary</option> | |
<option value="highschool">Highschool</option> | |
<option value="college">College</option> | |
<option value="graduate">Graduate</option> | |
</select></div> | |
<br> | |
<h4>3. Do you like it?</h4> | |
<input type="radio" id="likeChoice1" name="like" value="absolutely yes"> | |
<label for="Absolutely Yes">Absolutely Yes</label><br> | |
<input type="radio" id="definitely no" name="likeChoice2" value="definitely no"> | |
<label for="definitely no">Definitely No</label><br> | |
<input type="radio" id="hmm maybe" name="likeChoice3" value="hmm maybe"> | |
<label for="hmm maybe">Hmm Maybe</label> | |
<div> | |
<h4>4. Any advice so that I can improve my website?</h4> | |
<textarea rows="5" cols="70">Enter your message here...</textarea id="input-field"></div> | |
<div> | |
<h4>5. How would you rate?</h4> | |
<span class="heading"></span> | |
<input id="yes" type="radio" name="yes" value=""> | |
<span class="fa fa-star checked"></span> | |
<label for="yes">1 Star</label><br> | |
<input id="yes" type="radio" name="yes" value=""> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<label for="yes">2 Stars</label><br> | |
<input id="yes" type="radio" name="yes" value=""> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<label for="yes">3 Stars</label><br> | |
<input id="yes" type="radio" name="yes" value=""> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<label for="yes">4 Stars</label><br> | |
<input id="yes" type="radio" name="yes" value=""> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<span class="fa fa-star checked"></span> | |
<label for="yes">5 Stars</label><br><br></div> | |
<button id="submit">Submit Now</button><br><br> | |
</fieldset> | |
</form> | |
</section> | |
<p>Thank you for your time!</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #CCFCFF; | |
font-family: monospaced; | |
margin-top: 50px; | |
margin-bottom: 90px; | |
padding-left: 30px; | |
padding-right: 40px; | |
} | |
h1 { | |
text-align: center; | |
color: blue; | |
} | |
p { | |
text-align: center; | |
font-weight: bold; | |
} | |
h4 { | |
font-weight: bold; | |
font-style: italic; | |
} | |
.checked { | |
color: orange; | |
} | |
#submit { | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment