From zero to form in 5 minutes on Shifter using WordPress and Formspree

Daniel Olson | May 31, 2019

For today’s countdown to WordCamp Europe, I gave myself 10 minutes to create a contact form on Shifter. It took me about 5 minutes. Here’s how.

Some background first. Contact forms plugins don’t work on Shifter by default. If they post data to the WordPress database when a user hits submit, they are not going to work.

This is because Shifter creates a completely static version of your WordPress site making it more secure and fast but you lose direct connectivity with the database because it’s not running.

For more info on why check out, the key features explained section in our docs or ask us. We’re happy to chat!

At any rate, we don’t need a form plugin to create a contact form in just a few minutes using WordPress and 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 even for static sites!

The setup is dead simple. For their free tier, you don’t even have to register. Just create a basic form and add the email you need to send it to. Once your email is validated you’re all set! You just created a static form using Shifter and WordPress.

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/contact-us/

Ready to take your site to the next level?

Shifter is the solution for fast, maintenance-free WordPress websites.