あなたのフィードバックフォームでGoogleシートを統合する

Googleシートは、スプレッドシート形式でデータを追跡することができますGoogleによる素晴らしい製品です.あなたは定期的にシートを使用している可能性がありますが、それはまた、あなたのアプリケーションのデータベースとして使用することができます知っていない可能性があります!この記事では、どのようにそれを行うことができます教えてくれます.始めましょう!
ウェブサイトでフィードバックフォームの例を挙げましょう.最初のステップとして、適切な名前を与え、シートを作成します.最初の行で、シートのヘッダーを追加します.フィードバックフォームについては、“名前、電子メールのID＆フィードバック”を考慮してください必要なエントリになります.

現在、シートのURLを取ってください.
シートIDはD/の後の部分です、上記の関連で、それはhttps://docs.google.com/spreadsheets/d/1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQ/edit#gid=0です
次に、https://nocodeapi.com/dashboard/api/google_sheetsにGoogleシートのAPIを作成します.このシートIDを使用して、APIに名前を付けます.

その後、このようなAPI URLが表示されます.

データをGoogleシートに追加して、単にこのURLにデータを投稿します.
デフォルトでは、シートの1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQはあなた自身で編集しない場合はtabIdです.したがって、以下のフォームを考慮する.
ここでは、反応の完全なコード例です

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

今、フォームを介していくつかのデータを提出すると、それはあなたのGoogleシートに表示されます!

tabidで働く

APIでは、tabidがクエリパラメータとして渡されます.tabidによると、データを別のサブシートにプッシュすることができます.さあ、作ろう

フィードバックフォーム

連絡フォーム、および

ニュースレター形式

、

すべてのデータを別のサブシートに送信します.

リンク
上記のサンドボックスのデータがこのGoogleシートに追加されます.
それだ!おめでとう!何か新しいことを試して、市場でのAPIの残りをチェック!インスピレーションを得るためにいくつかのユースケースをお読みください!
もともとnocodeapi.com