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: