Embedded Files
You go to: https://replit.com/~
Inside of body
type h1 then press Tab
type p then press Tab
type lorem20 then press Tab
type form then press Tab
type div then press Tab 3 times in new line
Then inside of div consist of:
type label then press Tab
type input then press Tab
div label &select
1:
div ul li
1:
div ul li
1:
div label text area
button
Copy and paste the following elements in the body html.
Head
CSS for global
* {
margin: 0;
border: 0;
}
html,
body {
color: #020202;
font-size: 19px;
font-weight: bold;
text-shadow: 0.5px 0.5px rgb(200, 245, 1);
background: linear-gradient(rgba(0, 0, 0, 0.1), #03f5fd), url("");
background-repeat: no-repeat;
background-size: cover;
}
ID title
<h1 id="title">Survey Form</h1>
CSS title
#title {
margin-top: 8px;
text-align: center;
font-size: 64px;
}
ID description
<p id="description">
Please fill this form with all the necessary fields marked with <sup>*</sup> <br />
to let us know the courses you are interested in.<sub> You may choose multiple courses.</sub>
</p>
CSS description
#description {
margin-top: 44px;
text-align: center;
font-size: 22px;
}
ID
form id="survey-form" name="submit-to-google-sheet"
#survey-form {
margin-left: 400px;
margin-top: 40px;
margin-bottom: 40px;
}
#survey-form div {
margin-top: 60px;
}
Div's inside of form
<div>
<label for="name" id="name-label">Name:</label><br />
<input class="input-elm" type="text" name="name" id="name" required="" placeholder="Your Full Name" />
</div>
<div>
<label for="email" id="email-label">Email:</label><br />
<input class="input-elm" type="email" name="email" id="email" required="" placeholder="Your Email ID" />
</div>
<div>
<label for="number" id="number-label">Age:</label><br />
<input class="input-elm" type="number" name="age" id="number" max="40" min="18" placeholder="Your Age" />
</div>
<div>
<label for="dropdown">Which one of these best describes your occupation?</label><br />
<select class="select-elm" name="occupation" id="dropdown">
<option value="full_time_job">Full-time Job</option>
<option value="part_time_job">Part-time Job</option>
<option value="freelancer">Freelancer</option>
<option value="teacher">Teacher</option>
<option value="student">Student</option>
<option value="no_say">Prefer not to say</option>
</select>
</div>
<div>
<div>How likely are you to enroll with us ?</div>
<ul>
<li class="list-items"><input class="input-elm input-radio" type="radio" name="likely" value="1" id="radio-1" /> <label for="radio-1">Extremely likely</label></li>
<li class="list-items"><input class="input-elm input-radio" type="radio" name="likely" value="2" id="radio-2" /> <label for="radio-2">Very likely</label></li>
<li class="list-items"><input class="input-elm input-radio" type="radio" name="likely" value="3" id="radio-3" /> <label for="radio-3">Likely</label></li>
<li class="list-items"><input class="input-elm input-radio" type="radio" name="likely" value="4" id="radio-4" /> <label for="radio-4">Unlikely</label></li>
</ul>
</div>
<div>
<div>What courses would you like to enroll in ?</div>
<ul>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="html5" id="checkbox-1" /> <label for="checkbox-1">Android App Developement</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="css3" id="checkbox-2" /> <label for="checkbox-2">Web Designing & Development</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="js" id="checkbox-3" /> <label for="checkbox-1">JavaScript</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="js" id="checkbox-3" /> <label for="checkbox-1">Advance Python</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="js" id="checkbox-3" /> <label for="checkbox-1">Machine Learning</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="js" id="checkbox-3" /> <label for="checkbox-1">Artificial Intelligence</label></li>
<li class="list-items"><input class="input-elm input-checkbox" type="checkbox" value="js" id="checkbox-3" /> <label for="checkbox-1">Data Visualization</label></li>
</ul>
</div>
<div>
<label for="more-specification">Any other specification you would like to mention :</label> <br />
<textarea class="textarea-elm" id="more-specification"></textarea>
</div>
CSS div inside of form
.list-items {
list-style: none;
}
.input-elm {
box-shadow: 0 10px 20px 3px #7fbf7f;
border-radius: 5px;
margin-top: 16px;
padding-left: 10px;
width: 50%;
height: 32px;
}
.input-radio,
.input-checkbox {
margin-top: 10px;
margin-bottom: 10px;
vertical-align: middle;
width: 32px;
height: 20px;
margin-left: -50px;
}
.select-elm {
box-shadow: 0 10px 20px 3px #7fbf7f;
border-radius: 5px;
margin-top: 16px;
padding-left: 10px;
width: 50%;
height: 32px;
}
.textarea-elm {
border: 2px dotted #ffffff;
border-radius: 5px;
margin-top: 16px;
padding-top: 10px;
height: 156px;
width: 50%;
}
Element of Button
<button class="button-elm" type="submit" id="submit">Submit Form</button>
CSS button
.button-elm {
margin-top: 25px;
width: 50%;
height: 50px;
border-radius: 5px;
background-color: white;
}
Send the Survey Form to Google spreadsheet
const scriptURL = 'SCRIPT URL'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
Page updated
Google Sites
Report abuse