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 Feedback

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

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

API Card

To 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 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.

Sheet 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 !