Storing form data from a website in Google Spreadsheets using javascript / React

Mike Heavers
Jul 2 · 8 min read

TLDR:


Rationale

History


Setup

Step 1: Create Your Sheet

Spreadsheet ID highlighted in blue in the URL bar

Step 2: Enable the Sheets API

Click the blue + button to enable the sheets API
Select the Sheets API
API Enabled!
Creating the Sheets API Key
Restricting your API Key to `mywebsite.com`
Restricting your API Key to only the Google Sheets API
Hit the 2 gray squares to copy the Sheets API key to your clipboard, and write it down somewhere

Step 4: Generate an OAUTH Client ID

Create an OAuth client ID
Copy the OAUTH client ID (highlighted yellow)

Submitting data from the website contact form to your Google Spreadsheet using Javascript

Step 1: Create a form

A simple React Form using the informed library

Step 1: Store all your sheets API credentials in variables

Creating the variables to hold your Google API data

Step 3: Hook your submit button up to a function

Specifying an onSubmit event for our Form
Binding informed’s onSubmit function to our class
Making our form submit to sheets

Step 5: Initialize the API

Initializing Google API authorization
Initializing all our Google data in the Sheets API

Step 7: Test it!

Data submitted via a web form in a Google Sheet
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade