Skip to content

Instantly share code, notes, and snippets.

@Achigyus

Achigyus/index.html

Created January 21, 2021 21:13
Show Gist options
  • Save Achigyus/a54a5c6e103bfbdc78e9581da371afdc to your computer and use it in GitHub Desktop.
Save Achigyus/a54a5c6e103bfbdc78e9581da371afdc 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">
<title>first page</title>
<link rel="stylesheet" href="./styles/index.processed.css">
</head>
<body>
<header>
<h1 id="title">Organics or Not?</h1>
<p class="description">Thank you for taking out time to fill this survey form!
</p>
</header>
<form id="survey-form" action="nowhere">
<!-- Name Input field -->
<div class="form-element">
<div class="label">
<label id="name-label" for="name">Name</label>
</div>
<div class="input">
<input type="text" placeholder="Enter your full name" id="name" required>
</div>
</div>
<!-- Email Input field -->
<div class="form-element">
<div class="label">
<label id="email-label" for="name">Email</label>
</div>
<div class="input">
<input type="email" placeholder="Enter your email" id="name" required>
</div>
</div>
<!-- Age Input field -->
<div class="form-element">
<div class="label">
<label id="age-label" for="name">Age</label>
</div>
<div class="input">
<select id=dropdown required>
<option disabled selected value>Select an option</option>
<option>Less than 18</option>
<option>18-25</option>
<option>25-45</option>
<option>45-60</option>
<option>60 and above</option>
</select>
</div>
</div>
<!-- Marital Staus Input field -->
<div class="form-element">
<div class="label">
<label id="marital status-label" for="name">Marital Staus (Optional)</label>
</div>
<div class="input">
<select id=dropdown required>
<option disabled selected value>Select an option</option>
<option>Single</option>
<option>Married</option>
<option>Prefer not to say</option>
</select>
</div>
</div>
<!-- Radio -->
<div class="form-element">
<div class="label">
<label>Have you heard of Organics Skin Care and Hair Care Products</label>
</div>
<div class="input-radio1">
<div>
<input type="radio" name="user-knowledge" value=1>Yes
</div>
<div>
<input type="radio" name="user-knowledge" value=2>No
</div>
<p>(If No,click <a href="https://www.dayasorganics.com"">here</a> to find out more on Organics)</p>
</div>
</div>
<div class="form-element">
<div class="label">
<label for="user-usge">Do you use Organics Skin Care and Hair Care Products</label>
</div>
<div class="input-radio2">
<div>
<input name="user-usage" value="yes" type="radio"/>Yes
</div>
<div>
<input name="user-usage" value="no" type="radio"/>No
</div>
<div>
<input name="user-usage" value="not often" type="radio"/>Not Often
</div>
</div>
</div>
<div class="form-element">
<div class="label">
<label for="checkbox">From the options listed below, select the ones you prefer</label>
</div>
<div class="input">
<input type="checkbox" name="prefer" id="organicProducts"> Organic Products<br>
<input type="checkbox" name="prefer" id="non-organicProducts"> Non-Organic Products<br>
<input type="checkbox" name="prefer" id="organicRawMaterials"> Organic Raw Materials<br>
<input type="checkbox" name="prefer" id="refinedProducts"> Refined Products<br>
<input type="checkbox" name="prefer" id="organicButters"> Organic Butters<br>
<input type="checkbox" name="prefer" id="organicPowders"> Organic Powders<br>
<input type="checkbox" name="prefer" id="essentialOils"> Essential Oils<br>
<input type="checkbox" name="prefer" id="carrierOils"> Carrier Oils<br>
<input type="checkbox" name="prefer" id="home-madeScrubs"> Home-Made Scrubs<br>
<input type="checkbox" name="prefer" id="already-madeScrubs"> Already-Made Scrubs<br>
<input type="checkbox" name="prefer" id="chemicalScrubs"> Chemical Scrubs<br>
<input type="checkbox" name="prefer" id="sugarScrubs"> Sugar Scrubs
</div>
</div>
<div class="form-element">
<div class="label">
<label>Would you refer Organics Skin Care and Hair Care Products to a friend?</label>
</div>
<div class="input">
<div class="yes">
<input name="user-refer" value="yes" type="radio" id="radio1"/>Yes <br>
<input name="user-refer" value="no" type="radio" id="radio2"/>No
</div>
<div class="hidden">
<p id="yes">If Yes, Why?</p>
<textarea name="reasons" id="reasons" cols="30" rows="10" placeholder="Enter your reasons here"></textarea>
</div>
<div class="hidden">
<p id="no">If No, Why?</p>
<textarea name="reasons" id="reasons" placeholder="Enter your reasons here" cols="30" rows="10"></textarea>
</div>
</div>
</div>
<div class="form-element">
<div class="label">
<label>Any Comments or suggestions?</label>
</div>
<div class="input">
<textarea name="comments" id="comments" placeholder="Enter your comments here" cols="30" rows="10"></textarea>
</div>
</div>
<div class="form-element">
<button type="submit" id="submit">Submit</button>
</div>
<footer>
Copyright by Daya's Organics, 2021
</footer>
</form>
</body>
</html>
Raw
script.js
// create variables and cache them
var referYes = document.getElementById('radio1');
var referNo = document.getElementById('radio2');
var yes = document.getElementById('yes');
var yesParent = yes.parentNode;
var no = document.getElementById('no');
var noParent = no.parentNode;
// set event listener on radio buttons
referYes.onchange = changeClass;
referNo.onchange = changeClass;
// function to remove class and show conditional part of form
function changeClass() {
yesParent.className = 'hidden'; //resets classname to hidden
noParent.className = 'hidden' //resets classname to hidden
var value = this.value;
if(value == 'yes'){
yesParent.toggleAttribute('class');
} else if(value == 'no'){
noParent.removeAttribute('class');
}
}
Raw
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
background: #f5f5f5;
font-size: 20px;
}
h1{
text-align: center;
}
.description{
width: 90%;
text-align: center;
background-color: #ffff58;
margin: auto;
padding: 1.5%;
line-height: 1cm;
}
form{
width: 90%;
margin: auto;
margin-bottom: 60px;
background-color: #ddf49c;
padding: 2% 4%;
}
label{
display: block;
font-size: 20px;
margin: 5px 0;
}
input[type="text"], input[type="email"], select, textarea{
display: block;
width: 100%;
margin: auto;
padding: 10px 20px;
font-size: 20px;
margin-bottom: 5px;
}
textarea{
resize: none;
}
input[type="radio"],
input[type="checkbox"]{
margin-right: 5px;
}
.input-radio1,
.input-radio2{
display: flex;
flex-direction: column;
}
.form-element{
margin: 10px 0;
}
.yes,
.no{
margin: 5px;
}
.hidden{
display: none;
}
.form-element button{
display: block;
width: 50%;
margin: auto;
margin-top: 15px;
background-color: #ffff58;
border: none;
border-radius: 6px;
cursor: pointer;
padding: 10px 20px;
}
.form-element button:hover{
background-color: #fcfc17;
}
footer{
text-align: center;
padding: 5px;
font-size: 12px;
}
@media screen and (min-width:700px){
.form-element{
display: flex;
margin-bottom: 10px;
}
.label{
width: 40%;
text-align: right;
}
.input,
.input-radio1,
.input-radio2{
width: 50%;
margin-left: 10px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment