To create a contact form on a Jekyll site using FabForm, follow these steps. Jekyll is a popular static site generator, and FabForm is a service for handling form submissions. Here’s a step-by-step guide to integrate a contact form into a Jekyll site using FabForm:

Step-by-Step Guide

1. Set Up Jekyll Project:

   • If you haven’t already, install Jekyll and create a new site:

     gem install bundler jekyll
     jekyll new my-website
     cd my-website
     bundle install

2. Create a Contact Page:

   • Create a new file named contact.md in the root of your project (or in the _pages directory if you have one).

   • Add the following content to contact.md:

     ---
     layout: page
     title: Contact
     permalink: /contact/
     ---
     
     <h1>Contact Us</h1>
     
     <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
       <div>
         <label for="name">Name:</label><br>
         <input type="text" id="name" name="name" required><br>
       </div>
       <div>
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email" required><br>
       </div>
       <div>
         <label for="message">Message:</label><br>
         <textarea id="message" name="message" required></textarea><br>
       </div>
       <div>
         <input type="submit" value="Submit">
       </div>
     </form>

3. Configure FabForm:

   • Sign up on FabForm.
   • Create a new form to get your form ID.
   • Configure the form settings on FabForm to handle submissions (e.g., set up email notifications, response messages, etc.).

4. Update Navigation:

   • If you have a navigation menu in your _config.yml or in an _includes file, add the contact page to it. Here’s an example of adding it to _config.yml:

     theme: minima
     title: My New Jekyll Site
     
     navigation:
       - name: "Home"
         link: "/"
       - name: "Contact"
         link: "/contact/"

5. Test Your Site:

   • Serve your Jekyll site locally to test the form:

     bundle exec jekyll serve

   • Navigate to http://localhost:4000/contact/ to ensure your contact form appears correctly and can submit data.

6. Deploy Your Site:

   • Build your Jekyll site:

     bundle exec jekyll build

   • Deploy the site using your preferred method (e.g., GitHub Pages, Netlify, etc.).

Example Jekyll Configuration (_config.yml):

title: My New Jekyll Site
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://yourdomain.com" # the base hostname & protocol for your site

# Build settings
markdown: kramdown
theme: minima

navigation:
  - name: "Home"
    link: "/"
  - name: "Contact"
    link: "/contact/"

Example Contact Page (contact.md):

---
layout: page
title: Contact
permalink: /contact/
---

<h1>Contact Us</h1>

<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
  <div>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br>
  </div>
  <div>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br>
  </div>
  <div>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" required></textarea><br>
  </div>
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

By following these steps, you will have a fully functional contact form on your Jekyll site that integrates with FabForm for handling submissions.