Something happened today that I feel really good about. I wrote some software and, for the first time in my life, it worked on the first try. I can only guess this happened for a few reasons
First, I’ve been sitting on this idea for a while now, working through how I wanted to build this plugin and how it could be more simple during that time.
Second, Developer tools in 2020 (yay we all made to 2020!) are becoming so incredibly helpful.
Third, Launching and deploying sites with Shifter such a breeze.
For reference, I started working on this at 2 pm today. I’m drafting this blog post at 3:50 pm on the same day. During this brief time, I created a plugin called Shifter Netlify Forms, pushed that to GitHub as an open-source project, launched a new WordPress site on Shifter, connected that site to Netlify, and ultimately deployed the finished static site to Netlify.
The demo site I created today was to test an idea for how WordPress sites can begin to use Netlify forms. Using Shifter you can now host a WordPress site, create a static site using our generator, automatically deploy that site to Netlify, and begin collecting form submissions using the new Shifter Netlify Forms plugin.
A Quick Disclaimer
This plugin in beta. It was created less than an hour ago and has minimal testing but it’s simple enough that I would still use it in production but that’s just me. If you find this plugin could be helpful, test it out and let us know what you think. I’m looking for your feedback so we can improve it.
Also, at the time of this writing, this plugin only supports Gravity Forms. Why? A customer reached out to us and I realized this idea that I had been waiting to work on was a perfect fit. For them, Gravity Forms is their current form plugin of choice so building for that use was a natural fit. The way the plugin is built it can easily be scaled out to other plugins.
Building the Shifter Netlify Forms Plugin
The way this plugin works is by modifying the original form HTML to what Netlify Forms prefers. For example, using Netlify Forms only requires adding
data-netlify="true" to the
<form> tag. It’s as simple as that.
Gravity Forms a rich library of options to modify the output of your form HTML. For example, you can add, remove, or modify existing form attributes such as the action, method, or any other attribute you need. For this test to work, we first would need to modify or remove the action attribute.
The native way Gravity Forms works is when a site visitor hits that submit button on your form it sends all that form data back into WordPress. The way it does this is by the using action URL.
When you’re working with a static site, posting data back to a PHP file isn’t going to work out because there is no PHP. As John Cena would put it, you can’t see me.
In the past, we’ve proposed solutions to post data to other sources. Like a webhook set up with IFTTT or Zapier. This is completely doable and a solid option but in this case, we’re using Netlify Forms which does not require a custom webhook URL. It’s a no-config option which keeps the setup simple. You just need to add “netlify” to the form tag.
Pointing to a specific webhook requires more configuration options within WordPress itself and it comes with a few questions. Do all forms go to the same webhook? Do we need to customize each webhook endpoint? It can get complicated. I know because I started writing a plugin that does this and it’s still in development.
The Shifter Netlify Forms add that attribute, removes the original action attribute, and add a new one for the form name. Adding the form name attribute is just a helpful way to label the form submissions when they are received in Netlify.
For code examples of how Shifter Netlify Forms is built check out the repository on GitHub.
Setting up Shifter Netlify Forms
First, for the setup of this demo site, I created a new site on Shifter, installed Gravity Forms and the Shifter Netlify Forms helper plugin, and created a static site. Once I was able to confirm the build worked, I then created a site on Netlify. Using the deploy build hooks I created a new hook and copied that URL back into the Shifter Dashboard.
Webhooks are available on Shifter for any Tier 2 or higher plans. The webhook feature sends a notification to any URL you add. In this case, when the static WordPress site build is complete it notifies Netlify that it’s complete and Netlify pulls down the static site files.
Deploying to Netlify is not a native feature of Netlify. We created a custom script for this. It can be copied and pasted into a Netlify project or you can clone and deploy the repo using git as a deploy option.
For a step by step guide on how to do that check out our guides. We won’t cover all the details of how in this post.
Once your site is deployed to Netlify it auto-magically recognizes any form using the Netlify tag attribute. Cool, right? When my build was finished I got an alert email saying I’m now using Netlify forms and it was ready to begin accepting submissions.
It’s also worth noticing that Netlify Forms starts on a free tier offering 100 form entries. If you need support for more they do offer paid tiers beyond that. For this example we are using their free tier.
Accepting Netlify Forms Submissions
With my demo site launched on Netlify, I ran a test submission and voila, the entry appeared in the Netlify dashboard. The form name was there since we added it as a feature of the plugin, it captured the form fields, even the hidden ones.
For this site, there is only this one form but I assume if we have many forms they would all be listed here.
As for the form fields, this is what it looks like when you have a form submission. Take note of the very important and serious messages that await me!
If you have feedback, questions, or comments, please send them our way. We’d love to hear what you think and how we can improve this. If you had trouble setting this up we can help with that too.