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

Stick with me to the end and I promise that your static WordPress site will have fully functional contact forms sprinkled wherever you want them. If that sounds good to you, then let’s get started.

How to add contact forms to static WordPress sites 🧾

On a regular WordPress site, when someone submits a form, PHP intercepts the submission, processes it, stores data in your database and/or sends emails through your server. Your static site has none of these capabilities – it’s just files being served to browsers.

This means we need to get around the “traditional” way that forms function.

I’m going to show you how to do it using Formspree, which works with any email address (e.g., Yahoo, Gmail) and requires very little technical setup beyond copying some HTML code and mildly tweaking it. Formspree also has a generous free plan that gives you up to 50 submissions monthly, which makes it perfect for small blogs or low-to-mid volume businesses.

To give you an idea of what’s involved here, the main steps are as follows:

• Register for a Formspree account.
• Create your first form.
• Add the form to a page or post on your static site.
• Customize the form with some CSS.
• Re-export your static site files to your hard drive.
• Redeploy your site with the form added.

Register for a Formspree account and create your form

To begin, head to the Formspree website and open a new (free) account.

After you confirm your email and finish the sign up process, go to the Formspree dashboard and click on Add New → New Form:

In the popup window, give your form a name. For this example, I named it Static Site Contact Form. Then write the email address where you want your emails to be sent after your site visitors submit the form:

After you click the Create Form button, you’ll be shown a screen that gives you a Form Endpoint:

There will be a code example and other options there. Ignore everything for now but keep this tab in your browser open. We’re going to come back to this shortly.

Add the Formspree form to your static site

The next step is to add the form to your static site. For this you’ll need to return to your local WordPress installation. If you followed my tutorial to launch your static site, this means going back into Local by Flywheel and clicking on the WP Admin button:

Go to the page or post where you’d like to add your contact form and then do the following:

1. Find where on the page you want the form to be.
2. Click + in the block editor and type HTML in the block search window.
3. When the Custom HTML block comes up, click on it to insert it into the page.
4. Copy the code below to your clipboard and then paste it into that Custom HTML block.

<form
  action="https://formspree.io/f/REPLACE_WITH_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>
  <!-- your other form fields go here -->
  <button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)

5. Go back to the Formspree tab in your browser and copy only the form endpoint to your clipboard. Not the entire URL – just the endpoint that comes after the f/. Replace the placeholder in the HTML code (where it says REPLACE_WITH_YOUR_ENDPOINT) with the endpoint you copied from Formspree.

6. The next step is to insert another Custom HTML block into your post. Add it directly above the existing block and paste in the following CSS code:

<style>
#contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0052a3;
}
</style>Code language: HTML, XML (xml)

The CSS will give your form an aesthetic look. If your site has a certain color scheme, you can also tweak the code to make it match.

Even if you don’t come from a coding background, CSS is fairly intuitive so this isn’t too difficult to do. For example, if you wanted to adjust the color of the button, you’d modify this part of the code:

button {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}Code language: CSS (css)

If you’re not sure which specific colors your website is using, you can do the following:

• Screenshot some part of your site that contains the colors you’d like to replicate for the form.
• Upload that screenshot to a free tool like image color picker and it’ll identify the six digit hex codes (e.g., #0066cc in the current version of the background color field) of the colors for you.
• Copy them and substitute them into the code to make your edits. You can replace the color with hex code in the fields that have written color words too (e.g., change white to #faf0e6).

When you finish, preview what the form will look like on the frontend of your site:

If you’re satisfied, save your work!

⚠️ Recommendation: Although not required, I recommend turning on reCAPTCHA for your contact form. It helps prevent spam submissions and Formspree makes it too easy not to take advantage of it.

Just go back to the screen where you copied the form endpoint. The endpoint is on the Integration part of the menu. Tap on Settings and then scroll down until you see CAPTCHA. Toggle it on and you’re good to go.

The next step is to push your updated page/post with the form to your live site.

Deploy your page or post with the contact form added

Assuming you followed my tutorial on setting up your static site, it means you’re going to regenerate your static files using the Simply Static plugin:

Then do the following:

cd ~/Desktop/website-toolsCode language: JavaScript (javascript)

./update-website.sh

✋🤔 If this is confusing to you or you need more context, head over to the static WordPress site tutorial and then come back here after.

After you execute the script, wait a few minutes and check your live site to make sure the form was properly added. Then test your form to make sure it works. If everything goes smoothly, you’ll get a confirmation message:

Also check your inbox to ensure that the delivery side of things is working properly:

If everything looks good, then you’re all set!

Where there’s a will, there’s a way 💪🏻

Not being able to add contact forms to a static WordPress site by default might be frustrating at first, but thankfully there are some workarounds to get the job done. For simple blogs or small-to-medium volume businesses, using the free Formspree plan is arguably the best option for solving this common static site issue.

For more complex needs, an alternate approach is to use Cloudflare Workers combined with an email hosting provider like Zoho Mail. I didn’t cover that here because it’s significantly more intensive, but if you’re interested in it, drop a comment below and let me know. Perhaps I’ll update this tutorial or write another one that focuses on this method.

💡 You might also be interested in my follow-up guide on how to add search functionality to a static WordPress site (also for free).

Have you implemented contact forms on your static site? Share your experience below.