HTML Forms with Jekyll
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
Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:
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:
1---
2layout: default
3title: Contact
4---
5
6<h1>Contact Us</h1>
7
8<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
9 <p>
10 <label for="name">Name</label><br />
11 <input type="text" id="name" name="name" required />
12 </p>
13 <p>
14 <label for="email">Email</label><br />
15 <input type="email" id="email" name="email" required />
16 </p>
17 <p>
18 <label for="message">Message</label><br />
19 <textarea id="message" name="message" rows="6"></textarea>
20 </p>
21 <button type="submit">Send Message</button>
22</form>Option B — Reusable Include
Create _includes/contact-form.html:
1<form action="https://formboost.app/f/{{ include.endpoint }}" method="POST">
2 <p>
3 <label for="name">Name</label>
4 <input type="text" id="name" name="name" required />
5 </p>
6 <p>
7 <label for="email">Email</label>
8 <input type="email" id="email" name="email" required />
9 </p>
10 <p>
11 <label for="message">Message</label>
12 <textarea id="message" name="message" rows="6"></textarea>
13 </p>
14 <button type="submit">Send</button>
15</form>Use it on any page with:
1{% include contact-form.html endpoint="YOUR_ENDPOINT_ID" %}Option C — Store the Endpoint in _config.yml
Add to _config.yml:
1formboost_endpoint: "YOUR_ENDPOINT_ID"Then reference it in any template:
1<form action="https://formboost.app/f/{{ site.formboost_endpoint }}" method="POST">
2 ...
3</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:
1<input type="hidden" name="_redirect" value="{{ site.url }}/thank-you/" />Create thank-you.html:
1---
2layout: default
3title: Thank You
4---
5<h1>Message received!</h1>
6<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.