Currently, I am trying to have a simple form send its data to a google sheet to make it easier for the owner of the website to see their responses. Im trying to use google app scripts following a tutorial online, but once the data is submitted I am redirected to the successful JSON response.
Going off of another post:
How to avoid redirection in google-sheet app script
Another User said to avoid using Content service, but i couldn't find an alternative. I have attached my google scripts code below and the component that handles my form logic.
Form component:
import React from "react"
import { useState } from "react";
export default function Form(props) {
const [data, setData] = useState({
name: " ",
company: "",
service: "",
contact: "",
technician: "",
});
const { name, company, service, contact, technician } = data;
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
return (
<div className="form-container">
<form
action="<my google scripts api endpoint"
method="POST"
>
<div className="form-group">
<h3 className="form-header">Service Inquiry</h3>
<label className="input-label">Name:</label>
<textarea
type="text"
name="name"
value={name}
onChange={handleChange}
required
className="input"
rows="1"
></textarea>
</div>
<div className="form-group">
<label className="input-label">Company Name:</label>
<textarea
type="text"
name="company"
value={company}
onChange={handleChange}
required
className="input"
rows="1"
></textarea>
</div>
<div className="form-group">
<label className="input-label">What can we do for you?</label>
<textarea
type="text"
name="service"
value={service}
onChange={handleChange}
required
className="input"
rows="5"
cols="50"
></textarea>
</div>
<div className="form-group">
<label className="input-label">
Please leave a way for us to contact you:
</label>
<textarea
type="text"
name="contact"
value={contact}
onChange={handleChange}
placeholder="Email or Phone"
className="input"
rows="1"
></textarea>
</div>
<div className="form-group">
<label className="input-label">Request Specific Technician:</label>
<textarea
type="text"
name="technician"
value={technician}
onChange={handleChange}
className="input"
rows="1"
placeholder="*optional"
></textarea>
<p className="footnote">
*if you would like a specific technician, please specify
</p>
<input type="submit" value="Send" className="submit-button" />
</div>
</form>
</div>
);
}
Google App Scripts:
// Original code from https://github.com/jamiewilson/form-to-google-sheets
// Updated for 2021 and ES6 standards
const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()
function initialSetup () {
const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
const lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
const sheet = doc.getSheetByName(sheetName)
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Date' ? 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()
}
}
What I am receiving after the form is submitted:
I would just like to avoid the redirection to the JSON.