In today’s fast-paced world of web development, efficiently collecting and managing user data is a crucial aspect of many applications. While there are various methods and platforms available, integrating Google Sheets with your React.js application provides a powerful solution for data storage and analysis. In this article, we’ll guide you through the process of submitting custom form data directly to Google Sheets using React.js.
Prerequisites:
Before diving into the implementation, make sure you have the following in place:
- Working knowledge of React.js.
- A Google account to create and access Google Sheets.
Setting Up Your React App:
Start by creating a React app using the create-react-app command. Once your app is initialized, clean up unnecessary files to keep your project organized.
npx create-react-app my-google-sheets-app cd my-google-sheets-app
SettingUp the Contact Page for submitting the Form Data.
import React, { useState } from 'react';
import './App.css';
function Contact() {
const [formData, setFormData] = useState({
fullName: '',
email: '',
phoneNumber: ''
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async(e) => {
e.preventDefault();
console.log('Form submitted:', formData);
};
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="fullName">Full Name:</label>
<input
type="text"
id="fullName"
name="fullName"
value={formData.fullName}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="phoneNumber">Phone Number:</label>
<input
type="tel"
id="phoneNumber"
name="phoneNumber"
value={formData.phoneNumber}
onChange={handleChange}
required
/>
</div>
<button type="submit">Submit</button>
</form>
</header>
</div>
);
}
export default Contact;Code language: JavaScript (javascript)Creating the Google Sheets and config AppScript:
1. Open your Google Sheets and add each form input name as a column heading.
2. Navigate to Extensions → App Scripts → Editor → Code.gs and copy the provided script into the script editor.
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()
function intialSetup () {
var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
var sheet = doc.getSheetByName(sheetName)
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
var nextRow = sheet.getLastRow() + 1
var newRow = headers.map(function(header) {
return header === 'timestamp' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}Code language: JavaScript (javascript)3. Save Project,Run and deploy the script.
Make sure you change the access to “Anyone” This will generate a link that you’ll use to post data to the spreadsheet.
After deployment, it looks like:-
Integrating the Google Sheets API with React:
Now, add the function to submit the form data to Google Sheets using the generated API link-
import React, { useState } from 'react';
import './App.css';
function Contact() {
const [formData, setFormData] = useState({
fullName: '',
email: '',
phoneNumber: ''
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async(e) => {
e.preventDefault();
console.log('Form submitted:', formData);
const data = new FormData();
data.append('fullName', formData.fullName);
data.append('email', formData.email);
data.append('phoneNumber', formData.phoneNumber);
// your URL.
const Sheet_Url="*******************************************************************"
try {
await fetch(Sheet_Url, {
method: 'POST',
body: data,
muteHttpExceptions: true,
});
setFormData({
fullNameame: '',
email: '',
phoneNumber: '',
});
} catch (error) {
console.log(error);
}
};
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="fullName">Full Name:</label>
<input
type="text"
id="fullName"
name="fullName"
value={formData.fullName}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="phoneNumber">Phone Number:</label>
<input
type="tel"
id="phoneNumber"
name="phoneNumber"
value={formData.phoneNumber}
onChange={handleChange}
required
/>
</div>
<button type="submit">Submit</button>
</form>
</header>
</div>
);
}
export default Contact:Code language: JavaScript (javascript)After submitting the form, the updated sheet looks like this:-
Conclusion:
By following these steps, you have successfully set up a React.js application to submit custom form data directly to Google Sheets. This streamlined integration enhances data collection efficiency and provides a seamless user experience. Feel free to modify the styling and adapt the code to suit your specific needs.