How to add a contact form to your Jekyll site

Create your form endpoint in FormBackend

Go create a login and create a new form endpoint in FormBackend. Give it a name you can remember for example: “Jekyll Contact Form” or something similar for this tutorial. It can always be changed later and is only used for you to remember your form.

Create a new Jekyll app

If you don’t have an existing Jekyll app, let’s create one real quick - if you do, then you can skip this section and go to the next one.

First let’s install the Jekyllrb gem

gem install jekyll

Go ahead and create the new Jekyll site in it’s desired location by cd to that directory and running

jekyll new jekyll-formbackend

You can of course name the directory whatever you want :) Once the command is done running, go ahead and change to that directory

cd jekyll-formbackend

Create the contact us page

Let’s go ahead and create a new contact page to which we’ll add our Jekyll contact form. We do this by creating a new file in the root named contact.markdown. So open up a new file in your favorite editor and save it with that filename.

At the top we’ll add what is known as frontmatter (simple yaml configuration for the page)

---
layout: page
title: Contact us
permalink: /contact/
---

That tells Jekyll what layout to use, what the title of the page should be and what url (permalink) it can be found at.

Start the Jekyll server

Let’s just make sure our page works, by starting the Jekyll server:

bundle exec jekyll serve

This will start a server running on http://localhost:4000. You can navigate to your new Contact Us page either by clicking on the link in the navbar (if you’re on default page layout) or by going to the following url http://localhost:4000/contact.

Time to add the form

Go ahead and paste the following in your contact.markdown file below the frontmatter:

<form action="{your-unique-url}" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea name="message"></textarea>

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

Go to your account on FormBackend and create a new form. Give it a name you can remember like “Jekyll Contact form” and copy the unique URL for your form (can be found on the Settings-tab). Paste that URL in place of {your-unique-url} in the HTML you pasted from above.

That’ll give you an unstyled HTML form you can now style with CSS, which will post form submissions to FormBackend. If you need further help to customize your Jekyll site, their documentation is great!

Handling submissions without a page redirect

The plain HTML form redirects to FormBackend’s default thank-you page. To keep users on the page and show a success message, add a small JavaScript snippet below your form (Jekyll passes raw HTML and <script> tags straight through to the page):

<script>
  const form = document.querySelector('form');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();

    const response = await fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { accept: 'application/json' },
    });

    if (response.ok) {
      form.innerHTML = '<p>Thanks! Your message has been sent.</p>';
    } else {
      form.insertAdjacentHTML('beforeend', '<p>Something went wrong — please try again.</p>');
    }
  });
</script>

Calling event.preventDefault() stops the full-page submission, the browser’s built-in FormData collects every field, and the accept: application/json header tells FormBackend to return JSON instead of an HTML page.

What to configure next

Your Jekyll contact form is live. Here’s what you can set up in FormBackend:

• Email notifications: Get an email every time someone submits, with optional file attachments
• Auto-reply emails: Send a confirmation to the person who filled out the form
• Spam protection: Built-in spam filtering is always active. Add hCaptcha or Cloudflare Turnstile for extra security
• Integrations: Route submissions to Slack, Google Sheets, Discord, or any URL via webhooks
• File uploads: Accept file uploads by adding enctype="multipart/form-data" to your form tag
• Custom redirect: Send users to a page on your site after they submit

Guides for other static site generators: Hugo, Eleventy, Gatsby, Astro, and more.