Check out the original post from our blog on using Formspree, Shifter, and WordPress here.

For this demo, I’ll be using Formspree.

Formspree is a forms-as-a-service provider. As they say, they are perfect for static sites and we agree. It passes along form submissions to their intended destination like any normal form but they offer a lot more too.

Need help with spam or a place to view your form submissions? Need complex routing? All of this is possible using Formspree.

The setup is dead simple. Using the Formspree free tier, it does not require an account. You only need to validate your email before sending your form into production.

Here’s a step by step guide:

Create a new site on Shifter or use an existing site. I created a site just for this demo called Formspree demo.

After we automatically install WordPress login using our passwordless login feature (which still amazes me) and create a new page. I decided to call my page, Contact Us for obvious reasons.

Now it gets interesting. Gutenberg, the new editor for WordPress has a new block element. You can edit HTML directly inside of WordPress with formatting too! It’s super helpful and I’m very pleased with this feature.

Now, head over to formspree.io and copy their getting started code direct from the home page and paste that code into your newly created HTML block.

For this demo, I got a bit fancy and added additional fields to this form. It’s also worth mentioning that a customer needed some support using forms so I was more than willing to set that up for them.

You can find the form I used for this demo over on GitHub since I’ve open sourced it.

Form Demo HTML

Next, and this important, you will need to update the email address to send this form to. For the demo, it is just an example email address.

This is the line you need to edit.

action="https://formspree.io/email@domain.tld"

Once you have added your email address save the page and generate a new artifact. This will create a static version of your WordPress site complete with the form added to the newly created Contact Us page.

And here we have it!

Now our form is ready for validation. We can’t just put any email address in the form, we also need to verify we own it. So if you submit a test to the form it will redirect you to the Formspree page. This will trigger a verification email to the email address you added.

Check your email and you’ll see that it’s arrived. Open it and follow the activation link. After that, your site is ready to go. You can now use Formspree to receive emails from your static WordPress site.

Does it offer spam protection? Yes! It includes protection from spam and can honeypot bots and do a whole bunch more. You can even use it at scale with a paid plan and get more features too.

Expect more from us on Formspree. They are a great company doing interesting things.

As always, let us know what you think!

PS: You can find our demo form here.

https://ecstatic-bartik2936.on.getshifter.io

Did this answer your question?