how to create a working contact form on jekyll after migrating from wordpress

Why your contact form stops working after moving to Jekyll

When migrating from WordPress to Jekyll, one of the first things you’ll notice is that your contact form no longer works. WordPress plugins like WPForms, Contact Form 7, or Ninja Forms rely on PHP and server-side scripts—something Jekyll, being a static site generator, simply doesn’t support. But just because Jekyll is static doesn’t mean you can’t have dynamic features. Let’s walk through how to set up fully functional contact forms on your new static site.

What are the main options for adding forms to Jekyll?

There are several approaches to implement forms in Jekyll without a backend. The most popular include:

• Formspree: Plug-and-play service with a generous free tier. Simple HTML integration.
• Netlify Forms: Native to Netlify-hosted sites. Supports form detection during build.
• Getform, Basin, Formspark: Other hosted solutions for handling submissions securely.
• Serverless functions: Use AWS Lambda, Google Cloud Functions, or Cloudflare Workers to process forms.

Each option allows your users to send messages without requiring server-side PHP.

How to implement Formspree in your Jekyll site

Formspree is one of the easiest and most widely adopted solutions for static sites. Here’s how to use it:

1. Basic HTML form code

<form action="https://formspree.io/f/yourformid" method="POST">
  <label>Your Name:</label>
  <input type="text" name="name" required>

  <label>Your Email:</label>
  <input type="email" name="email" required>

  <label>Your Message:</label>
  <textarea name="message" required></textarea>

  <button type="submit">Send</button>
</form>

Replace yourformid with your actual form ID after registering at Formspree.

2. Add a success message

You can use JavaScript or a redirect page to show a “thank you” message after submission:

<form action="https://formspree.io/f/yourformid" method="POST">
  ...
  <input type="hidden" name="_redirect" value="/thank-you.html">
</form>

How to use Netlify Forms if you're hosting with Netlify

Netlify Forms integrates tightly with Jekyll without any third-party script. Just use a form with the netlify attribute:

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Tips for Netlify:

• Add form content directly in your HTML, not via JavaScript.
• Set up optional form handling via netlify.toml or site settings.
• Use spam protection with reCAPTCHA or Netlify’s honeypot method.

How to style and validate your Jekyll contact form

Forms look better with some styling. Here’s an example using Tailwind CSS:

<form action="..." method="POST" class="space-y-4">
  <div>
    <label class="block">Name</label>
    <input type="text" name="name" class="border rounded p-2 w-full" required>
  </div>
  ...
</form>

And for validation, you can enhance UX with JavaScript:

document.querySelector("form").addEventListener("submit", function(e) {
  if (!this.checkValidity()) {
    e.preventDefault();
    alert("Please complete all fields.");
  }
});

What about spam protection for static forms?

Just like WordPress forms use Akismet or captcha, you can protect your Jekyll forms too:

• Use honeypot fields: Add a hidden field that bots will fill but humans won't.
• Use Google reCAPTCHA: Services like Formspree and Netlify support it.
• Use email verification or logic-based filters via Zapier or Make.com.

How to create a custom serverless backend for full control

If you want full flexibility (like sending messages to Slack, saving to Airtable, or filtering inputs), consider writing your own function:

Using Cloudflare Workers:

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
})

async function handleRequest(request) {
  const formData = await request.formData();
  const name = formData.get("name");
  const email = formData.get("email");
  // Send email via API or webhook
  return new Response("Form submitted!");
}

Why using external forms still makes sense with static sites

Some developers worry that adding dynamic components to static sites defeats the purpose. But external APIs allow you to:

• Keep your frontend fast and lightweight
• Offload security and spam filtering
• Avoid server maintenance or backend costs

This is exactly the type of modernization many WordPress users are seeking when switching to Jekyll.

Conclusion

Migrating from WordPress to Jekyll doesn’t mean you have to lose critical functionality like a contact form. Whether you use Formspree, Netlify Forms, or build your own backend, it’s entirely possible to maintain professional, secure, and responsive contact forms on a static site.

By learning to work with APIs, you not only gain flexibility but also improve the long-term maintainability of your website. That’s one more win for Jekyll over WordPress.