<div class="container">
<header>
<h1 id="title">Poll-in Survey Form</h1>
</header>
<main>
<p id="description">
Let us know how can we improve Poll-in
</p>
<form id="survey-form" method="post" action="https://poll-in.herokuapp.com/survey" onsubmit="return surveyed(event)">
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="name" id="name-label">* Name: </label>
<input type="text" id="name" name="name" placeholder="Enter your name" required/>
</div>
<div>
<label for="email" id="email-label">* Email: </label>
<input type="email" id="email" name="email" placeholder="Enter your email-id" required/><br/>
</div>
<div>
<label for="number" id="number-label">* Age: </label>
<input type="number" id="number" name="age" placeholder="Enter your Age" min="10" max="150" required/>
<br/>**Only ten years or older are allowed
</div>
</fieldset>
<fieldset>
<legend>Survey</legend>
<div class="question">
<div><label for="dropdown">How did you find out about Poll-in: </label></div>
<select id="dropdown" name="source" >
<option value="social-media" selected>Social Media</option>
<option value="friend" name="source">Heard from a friend</option>
<option value="github" name="source">Github Project</option>
</select>
</div>
<div class="question" id="recommendation-label">
<div>How likely is that you would recommend Poll-in to a friend?</div>
<div class="radios" role="group" aria-labelledby="recommendation-label">
<label for="definitely"><input type="radio" name="recommend" id="definitely" value="Definitely" checked/>Of course</label>
<label for="maybe"><input type="radio" name="recommend" id="maybe" value="Maybe"/>Maybe</label>
<label for="notsure"><input type="radio" name="recommend" id="notsure" value="Not Sure"/>Not Sure</label>
</div>
</div>
<div class="question">
<div id="features-label">Features that should be improved/added in the future (Check all that apply):</div>
<div class="radios" role="group" aria-labelledby="features-label">
<label for="result-imp"><input type="checkbox" name="improvement" id="result-imp" value="Result Display"/>Result Display</label>
<label for="post-imp"><input type="checkbox" name="improvement" id="post-imp" value="Posting Polls"/>Posting Polls</label>
<label for="comment-add"><input type="checkbox" name="improvement" id="comment-add" value="Add Comments"/>Add Comments</label>
<label for="share-imp"><input type="checkbox" name="improvement" id="share-imp" value="Improved Share UI"/>Improved Share UI</label>
<label for="total-votes-add"><input type="checkbox" name="improvement" id="total-votes-add" value="Show total votes"/>Show total votes</label>
<label for="follow-add"><input type="checkbox" name="improvement" id="follow-add" value="Following users"/>Following users</label>
<label for="votedBy-add"><input type="checkbox" name="improvement" id="votedBy-add" value="Voted By"/>Voted By</label>
</div>
</div>
<div class="question">
<div><label for="suggestions">Any Comments, Suggestions or General Feedback?</label></div>
<textarea name="suggestions" id="suggestions" cols="30" rows="5" placeholder="Enter Your Feedback.." style="width:60%;"></textarea>
</div>
</fieldset>
<center><button type="submit" class="btn btn-big-green" id="submit">Submit</button></center>
</form>
</main>
<footer>© 2018 <a href="https://poll-in.herokuapp.com" target="_blank">Poll-in</a></footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
body{
background:#545;
color:hsl(60,90%,60%);
}
header{
background:linear-gradient(75deg,#722,#422);
width:98vw;
display:block;
text-align:center;
position:relative;
margin-top:-10px;
border-bottom:2px solid lime;
font-family:Oswald;
}
main{
width:80vw;
margin-top:30px;
padding:20px 40px;
display:flex;
flex-direction:column;
border:3px solid #ccb;
box-shadow:0px 2px 8px -1px #bbc;
border-radius:20px;
background:hsl(200,100%,90%);
color:#433;
align-items:center;
margin-bottom:80px;
}
#description{
color:#431;
font-family:Pacifico;
font-size:1.7em;
}
fieldset{
display:flex;
flex-direction:column;
font-size:19px;
line-height:1.5em;
background:#eef;
border-radius:10px;
margin-top:15px;
box-shadow:0px 0px 10px -2px #112;
border:none;
flex-wrap:wrap;
}
fieldset div{
margin:10px 20px;
}
fieldset legend{
background:#224;
padding:0px 20px;
border:2px solid #221;
border-radius:10px;
color:lime;
font-weight:bold;
}
input,textarea{
padding:5px 10px;
border:none;
border-bottom:2px solid grey;
border-radius:5px;
margin-left:5px;
font-size:18px;
min-width:200px;
}
input:valid{
border-bottom:3px solid green;
background-color:#efe;
}
input:focus,textarea:focus{
box-shadow:0px 2px 3px 0px #000;
}
input[type="radio"],input[type="checkbox"]{
min-width:10px;
padding:none;
margin:none;
border:none;
}
#dropdown{
font-size:18px;
padding:2px 10px;
border-radius:10px;
box-shadow:0px 2px 10px -2px #334;
margin-left:5px;
width:45%;
}
.question{
display:flex;
flex-direction:row;
align-items:flex-start;
justify-content:flex-start;
margin-left:0px;
background:#ddd;
border-radius:10px;
padding:5px 5px 5px 0px;
}
.radios{
display:flex;
flex-direction:column;
width:55%;
}
.btn{
padding:8px 30px;
border-radius:10px;
box-shadow:0px 0px 12px -1px #191;
border:none;
display:block;
margin-top:10px;
border:1px solid #dfd;
}
.btn-big-green{
color:#dfd;
background:linear-gradient(45deg,#171,#5a5);
font-size:25px;
}
@keyframes btn-glow{
to{
background:#dfd;
color:#191;
border:1px solid #191;
}
}
.btn-big-green:hover{
animation:btn-glow 0.5s ease-out;
animation-fill-mode:forwards;
}
footer{
background:#221;
color:#eef;
padding:5px;
width:98vw;
border-top:2px solid lime;
font-family:Pacifico;
font-size:25px;
text-align:center;
vertical-align:center;
position:fixed;
bottom:0px;
}
footer a{
color:#eef;
text-decoration:none;
}
#fcc_foldout_toggler_background{
background:#fcc;
}
@keyframes submitted{
70%{
height:100px;
opacity:0;
overflow:hidden;
}
90%{
opacity:0;
}
100%{
height:100px;
opacity:1;
overflow:hidden;
}
}
.main-submitted{
animation:submitted 1s ease-in-out forwards;
transform-origin:50% 0%;
}
.container{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding:0px 0px 20px 0px;
}
@media(max-width:450px){
fieldset,input,#dropdown{
font-size:14px;
}
fieldset{
width:100vw;
}
}
document.querySelector("#fcc_foldout_toggler_background").style.background="#fcc";
function surveyed(e){
console.log("submitting...");
document.querySelector("main").classList.add("main-submitted");
let improvement=[];
document.querySelectorAll("input[type='checkbox']:checked").forEach((elem)=>{
improvement.push(elem.value);
});
let data={
name:document.querySelector("#name").value,
email:document.querySelector("#email").value,
age:document.querySelector("#number").value,
source:document.querySelector("#dropdown").value,
recommend:document.querySelector("input[type='radio']:checked").value,
improvement:improvement,
suggestions:document.querySelector("#suggestions").value
};
document.querySelector("main").innerHTML="
Submitting....
";
console.log(data);
$ajax("POST","https://poll-in.herokuapp.com/survey",data,(response)=>{
document.querySelector("main").innerHTML=""+response+"
";
},()=>{
document.querySelector("main").innerHTML="Error
";
})
return false;
}
function $ajax(method,url,data,callback1,callback2){
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback1(this.responseText);
}
else if(this.readyState==4&&this.status!=200){
callback2();
}
};
xhttp.open(method, url, true);
if(method.toUpperCase()=="POST"){
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
let dataToSend="";
for (var key in data) {
if (data.hasOwnProperty(key)) {
dataToSend+=key+"="+data[key]+"&";
}
}
dataToSend=dataToSend.substr(0,dataToSend.length-1);
console.log(dataToSend);
xhttp.send(dataToSend);
}
else if(method.toUpperCase()=="GET"){
xhttp.send();
}
}