Google Sheet Integration with Html Form Easily – Full Guide

Are you looking to collect data from your website’s visitors and store it in a Google Sheet with Timestamps? You’ve come to the right place! In this beginner-friendly guide, we’ll walk you through how to integrate an HTML form with Google Sheets, step by step. By the end of this post, you’ll have a fully functional form that can gather data from your website and automatically populate a Google Sheet with the information. This integration will not only help you organize your data but also allow you to analyze it and make informed decisions based on the insights gained. Let’s get started!

“Google Sheet Integration: How to Collect Data from Your Website Visitors and Store It in a Google Sheet with Timestamp”

6 Steps you need to follow to Google sheet integration with HTML form 

Step1 – “Create an Html Form”

Step2 – “Create a Google Form and link with google sheet”

Step3 – “Add Google form Action Link in HTML form”

Step4 – “Replace HTML form field name with Google form field name Respectively”

Step5 – “Add Redirection to Thankyou Page “

Step1 – Create an Html Form

In order to successfully Google Sheet Integration with Html Form, the initial step is to craft the form on your webpage. This is how one can create a standard HTML form.

• Open a text editor, such as Notepad or Sublime Text.
• Type the following HTML code to create a simple form with Three fields: name, email, and message.

<form action="" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

<label for="message">Message:</label>
  <input type="text" id="email" name="email"><br>

  <input type="submit" value="Submit">
</form>

• Save the file with a “.html” extension, for example, “form.html”

This code will generate a simple form with a submit button that requests the user’s name and email address. For the time being, the form tag’s action attribute is empty. We’ll return to this in step 4.

Once your HTML form has been created, you can customize it to match the design of your website and add any additional fields you require. The key is to ensure that each form field has a distinct name attribute, as we’ll need to match these fields with the corresponding fields in the Google Sheet in subsequent steps for Google Sheet integration.

Step2 – Create a Google Form and link with a google sheet

The second step in Google Sheet Integration with Html Form is to create a Google Form and Link it with Google Sheets. Here’s how you can do it.

• Enter https://docs.google.com/forms in your web browser to access Google Forms. If you aren’t signed in already, you might be asked to sign in to your Google account.
• To create a brand-new form, click the “+ Blank” button. This will launch the Google Forms editor and open a brand-new blank form.
• Click on the text that reads “Untitled form” at the top of the page to give your form a title. If you’d like, you can also include a description.
• Click the “+ Add question” button to add a new question to your form. There are many different question types available, including dropdown, multiple choice, and short answer.

• You can change the wording, include answer choices, and establish validation rules as necessary for each question.
• Click the “+ Add section” button to add more sections to your form.
• Click on the “Responses” tab at the top of the page to see the responses to your form. You can view the responses in more detail or export them to a Google Sheet in addition to seeing a summary of them here.
• Click the “Responses” tab, then select the “Link to sheet” icon to link your form to a Google Sheet where the form responses will be saved. The form responses will be saved in a new Google Sheet that will be created as a result.

If You’re unable to perform this Google Sheet integration, We offer an effortless solution to integrate Google Sheets with HTML forms through our advanced form automation service.

Step-3 Add Google form Action Link in HTML form

• In your HTML form code, add the “action” attribute to the <form> tag, and paste the Google form submission URL. You can find the URL by opening your Google Form and after filling in all fields and clicking the “Send” button in the top right corner, you got a popup in which you have to select the link icon and then copy the link under “Link”.

• Make sure the “method” attribute of your <form> tag is set to “POST”. This tells the browser to send the form data to the server using the HTTP POST method.

After adding the Google Form action link to your HTML form, make sure to add “/formResponse” to the end of the URL. This is the endpoint that tells Google Forms where to send the form data.

<form   
action="https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxxxxx/formResponse" method="post" >
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

<label for="message">Message:</label>
  <input type="text" id="email" name="email"><br>

  <input type="submit" value="Submit">
</form> 

That’s it! Your HTML form is now connected to your Google Form, and form submissions will be automatically added to the Google Sheet linked to the Google Form. You can test the form by filling it out and submitting it to make sure that the form data is being added to the Google Sheet correctly.

If You’re unable to perform this Google Sheet integration, We offer an effortless solution to integrate Google Sheets with HTML forms through our advanced form automation service.

Step5 – Redirect to the thank you page after the form submission

Step 4 in Google Sheet integration is to replace the HTML form field names with the names of the corresponding Google Form fields. This step is very important because it ensures that the form data is correctly inserted into the appropriate fields in the Google Sheets.

• Go to the Google Form You have created.
• Click on the 3 dots in the top right corner.
• Select Get Pre-filled Link.

• Now, fill the form and click on the get a link, you can see a popup in the bottom left corner, and click on copy link.

• Paste it on your text editor,
• The Link You have Copied Will look Like this 

https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxxxx/viewform?usp=pp_url&entry.1362436203=John Doe;&entry.1567386691=John@john.com;&entry.2027005047=Hi I am John Doe

Highlighted part is the fields name of the Google form

• Now Replace the HTML fields name with the Google form Fields Name, and at the end, your HTML form code should look like this

<form   
action="https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxxxxx/formResponse" method="post" >
  <label for="name">Name:</label>
  <input type="text" id="name" name="entry.1362436203 "><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="entry.1567386691"><br>

<label for="message">Message:</label>
  <input type="text" id="email" name="entry.2027005047"><br>

  <input type="submit" value="Submit">
</form> 

Hurray! Now Google Sheet integration is working properly, if anyone fills out Your form the data will be added to your google sheet. https://docs.google.com/spreadsheets

If You’re unable to perform this Google Sheet integration, We offer an effortless solution to integrate Google Sheets with HTML forms through our advanced form automation service.

Step5 – Redirect to the thank you page after the form submission

After the form is submitted successfully, you may want to redirect the visitor to a “Thank You” page. This page can thank them for their submission and provide additional information or offer a call to action. Ensure the page is designed to match the look and feel of your website and create a positive user experience.

This is how you can do it

• Add this Code Before or After your Form Code

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='add-your-thankyou-page-link';}"></iframe>

• Add Attributes to the <form> tag.

<form method="post" action="https://docs.google.com/forms/d/e/xxxxxxxxxxxxx/formResponse"  data-bs-toggle="validator" target="hidden_iframe" onsubmit="submitted=true; ">

Frequently Asked Questions