Skip to content

Jekyll Guide

Add A Contact Form To Jekyll

Here is a guide for integrating Fabform with a Jekyll site:

Step 1: Create a new blank Jekyll site

Ensure you have Bundler and Jekyll installed:

Terminal window
gem install bundler jekyll

Create a new Jekyll site:

Terminal window
jekyll new my-first-jekyll-site

Navigate into your site directory:

Terminal window
cd my-first-jekyll-site

Start the Jekyll server:

Terminal window
bundle exec jekyll serve

Jekyll will start a development server accessible by default at http://localhost:4000.

Step 2: Add a Contact Form to your Jekyll site

  1. Create Contact Page: Inside the _site directory of your Jekyll site, create a new directory named contact.

  2. Create HTML File: Inside the contact directory, create a new HTML file named index.html.

  3. Update Contact Page Content: Replace the content of index.html with the following code block:

layout: page
title: Contact
permalink: /contact/
<form accept-charset="UTF-8" action="{your-form-endpoint}" method="POST" enctype="multipart/form-data" target="_blank">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="name" placeholder="Your Name">
<input type="text" name="message" placeholder="Your Message">
<button type="submit">Send</button>

Note: Replace {your-form-endpoint} with the unique form endpoint provided by Fabform.

Step 3: Run your Jekyll site locally to finalize setup

Run the following command to see your Jekyll form in action at localhost:4000/contact/:

Terminal window
bundle exec jekyll serve

That’s it! Your Jekyll site is now integrated with Fabform for handling form submissions.