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/1mrsgBk4IAdSs8Ask5H1z3bWYDlPTKplDIU_FzyktrGk/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 (f.ex. 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 => response.json() ).then((html) => { // you can put any JS code here alert('success') }); }); </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';

Have question?

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