Create a contact form with jekyll

Posted on January 20, 2015 • 2 minutes • 298 words

Since jekyll blog is static, we have to rely some some kind of service endpoint to send email to our mailbox. Good thing is that there are plenty of services for this purpose: heroku for free hosting and mailgun, mandrill or mailjet for sending email. Pick one of your choice.

I did a quick search before firing up Sublime Text to create a simple app for sending email and luckily, someone already wrote one . One less thing to do :)

Create Heroku and a Mandrill account

For sending email, you can go with Mandrill , Mailgun or Mailjet . They all come with free plan which is more than enough for personal use. If you pick something other than Mandrill, you will have to edit the app a bit use their own libraries. If you’re lazy, just go with Mandrill.

Install the app on heroku

heroku auth:login # enter your account credentials when asked

git clone https://github.com/ousenko/simple-contact-form.git
heroku create <YOUR_HEROKU_APP>
heroku config:set MANDRILL_API_KEY=<KEY>
heroku config:set USER_EMAIL=<YOUR EMAIL>
heroku config:set USER_SITE=<YOUR SITE>
heroku config:set SUCCESS_PAGE=<A SUCCESS PAGE TO REDIRECT USER TO AFTER THE MESSAGE IS SENT>

git push heroku master # deploy

Create contact form on your website

Create a page with simple form like below. I’m using Bootstrap for my blog so styling is just a matter of adding a couple of CSS classes.

{% raw %}
<form action="https://<YOUR_HEROKU_APP>.herokuapp.com/send">
  Email: <input type="text" name="name"><br>
  Name: <input type="text" name="email"><br>
  Subject: <input type="text" name="subject"><br>
  Message: <textarea name="message" cols="40" rows="5"></textarea>
  <input type="submit" value="Send Message">
</form>
{% endraw %}

Adding reCAPTCHA (optional)

Here what’s mine like