Custom Backend Form API

PROJECT_ID="Your Project ID"
PRIVATE_KEY="Your Private Key"
PRIVATE_KEY_ID="Your Private KeyID"
CLIENT_ID="Your Client ID"
CLIENT_EMAIL="Your Client Email"
CLIENT_CERT_URL="Your Client Cert Url"

import { google } from "googleapis";
import Cors from "cors";

function initMiddleware(middleware) {
  return (req, res) =>
    new Promise((resolve, reject) => {
      middleware(req, res, (result) => {
        if (result instanceof Error) {
          return reject(result);
        }
        return resolve(result);
      });
    });
}

const cors = initMiddleware(
  Cors({
    origin: "*",
    methods: ["POST"],
    allowedHeaders: ["Content-Type"],
    preflightContinue: true,
  })
);

export default async function handler(req, res) {
// Respond to preflight request
  if (req.method === "OPTIONS") {
    res.status(200).end();
    return;
  }

  // for proper line breaks of line items
  const privateKeyCn = process.env.PRIVATE_KEY.replace(/\\n/g, "\n");

  const { sheetId, sheetName, rowData } = req.body;

  if (req.method == "POST") {
        //for CORS policy
    await cors(req, res);

    try {
      const auth = new google.auth.GoogleAuth({
                //google credentials
        credentials: {
          type: "service_account",
          project_id: process.env.PROJECT_ID,
          private_key_id: process.env.PRIVATE_KEY_ID,
          private_key: privateKeyCn,
          client_email: process.env.CLIENT_EMAIL,
          client_id: process.env.CLIENT_ID,
          auth_uri: "https://accounts.google.com/o/oauth2/auth",
          token_uri: "https://oauth2.googleapis.com/token",
          auth_provider_x509_cert_url:
            "https://www.googleapis.com/oauth2/v1/certs",
          client_x509_cert_url: process.env.CLIENT_CERT_URL,
          universe_domain: "googleapis.com",
        },
        scopes: ["https://www.googleapis.com/auth/spreadsheets"],
      });

      // create client instance
      const client = await auth.getClient();

      // instance of google sheets api
      const googleSheets = google.sheets({ version: "v4", auth: client });

      //  write rows
      await googleSheets.spreadsheets.values.append({
        auth: auth,
        spreadsheetId: `${sheetId}`, // sheet id of your google sheet
        range: `${sheetName}!A:A`,

        valueInputOption: "USER_ENTERED",

        insertDataOption: "INSERT_ROWS",

        resource: {
          majorDimension: "ROWS",
          range: `${sheetName}!A:A`, //In which sheet you want to populate
          values: [rowData], // format: [["John Snow", "22", "Engineer","New York",...]]
        },
      });
      res.status(200).send("success");
    } catch (e) {
      console.log(e);
      res.status(400).send(JSON.stringify(e));
    }
  }
}

//calling your API end point

//....your code
const handleSubmit = async (event) => {

    event.preventDefault();

    const url = "https://www.yourWebsite.com/api/customForm"; //your api end point

    const reff = referer || "not available";
    const ipAddrs = ipAddress || "no IP";
    const date = new Date().toLocaleString();
    const name = userData?.fullName?.trim() || "";
    const phone = userData?.phone || "";
    const email = userData?.email || "";
    const msg = userData?.msg || "";

        //you can add fields are per the requirements there is no need to change in the backend
    const bodyContent = {
      sheetId: "Your Sheet ID",
      sheetName: `${Your Sheet Name}`,
      rowData: [
        date, //submission date
        ipAddrs, //IP Address of user
        currentURL, // in which page form get submitted
        reffer, //source
        name,
        phone,
        email,
        msg,
      ],
    };
    try {
      const response = await axios.post(url, bodyContent, {
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (response.status === 200) {
        //...your code on submit success
                console.log("submitted successfully")
      }
    } catch (error) {
            //...your code on submit unsuccessful
      console.log(error?.response?.data);
    }
  };