Middleman Installation

Middleman is a static site generator using all the shortcuts and tools in modern web development that uses Ruby programming language.

Step 1 — Create new form endpoint on Getform

All that's required is a name for your form. You specify a name, and Getform will provide a unique form endpoint to identify your Middleman form.

Step 2 — Prepare your Middleman form for your website

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with email address, name and message fields:

<form accept-charset="UTF-8" action="https://getform.io/f/{unique-endpoint-generated-on-step-1}" method="POST">
  <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>

Step 3 — Create a new Middleman site

If you have a Middleman site already setup and running, you can skip to Step 4. To start a new site on middleman, you can run the following command to build a Middleman site in the current folder:

$ middleman init my-middleman-site

cd into my-middleman-site to open folder and run the following command to start a local dev server:

$ bundle exec middleman server

Middleman will start a development environment accessible by default at localhost:4567.

Step 4 - Add a Contact Section to your Middleman site

Middleman uses a file-based routing system. For example, source/contact.html.erb will be mywebsite.com/contact.html/.

Create a new file called contact.html.erb under source directory and copy the code block below to add a contact section.

<form accept-charset="UTF-8" action="https://getform.io/{YOUR_UNIQUE_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>

Step 5 - Run your Middleman site locally to finalize setup

Run the following command to see your Middleman form in action at localhost:4567/contact.html/:

 bundle exec middleman server

That's it! Your Middleman site is now running Getform.