How to Add a Contact Form to a Jekyll Site
Jekyll builds static HTML with no backend. Here's how to add a working contact form to any Jekyll site — no plugins, no serverless functions, no backend required.
How to Add a Contact Form to a Jekyll Site
Jekyll generates static HTML, which means there's no server to receive form submissions. The classic workarounds — Formspree, Netlify Forms, or a custom serverless function — all work, but Formboost gives you more: a submission dashboard, AI spam filtering, webhooks, and a REST API, without any additional config.
The Setup
You'll create a contact page in Jekyll, add an HTML form pointing at your Formboost endpoint, and optionally add a thank-you page. The whole thing takes about 10 minutes.
Step 1: Create a Formboost Endpoint
Sign up at dashboard.formboost.app and create a new endpoint. You'll get a URL like:
https://formboost.app/f/YOUR_ENDPOINT_ID
Step 2: Create a Contact Page
Create contact.html (or contact.md) in your Jekyll root:
1---
2layout: default
3title: Contact
4permalink: /contact/
5---
6
7<h1>Contact Us</h1>
8
9<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
10 <!-- Honeypot for spam bots -->
11 <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off" />
12
13 <div>
14 <label for="name">Name</label>
15 <input type="text" id="name" name="name" required />
16 </div>
17
18 <div>
19 <label for="email">Email</label>
20 <input type="email" id="email" name="email" required />
21 </div>
22
23 <div>
24 <label for="message">Message</label>
25 <textarea id="message" name="message" rows="6"></textarea>
26 </div>
27
28 <button type="submit">Send Message</button>
29</form>Replace YOUR_ENDPOINT_ID with your actual endpoint ID.
Step 3: Add a Thank-You Page (Optional)
By default, Formboost shows its own confirmation page after submission. To redirect to a Jekyll page instead:
Add a hidden field in your form:
1<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you/" />Then create thank-you.html in your Jekyll root:
1---
2layout: default
3title: Thank You
4permalink: /thank-you/
5---
6
7<h1>Message received!</h1>
8<p>Thanks for reaching out. We'll get back to you soon.</p>
9<a href="/">Back to home</a>Step 4: Style with Your Theme
If you're using a theme like Minima, the form will inherit the theme's typography. Add custom styles to your assets/css/style.scss (or wherever your site CSS lives):
1form {
2 display: flex;
3 flex-direction: column;
4 gap: 1rem;
5 max-width: 520px;
6}
7
8input, textarea {
9 width: 100%;
10 padding: 0.625rem 0.75rem;
11 border: 1px solid #d1d5db;
12 border-radius: 6px;
13 font-size: 1rem;
14 font-family: inherit;
15}
16
17button[type="submit"] {
18 padding: 0.75rem 1.5rem;
19 background: #2563eb;
20 color: #fff;
21 border: none;
22 border-radius: 6px;
23 font-size: 1rem;
24 cursor: pointer;
25}Step 5: Use Liquid for Dynamic Content (Optional)
Jekyll's Liquid templating can add context to form submissions. For example, pass the page URL as a hidden field:
1<input type="hidden" name="source_page" value="{{ page.url | prepend: site.url }}" />This tells you which page each submission came from — useful if you have multiple contact forms across different pages.
Reusable Form Include
If you want to embed the form on multiple pages, create _includes/contact-form.html:
1<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
2 <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off" />
3 <div>
4 <label for="name">Name</label>
5 <input type="text" id="name" name="name" required />
6 </div>
7 <div>
8 <label for="email">Email</label>
9 <input type="email" id="email" name="email" required />
10 </div>
11 <div>
12 <label for="message">Message</label>
13 <textarea id="message" name="message" rows="5"></textarea>
14 </div>
15 <button type="submit">Send</button>
16</form>Then include it anywhere with:
1{% include contact-form.html %}