Best way to create contact form with Middleman

#1

Hi, I’m a Middleman newbie. Just creating my first website with Middleman, so forgive me if this sounds like a stupid question, but what’s the best way to create a contact form? I needs to be a simple form, just an email field and a message box that’s send to my mailbox.

Thanks for your advice,

Anthony

1 Like
#2

Generally speaking, Middleman is only an automated way to build the HTML, so what you need to do is the same as in plain HTML coding. Usually your hosting server must provide a functionality to send email programmaticaly (PHP script, for example). Middleman will only help to build a HTML code for the form – read about form helpers.

#3

Thanks komor72

I’ll host the site on Heroku, so I’ll see what the possibilities are there to send contact forms to my mailbox.

greetings,

Anthony

#4

I found this service, Simple Form, super easy to implement.

1 Like
#5

and after some trial and error I managed to redirect to a ‘thank you’ page after a vaild form submission to Simple Form. This has to be done trough an ajax call:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script>
$("#contactForm").validate({
rules: {
    fullname: "required",
    email: {
      required: true,
      email: true
    }
  },

  submitHandler: function(form) {
    $.ajax({
      dataType: 'jsonp',
      url: "http://getsimpleform.com/messages/ajax?form_api_token=my-secret-token",
          data: $("#contactForm").serialize()
        }).done(function() {
      //callback which can be used to show a thank you message
      //and reset the form
      window.location.href = "/confirm.html";
    });
  }
});
</script>

No I’m able to validate a contact form and submit it to the Simple Form service, and then redirect to a ‘thank you’ page, all without any server side code :smile:

1 Like
#6

This workaround does the trick, using Parse and Sendgrip:

https://sendgrid.com/blog/send-email-static-websites-using-parse/

#7

Thoughtbot offer’s a form solution as a service, you can find it here.