How to Connect an HTML Form to Google Sheets

Google Sheets is one of the most underrated databases for small projects. It's collaborative, accessible from anywhere, integrates with a huge number of tools, and requires no setup. The only problem: getting data into it from a web form used to require a backend.

This guide walks through the full process of connecting an HTML form to Google Sheets using Info2Sheets.

What you'll need

• A Google account with Sheets access
• An Info2Sheets account (free trial available)
• An HTML form (any framework, any site)

Step 1: Create a Google Sheet

Create a new spreadsheet in Google Drive. You don't need to set up any columns ahead of time—Info2Sheets reads your form field names and creates headers automatically on the first submission.

Make a note of the Sheet ID. It's the long string in the URL:

https://docs.google.com/spreadsheets/d/SHEET_ID_IS_HERE/edit

Step 2: Share the sheet with Info2Sheets

Go to the share settings on your spreadsheet and add this email address as an Editor:

forms-editor@info2sheets.iam.gserviceaccount.com

This is a Google service account that Info2Sheets uses to write data on your behalf. It only has access to sheets you explicitly share with it.

Step 3: Create a form in the dashboard

Log into your Info2Sheets dashboard, click New Form, and fill in:

• A name for the form (just for your reference)
• The Google Sheet ID from Step 1
• Optionally, the domains you want to allow submissions from

After saving, you'll see a Form ID. This is your unique endpoint identifier.

Step 4: Update your HTML form

Change your form's action attribute to the Info2Sheets submission URL:

<form
  action="https://api.info2sheets.com/api/submission/YOUR_FORM_ID"
  method="POST"
>
  <label>Name <input type="text" name="name" /></label>
  <label>Email <input type="email" name="email" /></label>
  <label>Message <textarea name="message"></textarea></label>
  <button type="submit">Send</button>
</form>

Replace YOUR_FORM_ID with the ID from your dashboard.

Step 5: Test it

Submit the form and check your Google Sheet. Within a few seconds you should see a new row with the submitted values. The column headers are created from your field names the first time data is received.

Customizing the redirect

By default, Info2Sheets redirects to the referring page after a successful submission. To send users somewhere specific, add a hidden field:

<input type="hidden" name="_next" value="https://yoursite.com/thank-you" />

Handling the response with JavaScript

If you'd rather handle the response without a redirect, submit the form with fetch and show a custom message:

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const res = await fetch(form.action, {
    method: 'POST',
    body: data,
  });

  if (res.ok) {
    document.querySelector('.success-message').style.display = 'block';
    form.reset();
  }
});

Where to go from here

Once submissions are in your spreadsheet, you can connect it to:

• Google Apps Script for email notifications or custom logic
• Zapier or Make to trigger workflows in other tools
• Google Data Studio for visualization
• Any API that can read from Google Sheets

---

Get started with Info2Sheets and have your form submitting to Google Sheets today.