I was working on a client website this past weekend, when I wanted to add a MailChimp newsletter sign-up along with the usual Facebook, Twitter and Google+ action buttons. After not finding exactly what I wanted on the MailChimp website, I decided I would venture out into something new: I would add a modal! In a very basic and untechnical definition, a modal is one of those cool pop-up boxes that you see around the web, it uses Javascript and can really add a sweet element of ease to your user.
So, I did a search for a good modal to add. Much to my delight, I realized this is already built-in to Twitter Bootstrap (along with all kinds of goodies). Since I was using the Standard WordPress template (which uses Twitter Boostrap), it was easy to get my website rockin’ with a new email subscription sign-up form!
Here’s how I did it:
The Power of Boostrap
I always knew there was a lot of goodies under Bootstrap’s hood, but I never thought it would be this easy to use them. All I did was copy and paste the code form the Bootstrap site and make the changes I needed to suite my needs.
Step 1: The Button
To place the button (or trigger), I started with this snippet:
Since I wanted my button smaller and wanted to add one of the many icons provided with Bootstrap, I made a few tweaks:
Here’s how it turned out:
Step 2: The Modal
This is where all the action happens. You can add this snippet just about anywhere in your page. Although you can place it directly following your button, I prefer adding it to my footer, as I want the entire site to load up before.
Here is the code provided on the Boostrap website:
After grabbing my email subscription form embed code from MailChimp and making a few style changes to the snippet provided by Boostrap, here’s my final bit:
If you compare the two snippets and watch-out for my notes, you should be able to easily make this fit your own website.
Now when you click on the “Subscribe” button:
BOOM!
wvpv says
Why annoy your mobile users with a modal signup?
Eric Dye says
Although I have not done any native mobile testing with this modal yet, what exactly is annoying about it for mobile users?
wvpv says
1) they’re generally hard to close
2) most i’ve seen pop-up automatically which is not good from a UX perspective
3) browsers can’t default values in the fields
4) they generally do not scroll or rotate very well
5) I’ve yet to see any studies on the affect of email gates on page abandonment. Yes, they may lead to a higher sign-up rate, but at what expense?
Eric Dye says
Great thoughts here, thanks! 🙂
Nathan says
Where can I go if I don’t have a Bootstrap theme?
Eric Dye says
Try this: http://zurb.com/playground/reveal-modal-plugin
Clay Asbury says
Good stuff. Been futzing with this for a while with limited success. Any ideas how to make the modal open in “evil popup mode”?
Eric Dye says
That I have not done. Mostly because it’s evil. Are you trying it on a Bootstrapped site?