Skip to content
FabForm Docs

Middleman Guide

Here is a guide on integrating a contact form into a Middleman site using Fabform:

Setting Up a Contact Form in Middleman with Fabform

Middleman is a static site generator based on Ruby, providing a simple and efficient way to build websites. Integrating a contact form into your Middleman site can be easily achieved, especially with services like Fabform, which handle form submissions seamlessly. Let’s walk through the process step by step:

Step 1: Create a New Middleman Site

Start by initializing a new Middleman site with the following command:

Terminal window
middleman init my-middleman-site
cd my-middleman-site

Step 2: Add a Contact Section

Middleman uses a file-based routing system. Create a new file called contact.html.erb under the source directory to add the contact form.

Step 3: Implement the Contact Form

Copy and paste the following code block into contact.html.erb to implement the contact form:

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

Ensure to replace {your-form-endpoint} with your actual Fabform endpoint URL.

Step 4: Finalize Setup and Test Locally

Run your Middleman site locally to see the contact form in action:

Terminal window
bundle exec middleman server

Visit localhost:4567/contact.html in your browser to test the form. Upon submission, the form data will be sent to Fabform for processing.

Conclusion

Congratulations! You’ve successfully integrated a contact form into your Middleman site using Fabform. This enhances user interaction and allows visitors to easily reach out to you. Feel free to customize the form further to meet your specific requirements.

Happy building!

This guide provides a comprehensive walkthrough for integrating a contact form into a Middleman site using Fabform, ensuring clarity and completeness in each step of the process.