Building Backend-Free Form with Airtable API

Introduction:

Imagine you’re polishing your personal portfolio, and suddenly the thought of adding a contact form pops into your mind. But wait, you don’t want to fuss over setting up a backend server or rely on third-party applications. Fear not, for there’s a seamless solution at your fingertips — the Airtable API! In this journey, we’ll explore how to integrate a contact form into your frontend using Airtable, granting you the power to collect messages without breaking a sweat over backend complexities.

Prerequisites:

Before embarking on this adventure, ensure you’re equipped with two essential tools:

• React — the trusty framework for frontend wizardry,
• Airtable account — the vault where your form submissions will reside. With these in hand, you’re ready to dive into the magic of frontend development.

Note: you can skip airtable setup to get to code.

Airtable Setup

Create your base in Airtable, including fields such as name, email, phone number, and message. After setting up the base, we will need to access its endpoint.

Follow the screenshots below to access the API Endpoint and Personal access token:

1. Go to the Developer Hub by clicking on your profile avatar in the right pane.

Go to Developer hub on right pane on clicking your profile avatar.

2. Then, click on Developer Docs in the left pane.

3. Then, click on API Docs under Web API.

4. Under Introduction, choose the base name you just created.

4. Within the documentation, find the POST request to create a new record.

Now, let’s obtain your personal access token.

1. Go to the Developer Hub by clicking on your profile avatar in the right pane.

2. Within Personal Access Token, click on Create Access Token.

3. Give it a name and ensure your base is included within the access permissions.

4. Select all the appropriate permissions required to read and write to the base.

Finally, click on Create Token and make sure to copy it and store it in a safe place. We will be adding it later in the .env file in our code.

Code

Let’s embark on our coding escapade! We’ll begin by setting up a React component for our contact form. This form will capture user input and gracefully whisk it away to the welcoming embrace of Airtable, all without the need for a backend server.

1. Let’s import React and usestate.

2. Within the functional component, we will set up the state to hold all the form data and its handler function (which will be invoked onChange events and store the data in formData).

3. Now let’s create a handler for when users submit the data. It should send the form details to Airtable.

4. Add the form, and your component is completed.

const AirtableContactForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch('YOUR_AIRTABLE_API_ENDPOINT', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer YOUR_AIRTABLE_API_KEY',
        },
        body: JSON.stringify({ fields: formData }),
      });
      if (response.ok) {
        // Data successfully stored in Airtable!
        console.log('Message sent successfully!');
        setFormData({ name: '', email: '', message: '' }); // Clear form fields
      } else {
        // Oops! Something went wrong
        console.error('Failed to send message');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={formData.message} onChange={handleChange} />
      </label>
      <button type="submit">Send</button>
    </form>
  );
};
export default AirtableContactForm;

Conclusion:

Voila! You’ve just unlocked the secret to creating a fully functional contact form without the hassle of backend setup. With React as your trusty ship and Airtable API as your compass, you can confidently sail through the vast ocean of frontend development, collecting messages with ease. So go ahead, enhance your personal portfolio, and let the messages flow in — all without breaking a sweat over backend worries.

Happy coding!