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

  • Agentic AI Explained: Definition, Benefits, Challenges and Use Cases

    Artificial Intelligence (AI) has evolved significantly, transitioning from rule-based systems to more dynamic, learning-based models. Among the latest advancements is Agentic AI, an AI paradigm that enhances autonomy, decision-making, and self-improvement capabilities. Unlike traditional AI, which primarily follows predefined rules or models, Agentic AI exhibits goal-oriented behavior, adapts to complex environments, and makes decisions with […]

  • AI in payment: Key applications, advantages, and regulatory considerations

    The financial landscape is undergoing a profound transformation, driven by the rapid advancements in artificial intelligence (AI). From enhancing security to streamlining transactions, AI is revolutionizing how we make payments, making the process faster, safer, and more seamless. The global AI in payments market is projected to reach an impressive USD 12.7 billion by 2026, […]

  • 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 […]

Click to Copy