Submitting Custom Form Data to Google Sheets with React.js

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:-

Check out our other trending blog post: How to implement infinite scroll in react?

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.

Recent Post

  • Generative AI for IT: Integration approaches, use cases, challenges, ROI evaluation and future outlook

    Generative AI is a game-changer in the IT sector, driving significant cost reductions and operational efficiencies. According to a BCG analysis, Generative AI (GenAI) has the potential to deliver up to 10% savings on IT spending—a transformation that is reshaping multiple facets of technology. The impact is especially profound in application development, where nearly 75% […]

  • Generative AI in Manufacturing: Integration approaches, use cases and future outlook

    Generative AI is reshaping manufacturing by providing advanced solutions to longstanding challenges in the industry. With its ability to streamline production, optimize resource allocation, and enhance quality control, GenAI offers manufacturers new levels of operational efficiency and innovation. Unlike traditional automation, which primarily focuses on repetitive tasks, GenAI enables more dynamic and data-driven decision-making processes, […]

  • Generative AI in Healthcare: Integration, use cases, challenges, ROI, and future outlook

    Generative AI (GenAI) is revolutionizing the healthcare industry, enabling enhanced patient care, operational efficiency, and advanced decision-making. From automating administrative workflows to assisting in clinical diagnoses, GenAI is reshaping how healthcare providers, payers, and technology firms deliver services. A Q1 2024 survey of 100 US healthcare leaders revealed that over 70% have already implemented or […]

  • Generative AI in Hospitality: Integration, Use Cases, Challenges, and Future Outlook

    Generative AI is revolutionizing the hospitality industry, redefining guest experiences, and streamlining operations with intelligent automation. According to market research, the generative AI market in the hospitality sector was valued at USD 16.3 billion in 2023 and is projected to skyrocket to USD 439 billion by 2033, reflecting an impressive CAGR of 40.2% from 2024 […]

  • Generative AI for Contract Management: Overview, Use Cases, Implementation Strategies, and Future Trends

    Effective contract management is a cornerstone of business success, ensuring compliance, operational efficiency, and seamless negotiations. Yet, managing complex agreements across departments often proves daunting, particularly for large organizations. The TalkTo Application, a generative AI-powered platform, redefines contract management by automating and optimizing critical processes, enabling businesses to reduce operational friction and improve financial outcomes. […]

  • Generative AI in customer service: Integration approaches, use cases, best practices, and future outlook

    Introduction The rise of generative AI is revolutionizing customer service, heralding a new era of intelligent, responsive, and personalized customer interactions. As businesses strive to meet evolving customer expectations, these advanced technologies are becoming indispensable for creating dynamic and meaningful engagement. But what does this shift mean for the future of customer relationships? Generative AI […]

Click to Copy