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

  • How Conversational AI Chatbots Improve Conversion Rates in E-Commerce?

    The digital shopping experience has evolved, with Conversational AI Chatbots revolutionizing customer interactions in e-commerce. These AI-powered systems offer personalized, real-time communication with customers, streamlining the buying process and increasing conversion rates. But how do Conversational AI Chatbots improve e-commerce conversion rates, and what are the real benefits for customers? In this blog, we’ll break […]

  • 12 Essential SaaS Metrics to Track Business Growth

    In the dynamic landscape of Software as a Service (SaaS), the ability to leverage data effectively is paramount for long-term success. As SaaS businesses grow, tracking the right SaaS metrics becomes essential for understanding performance, optimizing strategies, and fostering sustainable growth. This comprehensive guide explores 12 essential SaaS metrics that every SaaS business should track […]

  • Bagging vs Boosting: Understanding the Key Differences in Ensemble Learning

    In modern machine learning, achieving accurate predictions is critical for various applications. Two powerful ensemble learning techniques that help enhance model performance are Bagging and Boosting. These methods aim to combine multiple weak learners to build a stronger, more accurate model. However, they differ significantly in their approaches. In this comprehensive guide, we will dive […]

  • What Is Synthetic Data? Benefits, Techniques & Applications in AI & ML

    In today’s data-driven era, information is the cornerstone of technological advancement and business innovation. However, real-world data often presents challenges—such as scarcity, sensitivity, and high costs—especially when it comes to specific or restricted datasets. Synthetic data offers a transformative solution, providing businesses and researchers with a way to generate realistic and usable data without the […]

  • Federated vs Centralized Learning: The Battle for Privacy, Efficiency, and Scalability in AI

    The ever-expanding field of Artificial Intelligence (AI) and Machine Learning (ML) relies heavily on data to train models. Traditionally, this data is centralized, aggregated, and processed in one location. However, with the emergence of privacy concerns, the need for decentralized systems has grown significantly. This is where Federated Learning (FL) steps in as a compelling […]

  • Federated Learning’s Growing Role in Natural Language Processing (NLP)

    Federated learning is gaining traction in one of the most exciting areas: Natural Language Processing (NLP). Predictive text models on your phone and virtual assistants like Google Assistant and Siri constantly learn from how you interact with them. Traditionally, your interactions (i.e., your text messages or voice commands) would need to be sent back to […]

Click to Copy