In the world of information exchange, nerds and nitwits love Reddit alike. The popularity of Reddit is not only because of being an infinite source of user-generated content for pretty much every field of human knowledge but also for the fact that Reddit manages spam, unlike any other social media channels.
The prominence of Reddit is apparent with its sheer number of users who not only access informative content by visiting the site but also extract that info to be used with another source. To do so, Reddit offers an API that can be used to pull subreddit data of posts, comments, media, and votes. Though it sounds like a great idea, often there are challenges to convert the API skeleton into a full-fledged data churning machine. This is usually because using the Reddit API requires decent technical development skills before actually starting to use it for data extraction.
The best way to learn is to build. Let’s learn about this hot new buzzword, Jamstack, by building a site with React, Netlify (Serverless) Functions, and Airtable. One of the ingredients of Jamstack is static hosting, but that doesn’t mean everything on the site has to be static. In fact, we’re going to build an app with full-on CRUD capability, just like a tutorial for any web technology with more traditional server-side access might.
Why these technologies, you ask?
You might already know this, but the “JAM” in Jamstack stands for JavaScript, APIs, and Markup. These technologies individually are not new, so the Jamstack is really just a new and creative way to combine them. You can read more about it over at the Jamstack site.
One of the most important benefits of Jamstack is ease of deployment and hosting, which heavily influence the technologies we are using. By incorporating Netlify Functions (for backend CRUD operations with Airtable), we will be able to deploy our full-stack application to Netlify. The simplicity of this process is the beauty of the Jamstack.
As far as the database, I chose Airtable because I wanted something that was easy to get started with. I also didn’t want to get bogged down in technical database details, so Airtable fits perfectly. Here’s a few of the benefits of Airtable:
You don’t have to deploy or host a database yourself
It comes with an Excel-like GUI for viewing and editing data
There’s a nice JavaScript SDK
What we’re building
For context going forward, we are going to build an app where you can use to track online courses that you want to take. Personally, I take lots of online courses, and sometimes it’s hard to keep up with the ones in my backlog. This app will let track those courses, similar to a Netflix queue.
One of the reasons I take lots of online courses is because I make courses. In fact, I have a new one available where you can learn how to build secure and production-ready Jamstack applications using React and Netlify (Serverless) Functions. We’ll cover authentication, data storage in Airtable, Styled Components, Continuous Integration with Netlify, and more! Check it out →
Airtable setup
Let me start by clarifying that Airtable calls their databases “bases.” So, to get started with Airtable, we’ll need to do a couple of things.
Next, let’s create a new database. We’ll log into Airtable, click on “Add a Base” and choose the “Start From Scratch” option. I named my new base “JAMstack Demos” so that I can use it for different projects in the future.
Next, let’s click on the base to open it.
You’ll notice that this looks very similar to an Excel or Google Sheets document. This is really nice for being able tower with data right inside of the dashboard. There are few columns already created, but we add our own. Here are the columns we need and their types:
name (single line text)
link (single line text)
tags (multiple select)
purchased (checkbox)
We should add a few tags to the tags column while we’re at it. I added “node,” “react,” “jamstack,” and “javascript” as a start. Feel free to add any tags that make sense for the types of classes you might be interested in.
I also added a few rows of data in the name column based on my favorite online courses:
The last thing to do is rename the table itself. It’s called “Table 1” by default. I renamed it to “courses” instead.
Locating Airtable credentials
Before we get into writing code, there are a couple of pieces of information we need to get from Airtable. The first is your API Key. The easiest way to get this is to go your account page and look in the “Overview” section.
Next, we need the ID of the base we just created. I would recommend heading to the Airtable API page because you’ll see a list of your bases. Click on the base you just created, and you should see the base ID listed. The documentation for the Airtable API is really handy and has more detailed instructions for find the ID of a base.
Lastly, we need the table’s name. Again, I named mine “courses” but use whatever you named yours if it’s different.
Project setup
To help speed things along, I’ve created a starter project for us in the main repository. You’ll need to do a few things to follow along from here:
Check out the starter branch with git checkout starter
There are lots of files already there. The majority of the files come from a standard create-react-app application with a few exceptions. There is also a functions directory which will host all of our serverless functions. Lastly, there’s a netlify.toml configuration file that tells Netlify where our serverless functions live. Also in this config is a redirect that simplifies the path we use to call our functions. More on this soon.
The last piece of the setup is to incorporate environment variables that we can use in our serverless functions. To do this install the dotenv package.
npm install dotenv
Then, create a .env file in the root of the repository with the following. Make sure to use your own API key, base ID, and table name that you found earlier.
To create serverless functions with Netlify, we need to create a JavaScript file inside of our /functions directory. There are already some files included in this starter directory. Let’s look in the courses.js file first.
The core part of a serverless function is the exports.handler function. This is where we handle the incoming request and respond to it. In this case, we are accepting an event parameter which we will use in just a moment.
We are returning a call inside the handler to the formattedReturn function, which makes it a bit simpler to return a status and body data. Here’s what that function looks like for reference.
Notice also that we are importing several helper functions to handle the interaction with Airtable. We can decide which one of these to call based on the HTTP method of the incoming request.
HTTP GET → getCourses
HTTP POST → createCourse
HTTP PUT → updateCourse
HTTP DELETE → deleteCourse
Let’s update this function to call the appropriate helper function based on the HTTP method in the event parameter. If the request doesn’t match one of the methods we are expecting, we can return a 405 status code (method not allowed).
Since we are going to be interacting with Airtable in each of the different helper files, let’s configure it once and reuse it. Open the airtable.js file.
In this file, we want to get a reference to the courses table we created earlier. To do that, we create a reference to our Airtable base using the API key and the base ID. Then, we use the base to get a reference to the table and export it.
require('dotenv').config();
var Airtable = require('airtable');
var base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(
process.env.AIRTABLE_BASE_ID
);
const table = base(process.env.AIRTABLE_TABLE_NAME);
module.exports = { table };
Getting courses
With the Airtable config in place, we can now open up the getCourses.js file and retrieve courses from our table by calling table.select().firstPage(). The Airtable API uses pagination so, in this case, we are specifying that we want the first page of records (which is 20 records by default).
Airtable returns back a lot of extra information in its records. I prefer to simplify these records with only the record ID and the values for each of the table columns we created above. These values are found in the fields property. To do this, I used the an Array map to format the data the way I want.
How do we test this out? Well, the netlify-cli provides us a netlify dev command to run our serverless functions (and our front-end) locally. First, install the CLI:
npm install -g netlify-cli
Then, run the netlify dev command inside of the directory.
This beautiful command does a few things for us:
Runs the serverless functions
Runs a web server for your site
Creates a proxy for front end and serverless functions to talk to each other on Port 8888.
Let’s open up the following URL to see if this works:
We are able to use /api/* for our API because of the redirect configuration in the netlify.toml file.
If successful, we should see our data displayed in the browser.
Creating courses
Let’s add the functionality to create a course by opening up the createCourse.js file. We need to grab the properties from the incoming POST body and use them to create a new record by calling table.create().
The incoming event.body comes in a regular string which means we need to parse it to get a JavaScript object.
const fields = JSON.parse(event.body);
Then, we use those fields to create a new course. Notice that the create() function accepts an array which allows us to create multiple records at once.
Since we can’t perform a POST, PUT, or DELETE directly in the browser web address (like we did for the GET), we need to use a separate tool for testing our endpoints from now on. I prefer Postman, but I’ve heard good things about Insomnia as well.
Inside of Postman, I need the following configuration.
url: localhost:8888/api/courses
method: POST
body: JSON object with name, link, and tags
After running the request, we should see the new course record is returned.
We can also check the Airtable GUI to see the new record.
Tip: Copy and paste the ID from the new record to use in the next two functions.
Updating courses
Now, let’s turn to updating an existing course. From the incoming request body, we need the id of the record as well as the other field values.
We can specifically grab the id value using object destructuring, like so:
const {id} = JSON.parse(event.body);
Then, we can use the spread operator to grab the rest of the values and assign it to a variable called fields:
const {id, ...fields} = JSON.parse(event.body);
From there, we call the update() function which takes an array of objects (each with an id and fields property) to be updated:
To test this out, we’ll turn back to Postman for the PUT request:
url: localhost:8888/api/courses
method: PUT
body: JSON object with id (the id from the course we just created) and the fields we want to update (name, link, and tags)
I decided to append “Updated!!!” to the name of a course once it’s been updated.
We can also see the change in the Airtable GUI.
Deleting courses
Lastly, we need to add delete functionality. Open the deleteCourse.js file. We will need to get the id from the request body and use it to call the destroy() function.
Here’s the configuration for the Delete request in Postman.
url: localhost:8888/api/courses
method: PUT
body: JSON object with an id (the same id from the course we just updated)
And, of course, we can double-check that the record was removed by looking at the Airtable GUI.
Displaying a list of courses in React
Whew, we have built our entire back end! Now, let’s move on to the front end. The majority of the code is already written. We just need to write the parts that interact with our serverless functions. Let’s start by displaying a list of courses.
Open the App.js file and find the loadCourses function. Inside, we need to make a call to our serverless function to retrieve the list of courses. For this app, we are going to make an HTTP request using fetch, which is built right in.
Thanks to the netlify dev command, we can make our request using a relative path to the endpoint. The beautiful thing is that this means we don’t need to make any changes after deploying our application!
const res = await fetch('/api/courses');
const courses = await res.json();
Then, store the list of courses in the courses state variable.
Open up localhost:8888 in the browser and we should our list of courses.
Adding courses in React
Now that we have the ability to view our courses, we need the functionality to create new courses. Open up the CourseForm.js file and look for the submitCourse function. Here, we’ll need to make a POST request to the API and send the inputs from the form in the body.
The JavaScript Fetch API makes GET requests by default, so to send a POST, we need to pass a configuration object with the request. This options object will have these two properties.
Test this out in the browser. Fill in the form and submit it.
After submitting the form, the form should be reset, and the list of courses should update with the newly added course.
Updating purchased courses in React
The list of courses is split into two different sections: one with courses that have been purchased and one with courses that haven’t been purchased. We can add the functionality to mark a course “purchased” so it appears in the right section. To do this, we’ll send a PUT request to the API.
Open the Course.js file and look for the markCoursePurchased function. In here, we’ll make the PUT request and include both the id of the course as well as the properties of the course with the purchased property set to true. We can do this by passing in all of the properties of the course with the spread operator and then overriding the purchased property to be true.
To test this out, click the button to mark one of the courses as purchased and the list of courses should update to display the course in the purchased section.
Deleting courses in React
And, following with our CRUD model, we will add the ability to delete courses. To do this, locate the deleteCourse function in the Course.js file we just edited. We will need to make a DELETE request to the API and pass along the id of the course we want to delete.
To test this out, click the “Delete” button next to the course and the course should disappear from the list. We can also verify it is gone completely by checking the Airtable dashboard.
Deploying to Netlify
Now, that we have all of the CRUD functionality we need on the front and back end, it’s time to deploy this thing to Netlify. Hopefully, you’re as excited as I am about now easy this is. Just make sure everything is pushed up to GitHub before we move into deployment.
If you don’t have a Netlify, account, you’ll need to create one (like Airtable, it’s free). Then, in the dashboard, click the “New site from Git” option. Select GitHub, authenticate it, then select the project repo.
Next, we need to tell Netlify which branch to deploy from. We have two options here.
Use the starter branch that we’ve been working in
Choose the master branch with the final version of the code
For now, I would choose the starter branch to ensure that the code works. Then, we need to choose a command that builds the app and the publish directory that serves it.
Build command: npm run build
Publish directory: build
Netlify recently shipped an update that treats React warnings as errors during the build proces. which may cause the build to fail. I have updated the build command to CI = npm run build to account for this.
Lastly, click on the “Show Advanced” button, and add the environment variables. These should be exactly as they were in the local .env that we created.
The site should automatically start building.
We can click on the “Deploys” tab in Netlify tab and track the build progress, although it does go pretty fast. When it is complete, our shiny new app is deployed for the world can see!
Welcome to the Jamstack!
The Jamstack is a fun new place to be. I love it because it makes building and hosting fully-functional, full-stack applications like this pretty trivial. I love that Jamstack makes us mighty, all-powerful front-end developers!
I hope you see the same power and ease with the combination of technology we used here. Again, Jamstack doesn’t require that we use Airtable, React or Netlify, but we can, and they’re all freely available and easy to set up. Check out Chris’ serverless site for a whole slew of other services, resources, and ideas for working in the Jamstack. And feel free to drop questions and feedback in the comments here!
Do you want to make a custom Airtable form for your WordPress site?
Airtable is a data management tool that lets you create your own custom data-driven apps. Basically, you can collect data with a form on your website and use it to make spreadsheets, contact lists, booking calendars, and more.
In this article, we will show you how to create a custom Airtable form in WordPress.
Why Create a Custom Airtable Form in WordPress?
Airtable is a data management tool that allows you to create custom data-driven apps. That way, you can better visualize the data collected on your website using WordPress forms.
For instance, you can use your WordPress contact form data in Airtable as a CRM (Customer Relationship Management) tool to manage leads and contacts captured by your WordPress forms.
You can also store data from user surveys on Airtable.
Here are a few other use cases for using Airtable in WordPress:
Organize tasks by project, assign responsibilities, and use Kanban views to visualize project progress.
Create a content calendar for content pieces, track publication dates, and assign writers and edits to increase your blog traffic.
Maintain a database of inventory items to track quantities for your online store.
Basically, you can use data collected from your WordPress contact forms in Airtable to create custom apps, workflows, and tools for your business.
That being said, let’s take a look at how to easily create a custom Airtable form in WordPress.
How to Create a Custom Airtable Form in WordPress
To create our custom Airtable form in WordPress, we will first make a contact form using WPForms.
It is the best WordPress form builder plugin on the market and allows you to create any kind of form easily using a simple drag-and-drop interface.
After that, we will connect our form to Airtable by using a service called Zapier.
Zapier works as a bridge to connect two different apps without any code. You can use it with dozens of online apps, including WPForms and Airtable.
Note: You will need the Pro version or higher to access the Zapier addon for WPForms.
Upon activation, you need to go to the WPForms » Settings page.
Under the ‘General’ tab, enter the license key from your account on the WPForms website and hit ‘Verify Key.’
Next, you need to visit the WPForms » Add New page in your WordPress dashboard. This will launch the WPForms builder interface, where you can choose from over 1200 pre-built templates.
Make sure to give your form a name so you can easily refer back to it.
For the sake of this tutorial, we will be using the ‘Simple Contact Form.’
Go ahead and click on ‘Use Template.’
From here, you’ll be taken to the drag-and-drop editor, where you can easily customize the form.
Let’s say we are creating a contact form to collect leads from B2B prospects. In this case, we will want to add ‘Company’ and ‘Phone Number’ to our contact form.
To add the Company, you need to add a ‘Single Line Text’ item, then click on the element and rename the field to ‘Company.’
If you want prospects to provide their phone number, just drag the field option ‘Phone’ onto the editor.
Once you’ve set up your form, you need to add it to your WordPress website.
Simply hit the ‘Embed’ button up top.
You can choose to embed the contact form on an existing page or a new page.
In this case, we will pick ‘Select Existing Page.’
Choose any page you’d like and select the ‘Let’s Go!’ button.
This will take you to the WordPress editor of that page.
All you have to do is hit the ‘+’ button in the top left corner.
Then, find and select the WForms widget to add it to your page.
From here, you can choose the contact form you’ve just created.
That will automatically embed the form into your page.
Next up, make sure to hit the ‘Update’ button up top.
Now, your form should be added to your WordPress page.
After you have added your form to your website, go ahead and create a test entry. This will be used to set up and check the connection between WPForms and Airtable.
Here’s our test entry, with name, email, phone, company name, and a message:
Activate the Zapier Addon for WPForms
We will be using Zapier to build a bridge between WPForms and Airtable. To do that, you need to install and activate the WPForms Zapier Addon.
In your WordPress dashboard, go to the WPForms » Addons page and find the Zapier addon. Then, go ahead and install and activate it.
Now, you need to go to the WPForms » Settings.
On the ‘Integrations’ page, simply click on the Zapier logo here, and you will get your Zapier API key. You need this to connect Zapier to your WPForms account.
Copy the API key somewhere safe or keep this tab open, as you will need it in the later step.
Set Up a Base and Table in Airtable
Next, we need to create a base in Airtable to store all of the information that we collect from our contact form.
If you are new to Airtable, then there’s a chance that you may not know how to set up a base and table.
First off, the base is the top-level database used to organize and store information. A table in Airtable is similar to a sheet in a spreadsheet.
Once you’ve created an account on Airtable, go ahead and click the ‘Start from scratch’ option in your home dashboard.
If you have an existing spreadsheet that you want to migrate over to Airtable, then just click the ‘Quickly upload’ option.
Go ahead and name your base and table.
We’ve decided to name our base ‘Sales CRM’ and the table ‘Contacts.’
Then, change the top column labels to match the form fields you’ve just created in WPForms.
In this case, we added a label for Name, Company, Email, and Phone.
Keep this tab open, as we will refer back to it later to check whether our WordPress automation works.
Create a Personal Access Token
Now, you need to prepare Airtable to connect with WPForms via Zapier. To do that, you need a personal access token to connect Airtable with Zapier.
Simply navigate to Airtable and click the ‘Account’ button under your profile logo.
A personal access token lets you create multiple tokens that provide access to the information held in your Airtable databases.
In the ‘Overview’ tab, go ahead and click the ‘Go to developer hub’ button.
You’ll be taken to the developer hub, where you can create tokens to connect with your Airtable data.
Under the ‘Personal access tokens’ tab, click the ‘Create token’ button.
From here, you will be required to fill in important information. First, you need to name the token so that you can easily refer to it later if you want to edit the permissions.
Under ‘Scopes,’ you must select what users can do when given access to this token. In this case, we will select the option that says, ‘data.records:write,’ so that users can create, edit, and delete records.
Once that is done, just click on the ‘Create token’ button.
A popup will appear telling you that your token has been created. Just copy it and keep it somewhere safe.
We will be adding this token to Zapier so that we can connect our Airtable database to WordPress.
Make Your Zap to Send Data From Your Website Form to Airtable
Next, go to the Zapier website. Here, you need to create a free account or sign in to your existing account.
In your Zapier dashboard, click the ‘Create a Zap’ button on the top-left to start the configuration wizard.
Note: In Zapier, a ‘zap’ is a process with a trigger and an action. Our trigger will be someone filling in the form, and our action will be to create a record in Airtable.
At the top of the screen, you need to give your zap a name, and then you can set up the trigger.
Scroll down and click on the ‘Trigger’ box.
Next, you will want to find and select the WPForms app to start the trigger.
In the ‘Choose App & Event’ box, type ‘WPForms’ into the search bar.
After that, simply click on the WPForms icon that comes up.
A sidebar window will appear on the right of your screen. Under Event, choose ‘New Form Entry’ as the trigger to initiate the action.
Then, simply hit the ‘Continue’ button.
Next, you will need to click the ‘Sign In’ button to log in to your WPForms account.
This allows Zapier to grab all of the new form entry data and insert it into your Airtable.
A pop-up window will appear.
You will need to enter the API key that you generated earlier, plus the URL (domain name) of your website.
Once you’ve done that, click on the ‘Continue’ button to move on.
Next, you will be asked to select the form you created earlier from the dropdown list.
Once you’ve selected the contact form, go ahead and select ‘Continue.’
The ‘Refresh fields’ button lets you reload the data to reflect the most recent form entries.
Next, click on the ‘Test trigger’ button.
Zapier will find your most recent entry, which will confirm whether the trigger is set up correctly.
You should then see a message telling you that Zapier found a test entry.
The data from your form entry will be shown on the screen:
Click the ‘Continue with selected record’ button to carry on. You are now in the Action part of the Zap, where you need to choose your second app.
Simply type ‘Airtable’ into the dropdown to find the app. Then click on the Airtable widget.
Once Airtable is connected to your zap, you will see the dropdown for choosing an action event.
The action event is simply what you want to happen when someone completes the form on your site. You need to select ‘Create Record’ here.
Then, hit the ‘Continue’ button.
Now, Zapier will prompt you to sign in to Airtable.
Simply click the ‘Sign In’ button and then log in.
A new window will appear telling you that Zapier is requesting Airtable access. Essentially, this allows Zapier to automatically send your form entry data into the created fields in your Airtable.
All you need to do is click the ‘+ Add a base’ link. Then, choose which workspaces you want to give Zapier access to. If you don’t have a preference, then just click the option that says, ‘All current and future bases in all current and future workspaces.’
Then, once selected, go ahead and click on the ‘Grant access’ button.
Now, you will see a ‘Continue’ button.
Just click this to carry on making your zap.
Under the Action tab, you’ll need to first add your ‘Base’ and ‘Table’ from the given dropdown menus.
We are going to use our Sales CRM as the base and add our new contacts to the Contacts table.
Also, you need to tell Zapier which fields from your WPForms form should correspond to the columns in your Airtable table.
For all the applicable fields, simply select the correct field using your test data. It should look something like this:
Then, click the ‘Continue’ button to keep going.
Zapier will now prompt you to send a test record to Airtable using your test data.
You will see a preview of the data. Simply click on ‘Test step.’
This will send the test data to your chosen table in Airtable, creating a new record.
Go ahead and review the preview record to check the information is correct.
You may want to double-check that the record has been correctly added to Airtable.
It’s a good idea to check that the data went through to your Airtable base and that the information was entered correctly into the proper fields.
Now, head back over to Zapier.
You simply need to click the ‘Publish’ button to finish creating your zap.
Give it a few seconds for the Zap to publish.
At the top of your screen, you should see an ‘On’ button, indicating the Zap is live.
Also, if you ever need to edit the Zap, such as changing which table or fields to send your form entry to, you can always find your Zap on the home dashboard of Zapier.
Just click on the title of the Zap to edit it.
Your zap is now running. All form entries through your connected form will be added to the Airtable table that you selected.
Bonus: How to Send SMS Messages to Your Leads
If you found this integration helpful, then you may want to also send SMS notifications to people who have completed your contact form.
This is a great way of keeping them up to date with the status of their request.
For example, let’s say you have prospects who visit your landing page and then complete your form, indicating interest in your services. While the form data is entered into an Airtable, you will want another connection that automatically sends SMS messages to your leads so they know what to expect from you.
The best option is to use Brevo, which is an email marketing service that also lets you send SMS messages to your leads.
With this software, you will be able to import your contacts and then send text message campaigns. For more information, just follow our tutorial on how to send SMS messages to your WordPress users.