How to Create Custom HTML Forms and Submit Responses to Google Sheet…
Google form is an excellent service for creating forms and surveys. Also, provides an easy way to store and handle data directly in google sheets without much trouble with server-side programming. Most importantly everything is for FREE! But what if you don’t want your form to look like a google form? Or want to design it in a more classy way?? How about designing your own custom HTML form and link it to the google sheet? 😌 😌
Well there are some other ways listed on the internet but I did not find any of them useful for the following reasons:
- Too messy and difficult to implement
- None of them really worked for me 😩 😩
Let's begin the tutorial on how to do this in two simple steps…
Step 1: Design a custom HTML form layout as per your need…
Follow the following five simple steps to create your HTML form layout which will be ready to send its data to google sheet:
- Add this line
<base target="_top">inside your<head>...</head>tag. This is necessary for the Google App script to work which we will use for linking HTML forms to Google Sheets. - Add your form layout (codes) inside a div tag with id “form”, eg:
<div id="form">...your code...</div> - To each
<input>tag, add a “form-data” class, eg:<input class="form-data" type="text"> - Call the
send_data()function, when the submit button is clicked, eg:<button type="button" onlick="send_data()">Submit</button> - Add the below javascript code just above
</body>tag to let your form submit the data to google app script.
An example of the HTML form is shown here, which collects the name, email, age, company, and contact number for different users.
Sample form:
Step 2: Prepare the google sheet to receive data from your form…
This involves some simple mouse clicks and copy-paste material. I have simply created a youtube video so that you can follow up on the steps.
- Use your HTML code written in step 1 for the
index.htmlfile. - Use the below code for
Code.gs
Congratulations!! you successfully created your own HTML form which can send its data to google sheet…
