Do you want to create a custom Airtable form for your WordPress site? Airtable is a cloud service that combines the power of spreadsheets and databases together. It allows you to build custom spreadsheet apps without writing a single line of code.
In this article, we’ll show you the step by step process on how to create a custom Airtable form and embed it to your WordPress site.
Why Create a Custom Airtable Form in WordPress?
Airtable helps you to build custom spreadsheet apps to store information, just like you would do in a database.
It creates easy to use and visually appealing spreadsheets that can be used for product planning, user studies, sales CRM (Customer Relationship Management), product launches, content calendar planning, and more.
However, you’ll have to enter all the data in your Airtable account manually.
WPForms is the best form builder plugin and comes with different types of form templates. So you can easily build any kind of form based on your requirements.
Finally, you can connect the form to your Airtable account using Zapier. So whenever someone submits the form, the data will be added to your Airtable account automatically. Cool, isn’t it?
This will help you save your valuable time and increase your productivity.
So without further ado, let’s get started with the process of creating a custom Airtable form for your WordPress site.
Step 1: Create a WordPress Form
We’ll be creating a simple contact form for the sake of this tutorial. Then, we’ll show you how to connect this form to your Airtable account.
We’ll assume that you want to create this form to add the entries automatically to the Contacts table of your “Sales CRM” workspace.
Upon activation, you need to go to WPForms » Add New to create a new form.
On the Setup page, you’ll have to change the Form Name to any name of your choice. Next, you need to click on the Simple Contact Form template to create the custom Airtable form.
We’ll be adding some basic fields like name, email, organization name, and phone number to this form. You can follow our tutorial on how to create a simple contact form for detailed instructions.
Finally, you need to click on the Save button, present at the top-right corner of your screen, to store the changes.
Step 2: Embed the Form to Your Website
In this step, we’ll embed the custom Airtable form to our website and then, we’ll add at least one test entry to the form.
But why do we need to add a test entry? The reason is we’ll be using it later to test the connection between WPForms and Airtable. This will assure us that everything is working properly.
You can easily embed the form to a post, page, or the sidebar of your website. Let’s take a look at how to embed it to a WordPress page.
First, you need to head over to Pages » Add New from the left sidebar of your WordPress admin panel.
Next, you should click on the Add block (+) icon to insert the WPForms block.
This will open the block manager where you need to search for the WPForms block and then click on it to add it to the page editor.
Once the WPForms block is added, you need to select the custom Airtable form from the dropdown menu. This will add the form to the page editor.
Finally, you need to publish this page by clicking on the Publish button, present at the top-right corner of the screen.
Now go ahead and open this page in a new tab of your web browser. And then, fill in the form and click on the Submit button to create a test form entry.
Step 3: Install Zapier Addon
The next thing you need to do is install the Zapier addon.
In case you don’t know, Zapier is an automation tool that lets you connect 2 or more apps to do a particular task. Hence, we’ll be using Zapier to connect WPForms and Airtable.
To install the Zapier addon, you need to go to the WPForms » Addons page and then search for that addon. Once you find it, you should install and activate the Zapier addon.
Now head over to WPForms » Settings page to get the Zapier API key. This key will be used to connect Zapier to WPForms account.
On the WPForms settings page, you need to click on the Integrations tab. And then, you should click on the Zapier logo to find the API key for your site.
You must keep this page open as we’ll use this API key later in Step 5.
Step 4: Create a New Zap
To connect WPForms and Airtable, you need to create a new Zap on the Zapier website.
Wait! What is a Zap? It is a process of connecting 2 or more apps and it always needs a trigger to perform a specific action.
In a new tab of your web browser, you should open the Zapier website and log in to your account. You can create a new account for free if you don’t have one.
On the Zapier dashboard, you need to click on the Make a Zap! button, present at the top-right corner of your screen, to start the configuration wizard.
Now, the process of creating a zap comprises of two parts. In the first part, you’ll have to set up WPForms as the trigger app. And then, you’ll need to configure Airtable as the action app.
Let’s get started with the trigger setup process.
Step 5: Configure the Trigger App
To configure WPForms as the trigger app, the first thing you need to do is search for WPForms app using the “Choose a Trigger App” search box.
Once you find it, you should click on it to proceed.
Next, you’ll have to select “New Form Entry” as the trigger option and then click on the Save + Continue button.
It’s time to connect the WPForms account to Zapier now. You can skip this part if you’ve previously connected your WPForms account to Zapier.
On the other hand, you should click on the Connect an Account button if you’re doing this for the first time.
This will open a popup window where you will be asked to enter your website URL and the Zapier API key. You may go back to Step 3 to understand how to get the API key.
Once you’ve filled in the details, you need to click on the Yes, Continue button.
This will close the popup window and now you’ll see your WPForms account added to the “Select WPForms Account” page.
You can click on the Test button to check the connection between WPForms and Zapier. If you receive a success message, then you should click on the Save + Continue button to proceed.
Zapier will now access your WPForms account and fetch all the forms of your website. So go ahead and select the custom Airtable form from the dropdown box on the “Set up WPForms Form Entry” page.
Once done, you need to click on the Continue button to proceed.
Next, all the entries of your form will be retrieved by Zapier. You need to select any one of the form entries so that it can be used for testing the connection between WPForms and Airtable later.
Finally, you should click on the Continue button to complete the trigger setup process.
Step 6: Configure an Action App
Let’s start the configuration process of the action app. To do that, you should click on the “Your Zap currently lacks an Action step. Add one now!” link.
Next, you’ll have to search for the Airtable app using the “Choose an Action App” search box and then click on it to proceed.
Zapier will now ask you to select which Airtable action you want to happen when someone submits the custom Airtable form.
Since you want to add a new contact to the Contacts table of your “Sales CRM” workspace, select the Create Record option and then click on the Save + Continue button.
It’s time to connect your Airtable account to Zapier.
To do that, you’ll have to click on the Connect an Account button. This will open a pop window asking you to enter the Airtable API key.
So keep this popup window open and visit the Airtable account page in a new tab. Here you need to find the API section which has a textbox with some hidden text.
You’ll have to click on that textbox to view the Airtable API key. Now copy the API key and paste it to the textbox in the Zapier popup window.
Once done, you need to click on the Yes, Continue button to connect Airtable to Zapier.
This will close the popup window and you’ll now see your Airtable account added to the “Select Airtable Account” page.
You may check the connection between Zapier and Airtable by clicking on the Test button.
If you get a success message, then you need to click on the Save + Continue button to proceed to the next step.
Step 7: Setup and Test the Airtable Template
Zapier will now ask you to set up the template that will be used to create a new contact in your Airtable account.
Let’s take a look at how to configure this template.
First, you’ll have to select a Base in which you want to add the contact details. This will be fetched from your Airtable account.
Since we want to add the new contacts to the Sales CRM, you should select Sales CRM from the dropdown menu.
Similarly, you need to select the Contacts table from the Table dropdown box. This will add a number of new fields to this template.
You should note that all the new fields are optional, so it depends on you which one you want to edit. Also, Zapier will fetch the data from your Custom Airtable form for these additional fields.
For the Name and Org field, you need to click on the Insert a Field icon and then select Name from the dropdown menu. And then, you should select Organization from the Account dropdown box.
Similarly, you can edit the email, phone, and name fields in this template. Once you’re done, you need to scroll down to the bottom of the page and then click on the Continue button.
Next, you can click on the Send Test to Airtable button to check the connection between WPForms and Airtable.
This will create a new contact with the test form entry in your Airtable account. You can confirm the same by going to your Airtable account.
If the new contact is created successfully, then you should return to the Zapier configuration wizard and click on the Finish button to complete the action setup process.
Finally, you need to click on the toggle box to turn it to ON. This will ensure that new contacts will be added to your Airtable account whenever someone submits the custom form.
You may also give a name of your choice to this Zap for future reference.
Congratulations! You have successfully created a custom Airtable form for your WordPress site. You can follow this step by step tutorial to create different types of custom Airtable forms.
If you liked this article, then you may also check out our guide on how to get an SMS text message from your WordPress form.