Jekyll Forms: HTML Setup

Add a working contact form to a Jekyll site on GitHub Pages: HTML that posts to a Formboost endpoint, with a redirect, honeypot and email notifications.

Jekyll builds static HTML sites — there's no server to receive form submissions. Formboost is the natural pairing: point your Jekyll form at your Formboost endpoint and submissions land in your dashboard with email notifications and spam filtering included.

Prerequisites

A Formboost account (sign up free)
A Jekyll site

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Add the Form

Option A — Directly in a Page

Create contact.html (or contact.md with HTML inside) in your Jekyll root:

---
layout: default
title: Contact
---

<h1>Contact Us</h1>

<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <p>
    <label for="name">Name</label><br />
    <input type="text" id="name" name="name" required />
  </p>
  <p>
    <label for="email">Email</label><br />
    <input type="email" id="email" name="email" required />
  </p>
  <p>
    <label for="message">Message</label><br />
    <textarea id="message" name="message" rows="6"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>

Option B — Reusable Include

Create _includes/contact-form.html:

<form action="https://formboost.app/f/{{ include.endpoint }}" method="POST">
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </p>
  <p>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="6"></textarea>
  </p>
  <button type="submit">Send</button>
</form>

Use it on any page with:

{% include contact-form.html endpoint="YOUR_ENDPOINT_ID" %}

Option C — Store the Endpoint in `_config.yml`

Add to _config.yml:

formboost_endpoint: "YOUR_ENDPOINT_ID"

Then reference it in any template:

<form action="https://formboost.app/f/{{ site.formboost_endpoint }}" method="POST">
  ...
</form>

This makes it easy to update the endpoint ID in one place.

Step 3: Custom Redirect (Optional)

Redirect to a Jekyll thank-you page after submission:

<input type="hidden" name="_redirect" value="{{ site.url }}/thank-you/" />

Create thank-you.html:

---
layout: default
title: Thank You
---
<h1>Message received!</h1>
<p>We'll be in touch shortly.</p>

Step 4: Test It

Run bundle exec jekyll serve and submit the form. The submission will appear in your Formboost dashboard within seconds.