Written by: Geoffrey Callaghan

How to make a contact form in Middleman

How To Make A Contact Form In Middleman

To create a contact form in a Middleman project using Fabform, you’ll need to follow these steps:

  1. Install Fabform: Begin by installing Fabform and its dependencies. You can do this by adding it to your Gemfile:

    gem 'fabform'

    Then, run bundle install to install the gem.

  2. Create Your Form Page: In your Middleman project, create a new page for your contact form. You can do this by adding an .html.erb file in the source directory.

  3. Set Up Your Form: In your new page file, write the HTML structure for your contact form. You can use Fabform’s helpers to simplify this process.

  4. Define Form Fields: Use Fabform’s helpers to define the input fields in your form. You can specify attributes like name, type, label, etc.

  5. Handle Form Submission: Implement the logic to handle form submission. You can use Fabform’s helpers to handle form submission and validation.

  6. Access Form Data: Once the form is submitted, you can access the form data using Fabform’s provided methods, such as params[:form].

  7. Submit Form Data: Process the form data as desired. You can send it via email, store it in a database, or perform any other necessary actions.

Here’s a basic example of how you might set up a contact form page in a Middleman project using Fabform:

---
title: Contact
---

<h1>Contact Us</h1>

<%= form_tag '/contact', method: :post do %>
  <%= fabform_text_field :name, label: "Name" %>
  <%= fabform_email_field :email, label: "Email" %>
  <%= fabform_text_area :message, label: "Message" %>
  <%= fabform_submit_button "Submit" %>
<% end %>

In this example:

  • fabform_text_field, fabform_email_field, and fabform_text_area are Fabform helpers for generating form fields.
  • fabform_submit_button generates a submit button.
  • The form is configured to submit to the /contact route using the POST method.
  • Upon submission, the form data will be sent to the /contact route for processing.

You’ll need to set up a route in your Middleman application to handle the form submission. Depending on your requirements, you may use Middleman extensions or custom Ruby code to process the form data.