Create a contact form with jekyll

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

Sign up an account at Heroku. Download and install heroku toolbelt while you’re at it.

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 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.

<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>

Adding reCAPTCHA (optional)

Sign up for an API key pair and add it to your page. I don’t have a need for this, personally.

Here what’s mine like