How to Add Contact Forms to a Static WordPress Site for Free

Sharing is caring!

Introduction

Here is How to Add Contact Forms to a Static WordPress. Last week I showed how to launch a fast static WordPress site using Local by Flywheel, Simply Static, GitHub, and Cloudflare Pages. In that guide, I also mentioned a key limitation: you can’t use contact forms. It’s a common frustration for people converting to static setups—no PHP, no backend, means no submission handling. But today, I’m going to fix that for you.

Add Contact Forms to a Static WordPress Site

Stick with me and by the end of this guide, your static site will support fully functional contact forms anywhere you place them—no dynamic backend needed.

Why Static WordPress Struggles with Forms

On standard WordPress, form submissions trigger PHP, email workflows, database entries, etc. None of that exists in a static setup. You’re only serving HTML files, so we need a workaround. That’s where Formspree comes in: a free tier (50 submissions/month) that connects any HTML form to your email—no special dev skills required.

Step-by-Step Overview

1. Create a free Formspree account and form.
2. Embed the form on your static WordPress page or post.
3. (Optional) Add custom CSS styling.
4. Regenerate static files and redeploy your site.
5. Test the form and confirm message delivery.

Register for a Formspree Account and Set Up Your Form

• Go to the Formspree website and sign up for the free plan.

• Confirm your email.
• In your Formspree dashboard, click Add New → New Form, choose a name (e.g. “Static Site Contact Form”), and enter your preferred recipient email.

• Click Create Form and copy the Form Endpoint (the part after f/). Keep this tab open—you’ll need the endpoint shortly.

Add the Form to Your Static Site

• Launch your local WordPress site in Local by Flywheel, then go to WP Admin.

• Open the post or page where you want the form.
• Insert a Custom HTML block via the block editor.
• Paste in this code (replacing YOUR_ENDPOINT with the endpoint from Formspree):

<form action="https://formspree.io/f/YOUR_ENDPOINT" method="POST">
  <label>Name: <input type="text" name="name"></label>
  <label>Email: <input type="email" name="email"></label>
  <label>Message: <textarea name="message"></textarea></label>
  <button type="submit">Submit</button>
</form>

Style the Form (Optional, but Recommended)

• Above the HTML block, insert another Custom HTML block.

• Paste in this CSS:

<style>
  form { max-width: 600px; margin: 0 auto; }
  label { display: block; font-weight: bold; margin-bottom: 5px; }
  input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; }
  button {
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover { background-color: #0052a3; }
</style>

• Feel free to adjust colors to match your site by grabbing hex codes (use a color‑picker tool) and replacing them in the CSS.

Enable reCAPTCHA (Highly Recommended)

• Go back to your Formspree dashboard → select your form → open Settings → Integration.
• Enable CAPTCHA/reCAPTCHA to reduce spam and bot submissions—it’s easy and effective.

Deploy Your Updated Page/Post

• After saving your work in WP Admin, use Simply Static to regenerate your static files.
• On your local machine, navigate to your static export folder (e.g. ~/Desktop/website-tools) and run your deployment script (like ./update-website.sh).

• Once deployment completes, load the live page and confirm the form appears as intended.

Test and Confirm

• Submit a test entry via the contact form.
• Ensure you receive the confirmation response from Formspree and check your email inbox to verify delivery.

Final Thoughts

It might feel limiting to use a static WordPress setup, but thanks to Formspree, you can enable contact forms quickly and easily. The free plan is perfect for personal blogs or low‑traffic sites.

Pro tip: For heavier traffic or richer customization, consider integrating Cloudflare Workers with an SMTP host like Zoho Mail—more technical to set up, but highly scalable. Let me know if you’d like a guide on that next.