DEV Community

loading...
Cover image for Integrate Google Sheets with your Feedback Form

Integrate Google Sheets with your Feedback Form

mddanishyusuf profile image Mohd Danish ・2 min read

Google Sheets is an awesome product by Google which allows you to keep track of data in spreadsheet format. Even though you may be using Sheets regularly, you might not know that it can also be used as a database for your app! In this article, I will teach you how you can do that. Let's begin!

Let's take the example of a Feedback Form on a website. As a first step, create a sheet, giving it an appropriate name. In the first row, add the headers for your sheet. For our Feedback Form, let's consider "Name, Email ID & Feedback" will be the required entries.

Sheet View

Now, taking the URL of the Sheet: https://docs.google.com/spreadsheets/d/1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQ/edit#gid=0, take the Sheet id from it.

The Sheet id is the part after d/, in the above link, it's 1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQ

Next, go to https://nocodeapi.com/dashboard/api/google_sheets to create an API for Google Sheets. Use this Sheet ID & give a name to your API.

Make Form

Afterward, you'll see your API URL like this.

API Card

o add data to the Google Sheet, simply POST data to this URL, passing in thetabId ( name of subsheet ) as a parameter.

By default, the tabId of the sheet will be Sheet1 if you don't edit it yourself. So, considering the below form.

Here is a complete code example in React

import React, { useState } from "react";

export default function Contact() {
    const [formData, setFormData] = useState({});
    const [message, setMessage] = useState("");

    const handleInput = e => {
        const copyFormData = { ...formData };
        copyFormData[e.target.name] = e.target.value;
        setFormData(copyFormData);
    };

    const sendData = async e => {
        e.preventDefault();
        const {name, email, message} = formData
        try {
            const response = await fetch(
                "<your_google_sheet_nocodeapi_endpoiint>?tabId=Feedback",
                {
                    method: "post",
                    body: JSON.stringify([[name, email, message]]),
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            const json = await response.json();
            console.log("Success:", JSON.stringify(json));
            setMessage("Success");
        } catch (error) {
            console.error("Error:", error);
            setMessage("Error");
        }
    };

    return (
        <div className="App">
            <form
                className="input-form"
                id="contact"
                name="contact"
                required
                onSubmit={sendData}
            >
                <input
                    name="name" 
                    type="text"
                    placeholder="Name"
                    required
                    onChange={handleInput}
                />
                <input
                    name="email"
                    type="email"
                    placeholder="Email"
                    required
                    onChange={handleInput}
                />
                <textarea
                    name="message"
                    placeholder="Message"
                    onChange={handleInput}
                />
                <input name="submit" type="submit" value="Send" />
                {message}
            </form>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Now, when you submit some data through the form, it will appear in your Google Sheet!

Working with tabId

In your API, the tabId is passed in as a query parameter. According to the tabId, the data can be pushed to a different sub-sheet. Here, let's create

  • A Feedback Form
  • A Contact Form, and
  • A Newsletter Form,

all sending data to different subsheets.

Form View

Codesandbox Link:

The data in the above sandbox is added to this Google Sheet :

That's it! Congrats! Check out the rest of our APIs in the marketplace to try something new! Read some more use-cases to get inspiration!

Originally published at nocodeapi.com

Discussion (8)

pic
Editor guide
Collapse
adnan50 profile image
adnan50

When i add too much data in react form, then once it's looking good but after that the data is not append in columns A it's append on, where last data finish. What's the reason for it please. I want, my data always show in first column.

Collapse
mddanishyusuf profile image
Mohd Danish Author

Have you set header key values into your google sheet before adding your form values?

Collapse
adnan50 profile image
Collapse
abdulghani200 profile image
Abdul Ghani

Sounds cool! Can we make the google sheet private and still post the content?

Collapse
mddanishyusuf profile image
Mohd Danish Author

Yes, you can do that.

Collapse
abdulghani200 profile image
Abdul Ghani

Wow! Thanks for the reply!

Collapse
trinlive profile image
trinlive

Dear friend
i created list box value and radio value in react form when submit button data not sent google sheet.

please tutorial me
good friend

Collapse
adnan50 profile image
adnan50

Why my multi select form data is not shown in gsheet please? Else everything is working only array data is not displayed.