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:

gem install bundler jekyll

Create a new Jekyll site:

jekyll new my-first-jekyll-site

Navigate into your site directory:

cd my-first-jekyll-site

Start the Jekyll server:

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="https://fabform.io/f/{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>
</form>

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/:

bundle exec jekyll serve

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