Skip to content

Instantly share code, notes, and snippets.

@dhatGuy

dhatGuy/index.html

Created August 11, 2019 14:43
Show Gist options
  • Save dhatGuy/f049a3d8b9dd072aed86db5421ca729d to your computer and use it in GitHub Desktop.
Save dhatGuy/f049a3d8b9dd072aed86db5421ca729d to your computer and use it in GitHub Desktop.
Download ZIP
Survey Form
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 id="title">Customer Satisfaction Survey</h1>
<h4 id="description">Fill up the form for us to know how satisfied you are with our services.</h4>
</header>
<section>
<form action="" method="GET" class="form" id="form">
<div class="leftSide">
<div class="labels">
<label for="name" id="name-label">*Name:</label>
</div>
<div class="rightSide">
<input type="text" name="name" id="name" placeholder="Enter your full name" required>
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="email" id="email-label">*Email:</label>
</div>
<div class="rightSide">
<div class="input">
<input type="email" name="email" id="email" placeholder="Enter your email" required>
</div>
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="days" id="number-label">*Days Spent:</label>
</div>
<div class="rightSide">
<input type="number" name="number" id="number" min="1" max="31" placeholder="How many days?">
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="status" id="status-label">What is your Employment Status?</label>
</div>
<div class="rightSide">
<select name="status" class="dropdown">
<option value="employee">Employee</option>
<option value="unemployed">UnEmployed</option>
<option value="employed">Employed</option>
<option value="selfemployed">Self-Employed</option>
<option value="student">Student</option>
</select>
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="character" class="character-label">Out of the following list of attributes, which do you
feel the customer service employee possessed? <br>
*(Please select all that apply)</label>
</div>
<div class="rightSide">
<div style="list-style: none" class="characterList">
<li>
<label>
<input type="checkbox" name="Patience" class="character">
Patience</label>
</li>
<li>
<label>
<input type="checkbox" name="Enthusiasm" class="character">
Enthusiasm</label>
</li>
<li>
<label>
<input type="checkbox" name="Knowledgeable" class="character">
Knowledgeable</label>
</li>
<li>
<label>
<input type="checkbox" name="Responsive" class="character">
Responsive</label>
</li>
<li>
<label>
<input type="checkbox" name="Friendliness" class="character">
Friendliness</label>
</li>
</div>
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="radio">Would you like to take this survey again in future?</label>
</div>
<div class="rightSide">
<div class="radioList" style="list-style: none">
<li>
<label><input type="radio" class="radio" name="radio" id="yes"> Yes</label>
</li>
<li>
<label><input type="radio" name="radio" class="radio" id="no"> No</label>
</li>
</div>
</div>
</div>
<div class="leftSide">
<div class="labels">
<label for="feedback">Do you have any additional comments or feedback for us?</label>
</div>
<div class="rightSide">
<textarea placeholder="Your feedback means so much to us." name="feedback" id="feedback" cols="39"
rows="5"></textarea>
</div>
</div>
<button type="submit">Submit</button>
</form>
</section>
<script src="new survey.js"></script>
</body>
</html>
Raw
style.css
body {
margin: 10px auto 20px auto;
height: 100%;
text-align: center;
background-color: oldlace;
}
header{
font-family: 'Raleway', sans-serif;
margin-bottom: 20px;
border: 1px solid black;
border-radius:10px;
width: 500px;
margin: 0 auto;
background-color: powderblue;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
.form {
width: 500px;
background-color: powderblue;
margin: 20px auto 30px auto;
border: 1px solid black;
border-radius: 10px;
padding: 15px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.leftSide {
display: flex;
width: 400px;
margin: 10px 20px;
}
.labels {
text-align: right;
margin: auto 29px auto 26px;
width: 100px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.rightSide {
width: 250px;
display: flex;
margin: auto 0;
}
.characterList {
text-align: left;
}
li {
padding: 10px 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
input[name='name'],
input[name='number'],
input[name="email"]{
font-size: 15px;
width: 200px;
padding: 5px;
}
/* input[name='email'] {
height: 30px;
font-size: 15px;
width: 250px;
padding-left: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
} */
select {
border-radius: 3px;
font-size: 15px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 200px;
height: 30px;
margin: auto 0;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
button[type='submit'] {
background-color: #5995DA;
color: #ffffff;
font-size: 14px;
font-weight: bold;
border: none;
padding: 10px 40px;
cursor: pointer;
}
button[type='submit']:hover {
background-color: #76aeed;
}
button[type='submit']:active {
background-color: #407fc7;
}
textarea {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
border: 1px solid #D6D9DC;
border-radius: 3px;
margin-bottom: 10px;
padding: 7px;
resize: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment