1

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:

enter image description here

I would just like to avoid the redirection to the JSON.

Rubén
  • 34,714
  • 9
  • 70
  • 166
Steven Dew
  • 31
  • 5
  • 2
    The page refreshes by default when you submit the HTML form. You need to use `preventDefault()` method to avoid that. Please take a look at [this answer](https://stackoverflow.com/a/39841238/12968627) – Muhammet Yunus Jan 08 '23 at 12:27
  • I would suggest as well using `preventDefault()` method to prevent the browser reload, you can check this [blog](https://www.robinwieruch.de/react-preventdefault/) that explains more about it's usage. – Gabriel Carballo Jan 09 '23 at 17:57

0 Answers0