Written by: Geoffrey Callaghan

How to setup a contact form to your Jekyll site

How To Setup A Contact Form To Your Jekyll Site

Setting up a contact form on your Jekyll site using Fabform involves several steps:

  1. Install Fabform: Begin by installing Fabform in your Jekyll project. You can do this by adding it to your Gemfile:

    gem 'fabform'

    Then run:

    bundle install
  2. Create Your Contact Form: In your Jekyll project, create an HTML file for your contact form. You can name it something like contact.html or contact.md. Here’s an example of what the form might look like:

    <!-- contact.html -->
    <form id="contact-form" action="/api/submit-form" method="post">
        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <textarea name="message" placeholder="Your Message" required></textarea>
        <button type="submit">Send</button>
    </form>
  3. Set Up the Backend: You need a backend to handle form submissions. You can use a serverless function or any backend solution of your choice. Create a directory for your API functions and a function to handle form submissions.

    # api/submit-form.rb
    require 'fabform'
    
    Fabform.create_form_endpoint do |form|
        # Your form configuration
        # This might include email sending, saving to a database, etc.
    end
  4. Configure Jekyll: Configure Jekyll to build and serve your API functions. You might need to adjust your _config.yml or other Jekyll configuration files to ensure that your API functions are included in the build and served correctly.

  5. Test Your Form: Once everything is set up, test your contact form to ensure it’s working as expected.

  6. Deploy Your Site: Deploy your Jekyll site with the new contact form. Make sure to include your API functions in the deployment.

Remember to customize the form and backend logic according to your specific requirements. Also, ensure that you handle form submissions securely and validate user inputs to prevent security vulnerabilities.