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
Top comments (0)