How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS

I wrote about this because I was having an issue with storing users’ form data on Google Sheets in Gatsby. I saw it being done from the backend but I wanted to implement it on the frontend with little stress but it was giving me a headache so here is the ultimate solution that saved the day.

How the solution works

The main idea of the solution was to make ReactJS, NextJS, or in this case, GatsbyJS POST form data to Google Sheets like REST APIs.

First, Initialize Your Workspace

here is documentation on how to set up your projects in ReactJS, GatsbyJS, and NextJS

ReactJS - https://reactjs.org/docs/create-a-new-react-app.html

GatsbyJS - https://www.gatsbyjs.com/docs/tutorial/part-1/

NextJS - https://nextjs.org/docs/getting-started

But in this case, I would use GatsbyJS, If you had set up the project correctly in GatsbyJS, you would see the screen below

Create Your Form

Well, now it’s time to create your form. I would use Material-UI for creating the form and Formik and Yup for handling and validating the form.

You can read more on the technology stack mentioned above:

Material-UI - https://mui.com

Formik  - https://formik.org/docs/overview

Yup - https://formik.org/docs/guides/validation

But you can create it with any technology stack of your choice.

How to Post the data to Google Sheets

TO post our form data to Google Sheets will be using Stein. Stein is an open-source program to help you turn any Google Sheet into a database. And let you POST data to Google Sheets.

we also need to install the stein-js-client. Its a JavaScript client library to interact with the Stein API.

Go over to Google Sheets and open a new Spreadsheet by clicking File, then New, and then Spreadsheet.

Name the sheet to name of your choice and save.

Click the share button on the top right of your screen, and edit the permission to public.

Copy the link and go to https://steinhq.com and create your free account.

Click on Create API. You'll be redirected to your details page. Here, you can see you sheet url and API url. Click on copy on API URL. This URL will be used as the endpoint for sending Requests.

Now, let's install stein-js-client. Type npm install stein-js-client in your terminal to install the package.

After it has been installed, import it at the top of your file. We will make the POST Request in the submitHandler function.

import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("url");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

Replace the submitHandler function with the code above. Here, we are using stein-js-client to post the data to the URL and get back the response in the console using the .then keyword.

Paste the copied API URL endpoint from stein and replace it with the URL in new SteinStore("url").

import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("https://api.steinhq.com/v1/storages/61eea0ad8d29ba237915e07d");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

Now, open up Google Sheets and fill up the first columns, that is name, age, salary, and hobby. Please fill them out carefully, or else it will not work. It should be case sensitive.

Now, run your React app and fill in the input fields. You'll see that the data is getting populated into your Google Sheets.

Now instead of the default values used here pass the values gotten from the form

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: values.title,
      author: values.author,
      content: values.content,
      link: values.link,
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

Now You get this

You can read more on stein
features:https://docs.steinhq.com/introduction

That's all for now. Now you know how How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS application.

you can follow me here on dev.to for more and on twitter @Emeka_Ugbanu and also thanks to @PaulieScanlon for offering me help in using Gatsby Serverless Functions with Google Sheets. You can know about that here.

Comments

[Vandan15]

formify.pro
This helps to get rid from every hassel.
Just create endpoint and attach with action url.
Boom.... you are good to receive form updates from the user with a dedicated admin panel.

[Jatin Naik]

It's really great how you used screen shots and perfect explanation...not too blunt not boring details just the exact point ....