Integrate Google Sheets with your Feedback Form
Tags: google, sheet, api, feedback
Published: 2020-01-28 08:57:33

---
title: Integrate Google Sheets with your Feedback Form
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c4iokaxktrvu5408osqu.png
description: 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!
tags: 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.

![Sheet View](https://dev-to-uploads.s3.amazonaws.com/i/v1s70xa8xljibqma6cd6.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/qhdbpwcpzb6hbhnbif9v.png)

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

![API Card](https://dev-to-uploads.s3.amazonaws.com/i/40f6g56ygoes8qglspcc.png)

o add data to the Google Sheet, simply POST data to this URL, passing in the`tabId` ( 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

```javascript
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.

![Form View](https://dev-to-uploads.s3.amazonaws.com/i/md06zkt555xfsa2cv7i8.png)

Codesandbox Link:

{% codesandbox sheets-form-integration-9dte6 %}

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!

<em>Originally published at [nocodeapi.com](https://nocodeapi.com/integrate-google-sheets-with-your-feedback-form)</em>