gitmyhub

form-to-google-sheets

JavaScript ★ 4.7k updated 5mo ago

Store HTML form submissions in Google Sheets.

A guide and code snippet for saving HTML form submissions directly into a Google Sheet using a small Google Apps Script, with no backend server or database needed.

JavaScriptGoogle Apps ScriptHTMLsetup: moderatecomplexity 2/5

This project is a guide and code snippet for collecting HTML form submissions directly into a Google Sheet, without needing a backend server. When someone fills out and submits a form on your website, the data lands in a spreadsheet you control, visible in rows and columns like any other Google Sheet entry.

The setup involves three moving parts: a Google Sheet to receive data, a small script that runs inside Google (called a Google Apps Script), and a few lines of JavaScript added to your existing HTML page. The script acts as a middleman: it lives on Google's servers and listens for form submissions, then writes each one into a new row of your spreadsheet. You deploy it as a web app and connect your form to its URL.

Each submission automatically records a unique ID, a timestamp, and any form fields you've named to match column headers in the sheet. To add more fields like a phone number or message, you create the matching column in the sheet and add the input to your HTML form. The column name must match the form input's name attribute exactly.

The README also covers some security basics: a honeypot field to catch bots, input sanitization in the server-side script to block formula injection attacks, and optional email notifications whenever a new submission arrives. There is no database to maintain, no server to host, and no login system to build, which makes this approach attractive for simple contact forms, newsletter signups, or survey responses.

The project uses plain JavaScript fetch to send the form data and a Google Apps Script to receive it. It works with any HTML form and requires only a Google account to set up.

Where it fits