Use Airtable to collect website data

Work Flow

To set up this automation you have to make your native form into your react project and onSubmit make POST call to your Airtable NoCodeAPI endpoint.

First make Airtable API into your account and if you don't know how to make then just follow this tutorial. Build Airtable NoCodeAPI.

When you will finish your Airtable API then you will see this card. We need this API endpoint.

So, mainly on the website we need a couple of user input forms and those are followings:

• Contact Form
• Feedback Form
• Newsletter

Let's build all these forms with a single API endpoint and one single Airtable bases where all these data will be stored into tabular form.

Here I'm using React Code example. But you can do in any language.

Contact Form

In a contact form, we need usually Name, Email & Message but you can add as many fields you want. So, I'm using these three fields into the contact form.

Here is the complete code of Contact Component.

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();
        try {
            const response = await fetch(
                "<your_airtable_nocodeapi_endpoiint>?tableName=contact",
                {
                    method: "post",
                    body: JSON.stringify([formData]),
                    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"  // name should matched with your airtable table field
                    type="text"
                    placeholder="Name"
                    required
                    onChange={handleInput}
                />
                <input
                    name="email"  // name should matched with your airtable table field
                    type="email"
                    placeholder="Email"
                    required
                    onChange={handleInput}
                />
                <textarea
                    name="message"  // name should matched with your airtable table field
                    placeholder="Message"
                    onChange={handleInput}
                />
                <input name="submit" type="submit" value="Send" />
                {message}
            </form>
        </div>
    );
}

So, Now get your Airtable NoCodeAPi endpoint from your account.

https://v1.nocodeapi.com/betauser/airtable/aLhcOMzzjticoIEC?tableName=contact

Feedback Form

In a Feedback form, we need usually Email & Message but you can add as many fields you want. So, I'm using these two fields into the feedback form.

Code is the same as for contact but tableName will change to feedback and here is a complete code of Feedback Component.

import React, { useState } from "react";

export default function Feedback() {
    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();
        try {
            const response = await fetch(
                "<your_airtable_nocodeapi_endpoiint>?tableName=feedback",
                {
                    method: "post",
                    body: JSON.stringify([formData]),
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            const json = await response.json();
            console.log("Success:", JSON.stringify(json));
            setMessage(json.message);
        } catch (error) {
            console.error("Error:", error);
            setMessage("Error");
        }
    };

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

Newsletter Form

In a Newsletter form, we need usually Email but you can add as many fields you want. So, I'm using email fields into the Newsletter form.

Code is the same as for contact but tableName will change to newsletter and here is a complete code of Feedback Component.

import React, { useState } from "react";

export default function Newsletter() {
    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();
        try {
            const response = await fetch(
                "<your_airtable_nocodeapi_endpoiint>?tableName=newsletter",
                {
                    method: "post",
                    body: JSON.stringify([formData]),
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            const json = await response.json();
            console.log("Success:", JSON.stringify(json));
            setMessage(json.message);
        } catch (error) {
            console.error("Error:", error);
            setMessage("Error");
        }
    };

    return (
        <div className="App">
            <form
                className="input-form"
                id="contact"
                name="contact"
                onSubmit={sendData}
            >
                <input
                    name="email"
                    type="email"
                    placeholder="Email"
                    onChange={handleInput}
                />
                <input name="submit" type="submit" value="Send" />
                {message}
            </form>
        </div>
    );
}

Here is complete code into codesandbox and you test these forms live.

Yes, That's all. I hope you didn't find any typos in this blog post. if there is any then comment down below. Thanks :)

Originally written Here https://nocodeapi.com/collect-website-data-with-react-and-airtable-nocodeapi