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”.

screen capture of selecting "Google Forms" from the dropdown menu


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.

screen capture of populating the form with a title and description


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.


Multiple Choice

screen capture of populating the form with a multiple choice question


Checkboxes

screen capture of populating the form with a checkbox question


Drop-down

screen capture of populating the form with a drop-down question


Short Answer

screen capture of populating the form with a short answer question


Paragraph

screen capture of populating the form with a paragraph question


Linear Scale

screen capture of populating the form with a linear scale question


Date

screen capture of populating the form with a date selection question


Time

screen capture of populating the form with a time selection question


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”.

screen capture of clicking on the create link and generating a spreadsheet

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 <p> element.

  <!-- 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 for and id attribute connecting them.


Multiple Choice
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>


Checkboxes
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>


Drop-down
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 <label> elements.

Create a <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>


Short Answer
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"/>


Paragraph
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 <textarea> element.

    <!-- MULTI-LINE TEXT FIELD -->
  <label for="explain">Explain why you want to improve your physical health.</label>
  <textarea name="" id="explain"/></textarea>


Linear Scale
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 name attribute!

    <!-- 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
Date and time pickers in an HTML form require a type attribute with a value of date and 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">


Submit Button
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.

screen capture of converting the Google Form into preview mode


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.

screen capture of inspecting the form to copy the action attribute of the form element

screen capture of pasting the action attribute into html code


Multiple Choice
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 entry.##########.

screen capture of inspecting the form to copy the name attribute of the multiple-choice form element

Copy and paste that name value into your own code - remembering that all inputs for radio buttons have the same name attribute.

screen capture of pasting the name attribute into html code


Checkboxes
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.

screen capture of inspecting the form to copy the name attribute of the checkbox form element

screen capture of pasting the name attribute into html code


Drop-down
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 listbox. The <input> value should be right after it. Copy and paste the name value into your code.

screen capture of inspecting the form to copy the name attribute of the drop-down form element

screen capture of pasting the name attribute into html code


Short Answer
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.

screen capture of inspecting the form to copy the name attribute of the short text form element

screen capture of pasting the name attribute into html code


Paragraph
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.

screen capture of inspecting the form to copy the name attribute of the multi-line text form element

screen capture of pasting the name attribute into html code


Linear Scale
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.

screen capture of inspecting the form to copy the name attribute of the range form element

screen capture of pasting the name attribute into html code


Date
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 _year, _month and _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.

screen capture of inspecting the form to copy the name attribute of the date form element

screen capture of pasting the name attribute into html code


Time
It’s a similar story with the time field. There are two <input>s, each with _hour and _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.

screen capture of inspecting the form to copy the name attribute of the date form element

screen capture of pasting the name attribute into html code


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.

screen capture of inspecting the form to copy the name attribute of the date form element

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: