Sending email from your static site

Cristiano - July 29, 2015

Last year I have moved my blog from Wordpress to Jekyll platform.
Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as “a simple, blog aware, static site generator”.
With jekyll I have a pure html static site, so no database is needed.
After moving my site I need to re-project my contact form. I have googled to search a solution to send emails from static pages and the best solution I’ve found is to use Formspree.
Formspree is a service for sending e-mails from an HTML page form without backend.

Resources

My Gist
jsfiddle

Requirements

Formspree
Twitter Bootstrap
Jquery
Bootstrap Validator

How Formspree works

Is a service that send emails for you. You only need to send a POST request from your form:

<form action="//formspree.io/your@email.com" method="POST" id="contact-form">
  <input type="text" name="name">
  <input type="email" name="_replyto">
  <input type="submit" value="Send">
</form>

Putting your mail address in action attribute, then start to send mail!
Formspree has a lot of options, here is a complete list.

Submit with ajax

After submit my form I don’t want to reload the page, so I use ajax to submit the form. Again you can check the Formspree documentation to learn more.
If you are using Jquery you can start an ajax call, remember to use dataType: "json" in your request.

$.ajax({
  url: "//formspree.io/you@email.com", 
  method: "POST",
  data: {message: "hello!"},
  dataType: "json"
});

Validate user input

Rule number one: never trust user input!
To validate the fields I use bootstrapValidator . A library no longer maintained. You can buy the new supported version here .

This is a validation example:

var contactForm = $('#contact-form');
contactForm.bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    _replyto: {
      validators: {
        notEmpty: {
          message: 'The email address is required'
        },
        emailAddress: {
          message: 'The email address is not valid'
        }
      }
    }
  }
});

Beautify with Twitter Bootstrap

Using twitter bootstrap framework I can improve the graphic and the user experience, I recommend you use it.

Checkout

Free feel to checkout my Gist , otherwise a jsfiddle is provided here