Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Storing form data from a website in Google Spreadsheets using javascript
import { Form, Text } from 'informed'; //https://joepuzzo.github.io/informed/
import React from 'react';
const SPREADSHEET_ID = 'nhlD3E6xsi2lbDQ71HTJ3oQ1Ql5dIkuiK4IoZYjHD'; //from the URL of your blank Google Sheet
const CLIENT_ID = '2d280542491u-3aofp4eFeftog7q0u5a73ro566h8vi.apps.googleusercontent.com'; //from https://console.developers.google.com/apis/credentials
const API_KEY = 'AIzaSyCz5fYFuCORKGXSGu4IwKq4U_HfcdDtB'; //https://console.developers.google.com/apis/credentials
const SCOPE = 'https://www.googleapis.com/auth/spreadsheets';
export default class ContactForm extends React.Component {
constructor(props) {
super(props);
this.onFormSubmit = this.onFormSubmit.bind(this); //to tie the form's callback to this class
}
componentDidMount(){ //called automatically by React
this.handleClientLoad();
}
handleClientLoad =()=> { //initialize the Google API
gapi.load('client:auth2', this.initClient);
}
initClient =()=> { //provide the authentication credentials you set up in the Google developer console
gapi.client.init({
'apiKey': API_KEY,
'clientId': CLIENT_ID,
'scope': SCOPE,
'discoveryDocs': ['https://sheets.googleapis.com/$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
this.updateSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
});
}
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.
insertDataOption: 'INSERT_ROWS', //Choose OVERWRITE OR INSERT_ROWS
};
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
console.log(response.result);
}, 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 (
<Form
onSubmit={this.onFormSubmit}
>
<label>
First name:
<Text field='name' />
</label>
<button type='submit'>
Submit
</button>
</Form>
)
}
}
@picolloo
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.

@sudonitin
Copy link

sudonitin commented Apr 10, 2020

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

@AmmarKamran
Copy link

AmmarKamran commented Apr 19, 2020

same as @picolloo

@raniabdalla
Copy link

raniabdalla commented Apr 28, 2020

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

@danseaman6
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.

@wcompton
Copy link

wcompton commented May 20, 2020

@raniabdalla you place it in the index.html file

@kathleenmanalo
Copy link

kathleenmanalo commented Aug 17, 2020

I'm getting the error:

Cannot read property 'spreadsheets' of undefined

how to solve this? thank you!

@biswajitmaity2019
Copy link

biswajitmaity2019 commented Oct 8, 2020

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

@SunithBhowmick
Copy link

SunithBhowmick commented Oct 8, 2020

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

@raniabdalla
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