How to submit data to Google Sheets using HTML form

Connecting to the Google API and sending some data to a spreadsheet is quite difficult and time consuming. You need to create an app, manage OAuth tokens, and do a few things between the site and the Google API. With a little help from SheetDB, you can do it in less than a few minutes!

In this article we're gonna use this spreadsheet: https://docs.google.com/spreadsheets/d/1YiMOrIFnMaksK032-zv6Sch2tTVTRhEpsFom_5qSLXM/edit

This is a simple HTML form. After submitting one row will be added to the spreadsheet. But remember to put case sensitive column names inside data object like so: data[column name]

<form
  method="post"
  action="https://sheetdb.io/api/v1/58f61be4dda40">
    ID: <input name="data[id]">
    Name: <input name="data[name]">
    Age: <input name="data[age]">
    <button type="submit">Submit</button>
</form>

And this simple HTML code works, without any JavaScript. But in response we get {"created":1}. This is information in json format that we have successfully added one line. For programming, this is perfectly fine, but the end user may be confused. To do this in a more friendly way, we can display a message or redirect the user (e.g. to a "thank you" page).

Alert / redirect or any JS code

We need to add some javascript code to make it work.

<form method="post" id="sheetdb-form"
  action="https://sheetdb.io/api/v1/58f61be4dda40">
    ID: <input name="data[id]">
    Name: <input name="data[name]">
    Age: <input name="data[age]">
    <button type="submit">Submit</button>
</form>

<script>
  var form = document.getElementById('sheetdb-form');
  form.addEventListener("submit", e => {
    e.preventDefault();
    fetch(form.action, {
        method : "POST",
        body: new FormData(document.getElementById("sheetdb-form")),
    }).then((response) => {
      if (!response.ok) {
        throw new Error("Request failed with status " + response.status);
      }
      return response.json();
    }).then((data) => {
      // you can put any JS code here
      alert('success')
    }).catch((error) => {
      alert('Something went wrong: ' + error.message)
    });
  });
</script>

You can replace alert() with any JavaScript code. For example if you want to redirect a user, just replace it with this code:

window.location.href = 'https://yourwebsite.com/thank-you';

Do something with the row after it is saved

A form that writes to a sheet is often the first step of a longer process: send a confirmation e-mail, notify a Slack channel, create an invoice. The same API works from automation tools, and the guide on automating Google Sheets with n8n or Make shows how to read the new rows and write results back. If the form lives inside an app built in Bubble or Adalo, those guides configure the same POST request in the tool's own connector instead of HTML.

Have question?

If you have any questions feel free to ask us via chat or .