Build form anywhere on web and store the data - not typical google forms
Hi folks, have you ever thought forms ? How do they work ? We can easily create an HTML form. But how do we store the data collected from the user ?
Yes Everyone know about google forms, it is simple and we can make a spreadsheet of data collected from users. Wait ....
But does google forms without custom styling is impressive ?
I don't think so, because Mailchimp, Moosend, SendInBlue, Hubspot and many other companies are there for forms and email campaigns. Let leave the Email campaigns but the form builder present in those websites are great with custom styles. But they are all premium and of course they only offer premium for Paid users. But Google offers this service as free. So definitely most of the newbies are the users of Google Forms.
But have u ever imagined we can use Google forms on our website or page with custom styling, css, what ever we want in our Fantasy form. Do you thinking of embedding the form in website? Simply No, because it won't look pretty.
But we can build our own form for our website and we can also store data on spreadsheets in real time.
Let see how we build that, I am in the process of creating video for this . Will update soon.
First of all let we design the HTML, CSS portion for the form.
For better instance we can start with a simple Survey form,
So what about the requirements in the form ,we need to plan that accordingly,
Name
Email Id
Age
Which option best describes your current role ?
Any comments or suggestions
So the above five fields are the data we are going to collect from the user. So why waiting lets dive in
You can code your form on your own or I'm helping you just copy the below code and paste it in a new notepad file. And save it with whatever name you like with .html extension. Refer the image for better clarification.
<html><head><style>body{ background-color:white; color:black;}.box{ max-width:550px; text-align:left; margin:100px auto 100px auto; background-color:#d7a6e3; padding:5px 10px 10px 20px; border-radius:20px; font-family:monospace; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}label { display: flex; align-items: center; font-size: 1.125rem; padding-bottom:10px; padding-top:10px;}.form1{ display:block; width:97%; height:30px; padding:10px; border-color:red; border-radius:5px; border-width:2px; }.submit-button{ border-radius:5px; background:#ff7400; color:white; margin:5px auto auto 5px; font-size:18px; }button:hover{ width:74px;}.input-textarea{ width:97%; border-radius:5px; border-color:red; border-width:2px; height:100px;}
p{ font-size:20px; color:purple;}h1{ color:black;}</style></head><body>
<div class="box"> <center> <h1 id="title">Life of Mechon - Survey Form</h1></center> <p id="description">A Mechanical Engineer's Expedition as Dev</p> <form id="survey-form" class="forms"> <div> <label id="name-label">Name</label> <input id="name" type="text" class="form1" placeholder="Enter your Name" required> </div> <div> <label id="email-label">Email</label> <input id="email" type="email" class="form1" placeholder="Enter your Email" required> </div> <div> <label id="number-label">Age (optional)</label> <input id="number" type="number" min="10" max="100" class="form1" placeholder="Age"> </div> <div> <p>Which option best describes your current role?</p> <select id="dropdown" name="role" class="form-control" required> <option disabled selected value>Select current role</option> <option value="student">Student</option> <option value="job">Full Time Job</option> <option value="learner">Full Time Learner</option> <option value="preferNo">Prefer not to say</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <p> What would you like to see improved? <span class="clue">(Check all that apply)</span> </p> <label ><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Machine Learning Tutorials</label > <label> <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Artificial Intelligence Tutorials</label > <label ><input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox" />Programming Tutorials</label > <label ><input name="prefer" value="challenges" type="checkbox" class="input-checkbox" />Designing tutorials</label > <label ><input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox" />Open Source Community</label > <label ><input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox" />Blog posts</label > </div> <div class="form-group"> <p>Would you recommend Life of mechon to a friend?</p> <label> <input name="user-recommend" value="definitely" type="radio" class="input-radio" checked />Definitely</label > <label> <input name="user-recommend" value="maybe" type="radio" class="input-radio" />Maybe</label > <label ><input name="user-recommend" value="not-sure" type="radio" class="input-radio" />Not sure</label > </div> <div class="form-group"> <p>Any comments or suggestions?</p> <textarea id="comments" class="input-textarea" name="comment" placeholder="Enter your comment here..." ></textarea> </div> <div class="form-group"> <button type="submit" id="submit" class="submit-button"> Submit </button> </form></div>
</body></html>Happy , Now the form is ready. You can customize the form as per your wish by changing colors, Title, Labels and CSS stylings. For example if you want to change a text, you just type in the text in the place of text already present there.
Now lets come in to the main objective of this post.
Integrating our form with Spreadsheet in real time.
There are many API providers for spreadsheet but they cost if basic limit is over. But in the below method we are not using any API but google will do that part in backend. we are going to use AJAX and some scripts. Don't bother if you don't know Ajax, I'll provide you the code. You can google and find more about AJAX.
Now its time for creating a new blank google form (Hey I Said Blank form), you just add all the field names into a new blank form. The field name is not expected to be same in google form. But name it related to the fields what we have typed in our custom HTML form.
I would say you to select short answer for all the fields. I know the last field comments is for large answer. So you can select paragraph for that alone.
Now after you creating all the fields, click on responses tab and click on the spreadsheet icon which is green in color.
Now click on create button.
Clap yourself, we are only short of two more steps.
Click on preview button and you find the page below will be opened in new tab.
Copy the link before viewform and save it some where, we will use it later.
By now we are set to go with the below code. I have added the ajax jQuery scripts inside the code. Sorry to say again buddy, just copy the below code and replace with the existing one in the .html file you've created. Please make the changes according to your expectations.
<!DOCTYPE html><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
background-color:white;
background-image: linear-gradient(to top,#0D0557 0%,#1D6D98 50%,#2CD4D9 100%)!important;
color:black;
}
.box{
max-width:550px;
text-align:left;
margin:100px auto 100px auto;
background-color:#d7a6e3;
padding:5px 10px 10px 20px;
border-radius:20px;
font-family:monospace;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
label {
display: flex;
align-items: center;
font-size: 1.125rem;
padding-bottom:10px;
padding-top:10px;
}
#description{
text-align:center;
}
.form1{
display:block;
width:97%;
height:30px;
padding:10px;
border-color:red;
border-radius:5px;
border-width:2px;
}
.submit-button{
border-radius:5px;
background:#ff7400;
color:white;
margin:5px auto auto 5px;
font-size:18px;
}
button:hover{
width:74px;
}
.input-textarea{
width:97%;
border-radius:5px;
border-color:red;
border-width:2px;
height:100px;
}
p{
font-size:20px;
color:purple;
}
h1{
color:black;
}
</style>
</head>
<body>
<div class="box">
<center> <h1 id="title">Life of Mechon - Survey Form</h1></center>
<p id="description">A Mechanical Engineer's Expedition as Dev</p>
<form id="survey-form" class="forms" target="_self" onsubmit="return postToGoogle();" action="" autocomplete="off">
<div>
<label id="name-label">Name</label>
<input id="name" name="entry.1270826968" type="text" class="form1" placeholder="Enter your Name" required>
</div>
<div>
<label id="email-label">Email</label>
<input id="email" name="entry.625500868" type="email" class="form1" placeholder="Enter your Email" required>
</div>
<div>
<label id="number-label">Age (optional)</label>
<input id="number" name="entry.930168623" type="number" min="10" max="100" class="form1" placeholder="Age">
</div>
<div>
<p>Which option best describes your current role?</p>
<select id="dropdown" name="entry.793528704" class="form-control" required>
<option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<p>Any comments or suggestions?</p>
<textarea
id="comments"
class="input-textarea"
name="entry.2147397399"
placeholder="Enter your comment here..."
></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</form>
</div>
<script>
function postToGoogle() {
var field1 = $("#name").val();
var field2 = $("#email").val();
var field3 = $("#number").val();
var field4 = $("#dropdown option:selected").text();
var field5 = $("#comments").val();
if(field1 == ""){
alert('Please Fill Your Name');
document.getElementById("#name").focus();
return false;
}
if(field2 == ""){
alert('Please Fill Your Email');
document.getElementById("#email").focus();
return false;
}
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfXqhxAYnT4x3JqDpJr4qd1Bo969MVtJ_Nn9baE0owHrntK6g/formResponse?",
data: {"entry.1270826968": field1, "entry.625500868": field2, "entry.930168623": field3, "entry.793528704": field4, "entry.1331549007": field5},
type: "POST",
dataType: "xml",
success: function(d)
{
},
error: function(x, y, z)
{
alert('Your message is sent to the form');
$('#survey-form').hide();
}
});
return false;
}
</script>
</body>
</html>
Okay now we've created a form with Google sheets Integration. But we missed something here. This form saves data to my Google sheet. I know you have created a google sheet at previous steps. But we have to change the key values. You could find that in code like this , it would start with "entry.9072992...." so we need to find those values and replace them with the values in the code.
Before that change the URL in the code, and paste the url you copied and paste it before /formResponse? . You can refer the code with the url you copied.
How to find the Entry values ?
Select options and click on get-prefilled link under the menu. Now you will get a form. So now just open inspect tool on chrome browser and select the field, you could find the entry values.
Click on the text field and right click and select inspect.
Can you able to see the name="entry.127082698" likewise you'll find another value which is unique for each spreadsheet. Change this value with all the fields in the code. Each field has unique entry value. So change accordingly.
That's it just replace them with existing values.
Try filling the form for once and you can view the data values in spreadsheet once you filled the form.
Hey have you done this, how is the article, type your comments by clicking show responses tab below the post. I'll guide you if you missed anything. Cool !!!
Habitate