--- title: "Add forms to Jekyll" description: "Add a form backend to your Jekyll static site. Handle submissions, file uploads, and email notifications with no server required." url: https://forminit.com/docs/jekyll/ --- # Add forms to Jekyll Jekyll is a static site generator that outputs plain HTML files with no server-side processing. Forminit handles all form submissions through our client-side SDK, making it a perfect match for Jekyll sites. **What you'll get:** - Accept form submissions without building a backend - Email notifications for new submissions - Spam protection (Cloudflare Turnstile, reCAPTCHA, hCaptcha, honeypot) - File uploads support - Submission dashboard to manage responses **Requirements:** - A Jekyll site (any version) - A Forminit account and Form ID --- ## Quick Start ### Step 1: Create a Form on Forminit 1. Sign up or log in at [forminit.com](https://forminit.com) 2. Create a new form 3. Go to **Form Settings** → Set authentication mode to **Public** 4. Copy your **Form ID** (e.g., `abc123xyz`) > **Caution** > > Make sure authentication mode is set to Public in Form Settings. --- ### Step 2: Create a Form Include Create a new include file for your contact form: ```html

``` --- ### Step 3: Add the Forminit SDK Create an include for the form script: ```html ``` --- ### Step 4: Include in Your Layout Add the form and script to your page layout: ```html {{ page.title }} | {{ site.title }} {% include header.html %}
{{ content }}
{% include footer.html %} {% if page.has_form %} {% include forminit-script.html %} {% endif %} ``` --- ### Step 5: Create Your Contact Page Create a contact page that uses the form: ```html --- layout: default title: Contact permalink: /contact/ has_form: true ---

Contact Us

We'd love to hear from you. Fill out the form below and we'll get back to you soon.

{% include contact-form.html %}
``` Or using Markdown: ```markdown --- layout: default title: Contact permalink: /contact/ has_form: true --- # Contact Us We'd love to hear from you. Fill out the form below and we'll get back to you soon. {% include contact-form.html %} ``` --- ## Using Site Configuration for Form ID Store your Form ID in Jekyll's `_config.yml` for easier management: ```yaml # _config.yml title: My Site description: My awesome Jekyll site # Forminit configuration forminit_form_id: "abc123xyz" ``` Then reference it in your script: ```html const FORM_ID = '{{ site.forminit_form_id }}'; ``` > **Note** > > After changing `_config.yml`, you need to restart `jekyll serve` for changes to take effect. --- ## Form Field Reference For a complete list of available form blocks (text, email, phone, file, rating, select, etc.) and field naming patterns, see the [Form Blocks documentation](https://forminit.com/docs/form-blocks/). --- ## Complete Examples ### Contact Form with Subject Selection ```html

``` ### Newsletter Signup ```html

``` ### Feedback Form with Rating ```html
How would you rate your experience?

``` ### Job Application with File Upload ```html

``` --- ## Multiple Forms on One Site If you have multiple forms (contact, newsletter, application), store different Form IDs in your config: ```yaml # _config.yml title: My Site # Forminit Form IDs forminit: contact: "abc123" newsletter: "xyz456" application: "sms55" ``` Then reference them in your templates: ```html const FORM_ID = '{{ site.forminit.contact }}'; ``` --- ## Using Data Files for Form Configuration For more complex configurations, use Jekyll's data files: ```yaml # _data/forms.yml contact: id: "abc123" success_message: "Thanks for reaching out!" newsletter: id: "xyz456" success_message: "You're subscribed!" application: id: "sms55" success_message: "Application received!" ``` Access in your templates: ```html const FORM_ID = '{{ site.data.forms.contact.id }}'; const SUCCESS_MESSAGE = '{{ site.data.forms.contact.success_message }}'; ``` --- ## Handling Form Submission Response The SDK returns `{ data, redirectUrl, error }`: **On success:** ```javascript { data: { hashId: "7LMIBoYY74JOCp1k", // Unique submission ID date: "2026-01-01 21:10:24", // Timestamp blocks: { // Submitted values sender: { firstName: "John", lastName: "Doe", email: "john@example.com" }, message: "Hello from Jekyll!" } }, redirectUrl: "https://forminit.com/thank-you" } ``` **On error:** ```javascript { error: { error: "ERROR_CODE", code: 400, message: "Human-readable error message" } } ``` --- ## Redirect After Submission If you prefer to redirect users to a thank-you page: ```javascript form.addEventListener('submit', async function(event) { event.preventDefault(); const formData = new FormData(form); const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData); if (error) { status.textContent = error.message; return; } // Redirect to thank-you page window.location.href = '/thank-you/'; // Or use Forminit's redirect URL: // window.location.href = redirectUrl; }); ``` Create a thank-you page: ```markdown --- layout: default title: Thank You permalink: /thank-you/ --- # Thank You! Thank you for your message! We'll get back to you soon. [← Back to Home](/) ``` --- ## Project Structure Example Here's a typical Jekyll project structure with Forminit forms: ``` my-jekyll-site/ ├── _config.yml # Site config with Form IDs ├── _data/ │ └── forms.yml # Optional: form configurations ├── _includes/ │ ├── contact-form.html # Form HTML │ ├── forminit-script.html # Form submission script │ ├── header.html │ └── footer.html ├── _layouts/ │ └── default.html # Base layout ├── _posts/ # Blog posts ├── assets/ │ └── css/ │ └── forms.css # Form styles ├── contact.md # Contact page ├── thank-you.md # Thank you page └── index.md # Homepage ``` --- ## GitHub Pages Deployment Jekyll works seamlessly with GitHub Pages. Your Forminit forms will work without any additional configuration since everything runs client-side. ```yaml # _config.yml for GitHub Pages title: My Site url: "https://yourusername.github.io" baseurl: "/your-repo-name" forminit_form_id: "abc123xyz" ``` > **Note** > > Make sure your form ID is set to **Public** mode since GitHub Pages doesn't support server-side code. --- ## Next Steps 1. [View your submissions](https://app.forminit.com) in the Forminit dashboard 2. Set up [email notifications](https://forminit.com/docs/email-notifications/) for new submissions 3. Explore [webhook integrations](https://forminit.com/docs/webhooks/) for advanced workflows