A Jekyll Subscribe Form that Actually Works!
Jekyll subscribe form is not readily available because forms usually work with php code to send emails. But with this method, we can add a mailchimp subscribe form on any Jekyll blog which will work out of the box.
Why use a subscribe form?
Subscribe form is used basically to collect visitors’ emails to provide them an update every time you post a new article. Also, a good way to get some initial traffic to a new post.
- Why use a subscribe form?
- How to make a subscribe form on Jekyll blog?
- Update 1 - MailChimp subscribe form on Jekyll
Many bloggers use mailing list for affiliate marketing. I don’t think it is a bad idea. If a user is interested in the stuff blogger is selling, then it is a win-win.
WordPress has an advantage over Jekyll since it has many plugins that can do the job without breaking a sweat. But, after moving all my blogs from WordPress to Jekyll I had to find an alternative for subscribe forms.
This is one of those things I always wanted in Jekyll but did not know how to do it. This idea hit me one day while I was working on contact forms. Initially, I tried to create a form with FormSpree similar to how I created a contact form.
It was a painful experience. FormSpree requires verification. This verification is URL specific. If the form is on all the pages of the website then I have to verify an email for every single page! FormSpree is good if you are using it on one specific page but not for all pages. What I eventually found was that SimpleForm can be used to make a contact form which works on all pages! Which means it can be used as a subscribe form.
There are two types of subscribe forms described here. One is just an email collector and another one is a fully automatic mailchimp subscribe form for Jekyll. If you are looking for mailchimp form then skip to jekyll mailchimp form.
What I’m showing here is an email collector. So it just collects users’ emails. I think that is what a basic subscriber form does. You can also setup an auto-reply option. Auto-reply can help if you are offering an e-book for a subscription. I haven’t tried it yet but it should work.
But before collecting emails you should have an email id. You can use any email id but it is a good idea if you use a domain email. If you don’t have one, then get a free domain email using ZOHO.
If you want to use MailChimp form on jekyll (I’m currently using it) then skip to MailChimp on Jekyll section. MailChimp takes care of everything. You can create lists, design forms, send campaign emails etc., Overall a very good platform for beginners.
How to make a subscribe form on Jekyll blog?
I’m not using FormSpree because it doesn’t work on all pages. Formspree is URL specific. If you want your subscribe form to be on all the pages(which is usually the case), SimpleForm has to be the logical choice.
Step 1: Get an API Token from SimpleForm
Enter the email address you want to use in the input field and click on Send me a token
You should receive an email with the token similar to this one
Step 2: Create a form
Now create a form in Jekyll with only email input in it and change the action according to SimpleForm documentations. You can create it on a separate page so that users will go to that page and subscribe or you can create it in the default layout so that the form is available on all pages.
Step 3: Create a success page
Once the user enters his email in the form and hits subscribe, he should be shown a message that he has successfully subscribed to the updates. Create a thank you page in Jekyll and redirect users to that page after successful submission.
Form with redirection
Typical thank you page
Step 4: Success!
That’s it. Now collect emails and make a list. I use MailChimp and I send an update to the list using campaign every time I make a new post.
Here is a working example: Sample Subscribe Form
I hope that helped. I was using feed-burner for subscriptions. I have a post on How to use Feedburner for subscriptions. Feedburner is a free and pretty good tool for managing feeds and subscriptions.
Update 1 - MailChimp subscribe form on Jekyll
A user asked how he can handle un-subscriptions, which is a valid question because users may want to opt out of your mailing list. Thanks to him for bringing up this topic.
As I have mentioned in the article this is a completely manual subscription handling. But what if someone wants an automated list generation. Which means after every subscription, email will be collected as a list and if someone wants to un-subscribe, the list will update itself.
Many times, emails that you send to your subscribers should have an unsubscribe link. Otherwise, email providers may mark it as spam and move it to spam folder every time. No one checks spam folder unless they are asked to do so. And also it is not practical to create a un-subscribe link and include it every time you send an email, you can opt some third party email subscription handlers.
I prefer these two email subscription handlers - Aweber or MailChimp. I suggest MailChimp for beginners. Create an account in MailChimp for free.
MailChimp has an option to create a list(which will be automatically updated upon new subscriptions and un-subscriptions), an option to create a form for normal websites and an embeddable form for static websites.
For Jekyll websites, one must choose embeddable forms. Here is how the code looks like
I have a working form as well!
Once you enter the details, hit subscribe button; You should receive an email right then. Actually this is the form I’m using in my website. You will get the same form when you click on Subscribe button on the menu bar. The form may look different but it does the same job as this form.
Watch a video tutorial instead
I hope that similar kind of form can be embedded to a jekyll site using Aweber as well. I haven’t used Aweber but if anyone has used it then feel free to give your inputs.
I hope that covers types subscription forms available for Jekyll. Let me know which one you have implemented and for what reason. If you couldn’t get this working then let me know in the comment section.
Thanks for reading!