Use Airtable to collect website data
Tags: webdev, api, data
Published: 2020-01-24 11:39:18

---
title: Use Airtable to collect website data
published: true
description: Airtable is the most used tool for collecting users' feedback with forms. Now you can make native forms into your website and collect the data into your Airtable
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rkabuq7xa4y2kwxzcw5h.png
tags: webdev, api, 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 <a href="https://nocodeapi.com/docs/airtable-nocode-api-docs" taregt="_blank" rel="noopener noreferrer">Airtable NoCodeAPI</a> endpoint.

First make Airtable API into your account and if you don't know how to make then just follow this tutorial. <a href="https://nocodeapi.com/docs/airtable-nocode-api-docs" taregt="_blank" rel="noopener noreferrer">Build Airtable NoCodeAPI</a>.

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

![Airtable API Card](https://thepracticaldev.s3.amazonaws.com/i/u25szgqi7qo6gmh4vkn1.png)

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.

```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();
        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`**

![Airtable Dashboard](https://thepracticaldev.s3.amazonaws.com/i/zsqknviahn39u2b57tew.png)

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

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

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

{% codesandbox bold-mcnulty-xj3er %}

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