Headless WordPress: using Contact Form 7 REST API with React

I started seeing more and more people choosing headless WordPress as a backend, being very creative and innovative with this rather archaic tool. In this series of articles, I want to cover what our old buddy has to offer in the heyday of the no-code (and low-code) culture.

“Headless WordPress” has been here for a while. You can even choose to use WordPress as a REST API server for your Gatsby site and here is a comprehensive article on Smashing Magazine, covering all the “whys” and “hows”.

In my article, I’m going to talk about WP’s capabilities in acting as a microservice, that handles form submissions from your static websites and landing pages.

Background

Starting with a brief overview, why the world is shifting towards static websites. It’s all about performance. When I built my first static landing page using Gatsby, published it, and went to PageSpeed Insights.

It was stunning to look at two green gauges, both for mobile and desktop performance. And all that with zero optimizations. Remembering the tremendous effort it took me when I tried to get there with my WP websites I decided to “go static” from now on.

But it comes with a cost. You need something to handle your form submissions, which is obviously not available out of the box with a static website. There is a number of solutions offered by various vendors, but none of them is easy to integrate nor free.

Luckily your old WP blog will come in handy. I stumbled upon this great article describing how to use Contact Form 7 REST API routes. This allows you to turn your old WordPress website of any kind into a real form-handling microservice with no code required.
Every form you create with CF7 (Contact Form 7) gives you a convenient REST API URL automatically. Like this one:
example.com/wp-json/contact-form-7/v1/contact-forms/123/feedback.
All you do is send a POST request, containing your form data. The coolest thing is that essentially you only need a single WP website to handle form submission requests from dozens of static sites and landing pages. Just create a new form for every one of those and here you go. You can manage recipients, email templates, and use any plugin from the CF7 ecosystem.

Using WP Contact Form 7 with your Gatsby website

Additionally, I prepared a React component for you to make it easy to use WP CF7 API endpoints with your Gatsby site. Let’s have an in-depth look at how to use it.

Copy cf7-form-wrapper.js to your React app src folder. Import it to your components folder and wrap your form component just like this:

<Cf7FormWrapper url=”http://example.com">
  <Form />
</Cf7FormWrapper>

Make sure to supply either siteUrl & formId or just url of your CF7 REST endpoint in Cf7FormWrapper attributes. At this point, you can already send API requests to your WP backend. But in order to make it more responsive, you want to inform your users about all stages your contact form goes through. With that purpose, Cf7FormWrapper provides three status indicators to your Form component:

1. isLoading
2. isSent
3. hasError

You may want to use them in the UI to enhance the user experience.

The full code could be found in the README.md of my React component.

Birthday photo created by pressfoto — www.freepik.com