You’ve built a static website, and now you want a way to collect data from your visitors. We’re not just talking about a basic contact form that sends the data in the body of an email. Instead, we want the ability to review the data from everyone in one central location: a spreadsheet.
This tutorial will take you through step-by-step instructions on how to code a custom HTML form for your website and record the data using Google Forms and Google Sheets.
By the end of the tutorial, you will have a fully functional form that records data into a Google Sheet that you can manage.
STEP 1: Create a Google Form
If you don’t have one already, sign up for a Google account and log in.
In the Google Drive screen, click on the blue “New” button and select “Google Forms”.
Populate your form with a title and description. Keep in mind that this title and description will be hard-coded on your site, so it doesn’t really matter what you title it on the Google Form itself.
STEP 2: Populate the Google Form
Now you’re ready to start populating your form with as many questions as you like. Nearly all the question formats provided by Google Forms can be replicated using just HTML, with a few exceptions: the “Multiple Choice Grid” and questions requiring an “Other” answer. Coding something similar to the “Multiple Choice Grid” / “Other” answers require some advanced hacking skills, so they have been omitted from this tutorial.
STEP 3: Create a Google Sheet
Once all your questions are populated, set up how you would like to receive responses. For this tutorial, you need to create a Google Sheet.
Scroll to the top of your Google Form and click on “RESPONSES”. Click on the green spreadsheet icon on the right hand side and click “CREATE”.
Your final form should look something like this.
STEP 4: Code your HTML form
Include the title of your form as an appropriate heading element, along with the description of your survey.
<!-- TITLE YOUR FORM --> <h1>Health Survey</h1> <h2>Diagnostic for applicants to our fitness program.</h2>
Next, start coding your form using the
<form> element, and include an empty “action” attribute in the opening tag (we’ll populate that later).
<!-- TITLE YOUR FORM --> <h1>Health Survey</h1> <h2>Diagnostic for applicants to our fitness program.</h2> <!-- START CODING YOUR FORM --> <form action=""> </form>
Include the text for each question using a
<!-- START CODING YOUR FORM --> <form action=""> <!-- MUTLIPLE CHOICE --> <p>How often do you exercise?</p> </form>
HTML forms are made of different widgets (or inputs) that are similar to the questions provided by Google Forms. These widgets require a
<label> element for each
<input> element, and a corresponding
id attribute connecting them.
For the first question in multiple choice format, use the
radio input type. For multiple choice questions, make sure that each input has the same name attribute so that the radio buttons are grouped together - preventing the user from clicking more than one in the group. We will eventually be replacing these
name attributes with values taken from the Google Form we created. For now, use a placeholder (“exercise” in the example) to remind you later that these inputs all need to have the same name.
<!-- MUTLIPLE CHOICE --> <p>How often do you exercise?</p> <input type="radio" name="exercise" id="e1" value="1 day a week"/> <label for="e1">1 day a week</label> <input type="radio" name="exercise" id="e2" value="2-3 days a week"/> <label for="e2">2-3 days a week</label> <input type="radio" name="exercise" id="e3" value="4-5 days a week"/> <label for="e3">4-5 days a week</label> <input type="radio" name="exercise" id="e4" value="6+ days a week"/> <label for="e4">6+ days a week</label>
Our next question requires the
checkbox input type. Similar to the radio buttons, checkbox inputs require the same name attribute so they are grouped together. Use another placeholder to remind you of this ("allergy" in the example).
<p>Do you have any food allergies?</p> <input type="checkbox" name="allergy" id="a1" value="Milk"/> <label for="a1">Milk</label> <input type="checkbox" name="allergy" id="a2" value="Eggs"/> <label for="a2">Eggs</label> <input type="checkbox" name="allergy" id="a3" value="Peanuts"> <label for="a3">Peanuts</label> <input type="checkbox" name="allergy" id="a4" value="Wheat"> <label for="a4">Wheat</label> <input type="checkbox" name="allergy" id="a5" value="Soy"> <label for="a5">Soy</label>
Dropdown menus in HTML are widgets called select boxes. A select box is created with a
<select> element with one or more
<option> elements as its children, each of which specifies one of its possible values. Option elements are unique compared to input elements in that they do not need corresponding
<select> element with an empty name attribute in the opening tag (to populate later). Optional: before adding your options inside the select element, add a default option that is disabled for the user, prompting them to choose from the menu.
<!-- DROPDOWN --> <p>What is your favourite food group?</p> <select name=""> <option selected disabled>Choose</option> <option value="Fruit">Fruit</option> <option value="Vegetables">Vegetables</option> <option value="Grain">Grain</option> <option value="Meat">Meat</option> <option value="Dairy">Dairy</option> </select>
The next question is perhaps the most commonly used input in HTML forms - a single line text field. For this one, you do not need an additional
<p> tag, as you can use the
<label> to ask the question. You will likely want to include your
<label> element first so it comes before the
<input> field, but this can always be adjusted later.
Include an empty name attribute on the
<input> element. It is also optional to include a placeholder attribute to prompt users to type in the field box - although it’s up for debate whether or not this is good practice for web accessibility.
<!-- SINGLE LINE TEXT FIELD --> <label for="comfort">What is your go-to comfort food?</label> <input name="" type="text" id="comfort"/>
Multi-line or paragraph text fields are similar to the single line text input, but use the
<textarea> element instead of
<input>. Be sure to include an empty name attribute on the
<!-- MULTI-LINE TEXT FIELD --> <label for="explain">Explain why you want to improve your physical health.</label> <textarea name="" id="explain"/></textarea>
To replicate the next question in HTML, an
<input> with the type attribute set to the value of
range must be used. This is sometimes referred to as a “slider”. Because, visually speaking, these are less accurate than text fields, sliders are used to pick a number whose exact value is not necessarily important.
To properly configure the slider, it's highly recommended that you set the min, max, and step attributes, and don’t forget to add the empty
<!-- LINEAR SCALE "SLIDER" --> <label for="explain">Rate your current physical health.</label> <input name="" type="range" min="1" max="5" step="1">
The default styles for an HTML slider are quite minimal. You will need CSS to add more context for the slider (e.g. adding “Very Healthy” and “Very Unhealthy” to the left and right of the slider).
Date and time pickers in an HTML form require a type attribute with a value of
time, respectively. And - of course - don’t forget to include the empty name attributes.
<!-- DATE INPUT --> <label for="explain">When are you available to start training?</label> <input name="" type="date"> <!-- TIME INPUT --> <label for="explain">What time of day is best to connect?</label> <input name="" type="time">
The last input field we need in our form is a button users click to submit the data. This
<input> element doesn’t require a
<label>, and takes the type attribute
submit and also a value of anything you want to appear as text on the button.
<!-- SUBMIT BUTTON --> <input class="button" type="submit" value="Submit">
STEP 5: Inspect the Google Form and populate the attributes in HTML
This is where the magic happens. If you aren’t as comfortable using the web inspector yet, this will certainly give you practice! For this tutorial, the Google Chrome DevTools are used.
Back in the edit screen of your Google Form, scroll to the top and click on the eyeball to view the form itself. We will be inspecting the preview screen.
Form Action Attribute
Right click the top of the form and select “inspect” from the drop-down menu to open the web inspector. You should see a
<form> element with an
action attribute with a value that starts with
“https://docs.google.com/...”. Double click on the value, copy and add it to your form’s empty action attribute.
Time to inspect the first question. If you right click over the first question and select “inspect” it will show you where in the HTML to start drilling down to find the info required for your custom form: the name attribute.
You will notice that all of the questions are included in a div with a
role attribute with a value of
listitem. Open up the first one by pressing the grey triangle to the left of the div.
Find the div that contains the radio buttons. Open that up. Inside that div, you should see an input element where the type attribute has a value of
hidden, and also a name attribute with a value of
Copy and paste that name value into your own code - remembering that all inputs for radio buttons have the same name attribute.
For the next question it is a similar process, but you have to go one level deeper to find the
<input> element. In the example, there are 5 checkbox options - and each have the same value in their name attribute. Copy and paste the name values into your own code.
For the drop-down question, only one name attribute is required on the
<select> element. When inspecting the Google Form, look for a div with a role attribute of
<input> value should be right after it. Copy and paste the name value into your code.
Although the single line text field is arguably one of the simpler form widgets, you have to drill down fairly deep in the code to find the input. Keep drilling down until you find it, copy and paste the name value into your code.
For the multi-line text field, you are looking for a
<textarea> element instead of an
<input>. Keep drilling down until you find it, copy and paste the name value into your code.
Getting repetitive yet? There’s less drilling down required for the linear range or “scale” question. Find the
<input> element, copy and paste the name value into your code.
Two more to go! For the date field, you will find that there isn’t just one
<input> generated, but three! Each input field has the same name attribute, but with
_day appended to them, respectively. Since we only have one input field in our custom code, we will be copying and pasting the name value and then remove the underscore and the word that follows it.
It’s a similar story with the time field. There are two
<input>s, each with
_minute appended to them. Copy and paste the name value into your own code, and then remove the underscore and the word that follows it.
Test it out
And with the last input field populated with the correct name attribute, your form is fully hooked up and ready to test out. Try answering the questions and submitting the form yourself, then check the spreadsheet where responses are recording. You should see all your answers in their corresponding columns.
STEP 6: Customize the Layout with CSS
Congratulations - the form is complete, and fully hooked up to record data in Google Sheets! But, it probably looks pretty boring. Now you have the chance to go in and add some styles with CSS.
Looking for some inspiration? Here is the final form with some styles applied: