{"id":135338,"date":"2025-11-05T13:10:45","date_gmt":"2025-11-05T13:10:45","guid":{"rendered":"https:\/\/phppot.com\/?p=24497"},"modified":"2025-11-05T13:10:45","modified_gmt":"2025-11-05T13:10:45","slug":"save-react-form-data-to-google-sheets-without-a-backend-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2025\/11\/05\/save-react-form-data-to-google-sheets-without-a-backend-step-by-step-guide\/","title":{"rendered":"Save React Form Data to Google Sheets Without a Backend (Step-by-Step Guide)"},"content":{"rendered":"
by Vincy<\/a>. Last modified on November 12th, 2025.<\/div>\n

React form can be tied to a Google Sheets to store the submitted data. It maintains the form responses in an Excel format without database. This can be done by deploying a Google App Script for the target sheet.<\/p>\n

In this tutorial, you will learn the steps to create a new Google App Script and deploy it for a Google Sheets.<\/p>\n

The Google Sheets will have columns relevant to the React form fields. The Google web app script URL parameters are in the same order as the column. In a previous tutorial, we saw how to connect Google Sheets via API from a PHP<\/a> application.<\/p>\n

\"React<\/p>\n

Steps to get Google Sheets URL to post form data<\/h2>\n

There are 5 simple steps to get the Google Sheets web app URL by registering an app script for a target sheet. At the end of these 5 steps, it will generate a URL that has to be configured in the React frontend code.<\/p>\n

In the frontend, this URL will have a form data bundle to process the data row insertion as coded in the app script.<\/p>\n

1. Create a Google sheet with the column relevant to the React form<\/h3>\n

\"Target<\/p>\n

2. Navigate Extension -> App Script to add JS script to build row to insert<\/h3>\n

\"Append<\/p>\n

3. Choose Deploy -> New Deployment to configure web app<\/h3>\n

\"Configure<\/p>\n

4. Set ownership configurations and authorize the app<\/h3>\n

\"Configure<\/p>\n

5. Click Deploy and copy the Google Sheets web app URL<\/h3>\n

\"Web<\/p>\n

React frontend form JSX with required handlers<\/h2>\n

The ReactForm<\/code> JSX component includes the form UI and hooks to process the form submit. This simple form collects payment details to store in the Google Sheets.<\/p>\n

In the above steps we get the Google App script URL to target the sheet from the frontend. This URL is used in this JSX with the form\u2019s handleSubmit<\/code> function. This URL is added to the GOOGLE_SHEET_URL<\/code> variable and used in the form action hook.<\/p>\n

The URLSearchParams<\/code> builds the argument list with the submitted React form data<\/a>. Google Sheets URL will receive these arguments in key1=value1&key2=value2..<\/code> format.<\/p>\n

Once the submitted data is added to the Google Sheets, the frontend will clear the form and show a success toast message to the user.<\/p>\n

\"react<\/p>\n

src\/components\/ReactForm.jsx<\/code><\/p>\n

import { useState } from \"react\";\nimport axios from \"axios\";\nimport { ToastContainer, toast } from \"react-toastify\";\nimport \"react-toastify\/dist\/ReactToastify.css\";\nimport \"..\/..\/public\/assets\/css\/react-style.css\";\nimport PaymentFormFields from \".\/PaymentFormFields\";\nconst GOOGLE_SHEET_URL = \"Paste your Google Apps Script Web App URL here\";\nconst ReactForm = () => { const [formData, setFormData] = useState({ projectName: \"\", amount: \"\", currency: \"\", paymentDate: \"\", invoiceNumber: \"\", paymentMode: \"\", note: \"\", }); const handleChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); try { const params = new URLSearchParams(formData).toString(); const response = await axios.post(`${GOOGLE_SHEET_URL}?${params}`); if (response.data.status === \"success\") { toast.success(\"Data saved to Google Sheet!\", { position: \"top-center\" }); setFormData({ projectName: \"\", amount: \"\", currency: \"\", paymentDate: \"\", invoiceNumber: \"\", paymentMode: \"\", note: \"\", }); } else { toast.error(\"Failed to save data. Try again.\", { position: \"top-center\" }); } } catch (error) { console.error(\"Error:\", error); toast.error(\"Something went wrong while submitting.\", { position: \"top-center\", }); } }; return ( <div className=\"form-wrapper\"> <h2 className=\"form-title\">Payment Entry<\/h2> <form onSubmit={handleSubmit} className=\"payment-form\"> <PaymentFormFields formData={formData} handleChange={handleChange} \/> <button type=\"submit\" className=\"submit-btn disabled={loading}\"> {loading ? \"Processing...\" : \"Submit\"} <\/button> <\/form> <ToastContainer \/> <\/div> );\n};\nexport default ReactForm; <\/code><\/pre>\n
src\/components\/PaymentFormFields.jsx<\/code><\/p>\n
const PaymentFormFields = ({ formData, handleChange }) => { return ( <> <div className=\"form-group\"> <label className=\"form-label\">Project Name<\/label> <input type=\"text\" name=\"projectName\" value={formData.projectName} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Amount<\/label> <input type=\"number\" name=\"amount\" value={formData.amount} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Currency<\/label> <select name=\"currency\" value={formData.currency} onChange={handleChange} className=\"form-input\" required > <option value=\"\">Select Currency<\/option> <option value=\"USD\">USD<\/option> <option value=\"INR\">INR<\/option> <option value=\"EUR\">EUR<\/option> <\/select> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Payment Date<\/label> <input type=\"date\" name=\"paymentDate\" value={formData.paymentDate} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Invoice Number<\/label> <input type=\"text\" name=\"invoiceNumber\" value={formData.invoiceNumber} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Payment Mode<\/label> <select name=\"paymentMode\" value={formData.paymentMode} onChange={handleChange} className=\"form-input\" required > <option value=\"\">Select Mode<\/option> <option value=\"Cash\">Cash<\/option> <option value=\"Bank Transfer\">Bank Transfer<\/option> <option value=\"Credit Card\">Credit Card<\/option> <option value=\"UPI\">UPI<\/option> <\/select> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Note<\/label> <textarea name=\"note\" value={formData.note} onChange={handleChange} className=\"form-input\" rows=\"3\" ><\/textarea> <\/div> <\/> );\n}; export default PaymentFormFields;\n<\/code><\/pre>\n
Appending new row to the Google Sheets using the Web App Script<\/h2>\n
I gave the web app script in the downloadable source code added to this tutorial. This JS script is added to the Google Sheets App script extension.<\/p>\n
This script will be executed when the form post action calls the web app URL.  The doPost()<\/code> function builds the Google Sheets row instance with the parameters posted from the form.<\/p>\n
With the line sheet.appendRow(row);<\/code> we can return the ContentService with a success response.<\/p>\n
The formatOnly<\/code> step is optional to maintain all the rows with the same styles as the sheet header has. For example, if you highlight any column with a bright background<\/a>, that will be carried over to the next rows added by the app script.<\/p>\n
\"react<\/p>\n
google-sheet-app\/app-script-target.js<\/code><\/p>\n
function doPost(e) { if (!e || !e.parameter) { return ContentService .createTextOutput(JSON.stringify({ status: \"error\", message: \"No parameters received\" })) .setMimeType(ContentService.MimeType.JSON); } const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(\"Sheet1\"); const row = [ e.parameter.projectName || \"\", e.parameter.amount || \"\", e.parameter.currency || \"\", e.parameter.paymentDate || \"\", e.parameter.invoiceNumber || \"\", e.parameter.paymentMode || \"\", e.parameter.note || \"\", ]; sheet.appendRow(row); const lastRow = sheet.getLastRow(); const lastColumn = sheet.getLastColumn(); const headerRange = sheet.getRange(1, 1, 1, lastColumn); const newRowRange = sheet.getRange(lastRow, 1, 1, lastColumn); headerRange.copyTo(newRowRange, { formatOnly: true }); return ContentService .createTextOutput(JSON.stringify({ status: \"success\" })) .setMimeType(ContentService.MimeType.JSON);\n}\n<\/code><\/pre>\n
Conclusion<\/h2>\n
By linking a React form to a Google Sheets via the Google Apps Script, form data is stored in excel format. This will be very useful to maintain form responses without a backend database. The App Script created for this tutorial provided a feature to keep the row column formatting with the newly added rows.<\/p>\n
As an enhancement, we can extend this code to read Google sheets<\/a> and show the latest records to the UI.<\/p>\n
References<\/strong><\/p>\n
    \n
  1. Google Apps Script Web App documentation<\/a>.<\/li>\n
  2. Bundling form data with URL parameters<\/a>.<\/li>\n<\/ol>\n
    Download<\/a><\/p>\n
    \n
     \"Vincy\" <\/div>\n
     Written by Vincy<\/a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. <\/div>\n<\/p><\/div>\n
      <\/p>\n
    \n
    Related Tutorials<\/h2>\n<\/p><\/div>\n
     \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
    by Vincy. Last modified on November 12th, 2025. React form can be tied to a Google Sheets to store the submitted data. It maintains the form responses in an Excel format without database. This can be done by deploying a Google App Script for the target sheet. In this tutorial, you will learn the steps […]<\/p>\n","protected":false},"author":2,"featured_media":135339,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-135338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=135338"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/135339"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=135338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=135338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=135338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}