Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Storing form data from a website in Google Spreadsheets using javascript
import { Form, Text } from 'informed'; //
import React from 'react';
const SPREADSHEET_ID = 'nhlD3E6xsi2lbDQ71HTJ3oQ1Ql5dIkuiK4IoZYjHD'; //from the URL of your blank Google Sheet
const CLIENT_ID = ''; //from
const API_KEY = 'AIzaSyCz5fYFuCORKGXSGu4IwKq4U_HfcdDtB'; //
const SCOPE = '';
export default class ContactForm extends React.Component {
constructor(props) {
this.onFormSubmit = this.onFormSubmit.bind(this); //to tie the form's callback to this class
componentDidMount(){ //called automatically by React
handleClientLoad =()=> { //initialize the Google API
gapi.load('client:auth2', this.initClient);
initClient =()=> { //provide the authentication credentials you set up in the Google developer console
'apiKey': API_KEY,
'clientId': CLIENT_ID,
'scope': SCOPE,
'discoveryDocs': ['$discovery/rest?version=v4'],
}).then(()=> {
gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSignInStatus); //add a function called `updateSignInStatus` if you want to do something once a user is logged in with Google
onFormSubmit(submissionValues) {
const params = {
// The ID of the spreadsheet to update.
spreadsheetId: SPREADSHEET_ID,
// The A1 notation of a range to search for a logical table of data.Values will be appended after the last row of the table.
range: 'Sheet1', //this is the default spreadsheet name, so unless you've changed it, or are submitting to multiple sheets, you can leave this
// How the input data should be interpreted.
valueInputOption: 'RAW', //RAW = if no conversion or formatting of submitted data is needed. Otherwise USER_ENTERED
// How the input data should be inserted.
const valueRangeBody = {
'majorDimension': 'ROWS', //log each entry as a new row (vs column)
'values': [submissionValues] //convert the object's values to an array
let request = gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);
request.then(function (response) {
// TODO: Insert desired response behaviour on submission
}, function (reason) {
console.error('error: ' + reason.result.error.message);
render() {
//TODO: add your form fields below that you want to submit to the sheet. This just has a name field
return (
First name:
<Text field='name' />
<button type='submit'>
Copy link

picolloo commented Apr 7, 2020

How do you get the reference from gapi? I'm using the script from google but my React app doesn't recognize this object.

Copy link

sudonitin commented Apr 10, 2020

@heaversm I'm having the same question as @picolloo

Copy link

AmmarKamran commented Apr 19, 2020

same as @picolloo

Copy link

raniabdalla commented Apr 28, 2020

in Reactjs where can i write the script? in which file?

Copy link

danseaman6 commented May 4, 2020

@picolloo my solution was simply referencing it as window.gapi.... I'm not sure how @heaversm had it set up to not require this.

Copy link

wcompton commented May 20, 2020

@raniabdalla you place it in the index.html file

Copy link

kathleenmanalo commented Aug 17, 2020

I'm getting the error:

Cannot read property 'spreadsheets' of undefined

how to solve this? thank you!

Copy link

biswajitmaity2019 commented Oct 8, 2020

how to get "gapi" ?
is it window.gapi
load undifine so how to solve it?

Copy link

SunithBhowmick commented Oct 8, 2020

can you help me how to solve this problem ?? "Uncaught TypeError: Cannot read property 'spreadsheets' of undefined"

Copy link

raniabdalla commented Oct 10, 2020

@raniabdalla you place it in the index.html file

but still is not working, i am getting an error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment