Integrate Google Sheets with your Feedback Form

#google #sheet #api #feedback

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.

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.

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

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>
    );
}

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.

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

Top comments (10)

adnan50 • Mar 27 '20

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.