I Added A Contact Form To My WordPress Gatsby Site

A few weeks ago, I set up this site to play around with how a headless WordPress site with a decoupled Gatsby front-end works. Gatsby is a great static site generator, but the first thing I always hear when talking about static site generators is “what about forms?” LOL, Everyone loves static site generators until they need dynamic content.

I had attempted to get the contact form up before I posted here for the first time. Which, that was overly ambitious. I did add a MailChimp sign up form. So, points for that. I now have the contact page working. I am using the same WordPress site to process the form submissions as I am using as the CMS for the content. That was convenient, but does not have to be the case.

This is still a work in progress. This post is some quick thoughts on my progress so far.

Adding The Forms

Static Site Generators And Forms

With a dynamic site, such as a traditional WordPress site, the HTML that is sent to the browser is dynamically generated using PHP or node.js on a server for every visitor. Doing so requires having a database server available. Having a simple server that just sends back previously generated HTML, CSS and JavaScript is generally faster and because there is no need for the database to be online, security is enhanced.

Forms are just HTML and optionally JavaScript, so forms work just fine with an HTML site created with a static site generator such as Gatsby. But, without a server online to process the form, it does not do you much good.

We have a similar issue with content when using Gatsby. A “pure” JAMStack site would use content authored in markdown. That’s not a great solution for most sites. WordPress, or Drupal or Contentful can be used as the CMS for the Gatsby site. We can use the same server if we want. That’s what I did. That meant I could use my WordPress plugin Caldera Forms to process the form from Gatsby, which is great. Well, I got distracted by adding a REST API-endpoint to Caldera Forms for this purpose, but I am glad I did.

Caldera.js React Form Builder

I am working on a React form generator @calderajs/forms.The main reason, for now, I’m building this is for Caldera Forms Pro’s administrative interface. Creating contact forms and MailChimp forms is an experiment to see how I can re-use the same components to create front-end forms with React without having to write a ton of validation or conditional logic.

So a big part of this is that I’ve been largely responsible for Caldera Forms, a drag and drop form builder plugin for WordPress for awhile. The form builder and the forms it generates are built largely with jQuery, but I am starting to use some React. This contact form is a proof of concept for a version 2 form builder I’m working on. It uses the same basic form configuration as Caldera Forms 1.x, and provides multi-column forms with conditional logic.

Using Caldera Forms With Gatsby

This experiment uses the new Caldera Js form builder. I will provide a quick round down of how this works, if you want to try it. I’m not sure you should, yet, but it works for me.

I should add, this is way less cool and takes more work than I want it to. If you look in the source, the first 80 or so lines are recreating the form configuration in JavaScript. That should not be needed, I just have not finished a translator from the way things work in Caldera Forms now, to how this new framework works. Once I have that, it should be possible to just provide the API endpoint for the WordPress site and form ID. For now, this works, and everything is decoupled enough that the front-end has no hard dependency on WordPress.

Here is a quick overview, with some notes of the steps I took to set this up:

  • Install Caldera Forms on WordPress site, using the branch feature/3134.
  • Create a contact form and make not of the form IDs for each field.
    • Alternatively, I made a plugin that adds the contact form, using a hardcoded PHP array for the form configuration, which makes version controlling the form configuration easier. It also means you can not edit it with the drag and drop editor.
  • Add @calderajs/forms to your Gatsby site
    • yarn add @calderajs/forms
  • Create a “Contact Form” component in Gatsby site and add a form using the right abstraction — `CF2Form`
    • Here is how I did it. I will document this more as I complete the component. The important part is that the field IDs are the same in the form configuration object and the form saved in WordPress.
  • Add a page called “contact” on the WordPress site.
    • The contact page is empty for now.
  • In my page template, I used conditional logic to check if the page slug was “contact”. If that is true, I show the ContactForm component instead of the page content.

There Are A Lot Of Options

I have this working now, for the most part. I need to figure out if I want to hook what I have to Caldera Forms’ processors and email notifications — the branch I’m using for form processing just saves the entry. Alternatively, I could use Caldera Forms Pro or other APIs. I will be sure to write more about that as I go.

Of course, just because the content is being authored in WordPress does not mean the form builder or form processor has to be a WordPress site. I’m just curious if using what I have, compared to building something totally new — for this exact purpose makes sense or not.

This is all unclear to me right now. I’ll end with some notes on other options.

Other Approaches For Processing Forms From A Gatsby Site

  • Submit the form directly to a 3rd-party service
    • This is what I did for the MailChimp sign up form that appears at the end of each post. I am working on Caldera Forms MailChimp 2.0 next — using the same components as this contact form — so I will have more thoughts about this soon.
    • Here is the source for my Gatsby MailChimp form.
  • Submit the form to a Serverless function.
    • I really like this idea. I’ve been watching and experimenting with stdLib. I love their concept of Serverless APIs as a service. I will experiment more.

Be Notified When New Posts Are Published

A Caldera Form Will Replace This Form Soon