Creating and customizing your own subscribe button

By Ros Hodgekiss on 30th April 2013

Following the release of our subscribe button earlier this year, one of the most popular requests we received was the ability to customize both the button and the sign-up prompt, or modal. Well, Buzz on our team has come up with the goods, by creating a button that you can adapt for your own site.

To the code-savvy and curious, our subscribe button must seem tantalizing - a quick peek at the source code reveals that, for the sake of simplicity, most of the magic has been safely tucked away. While there's never been anything preventing folks like you and me from rolling our own subscribe forms, having a solid template or example to play is often what it takes to move a task from the 'too-hard basket' and into 'getting it done'.

Example subscribe form modal

An example subscribe button modal - give it a try for yourself.

For those who like getting things done with code, Buzz's customizable subscribe form button is where it's at. Bringing together Twitter's Bootstrap Modal and our AJAX Subscription Form code (as well as your own creativity), it pretty much has all the functionality of our subscribe button, but can be adjusted to taste in its entirety. Buzz has even provided two versions - Basic and Fancy - to get you off to a flying start. As a bonus, the Fancy version's modal has been optimized for mobile devices, giving you one less thing to mull over.

To see the customizable subscribe button in action and download the code, swing by GitHub. Should you have any feedback, or just want to give Buzz a well-earned pat on the back, we'd love to hear from you in the comments below.

9 Comments

  • MyCMSetup.Com
    6th May

    This is great. I hope in the future to see more size and colour options. Perhaps “Enter your own hex value” Also the ability to select a Google Web font for the button label would be awesome.

  • Ros Hodgekiss
    7th May

    Hey there, thanks for these suggestions - I presume they’re in regards to our original subscribe button? It’s totally possible to make these customizations to the code described above, so let us know and we’ll add your vote :)

  • Aj Dumas
    21st May

    Really cool, but unfortunately more than I have time for. Definitely something I would like to get a handle on for the future. The assets list is what is stopping me. Our site was built by an agency on an Expression Engine CMS install. I’m the corporate guy maintaining and adding to it. It seemed like a lot of code to add to enable this (really cool) functionality. Maybe I’m not understanding this correctly?

    To be honest, I’m really happy with the existing Subscribe Button. I’m only looking for two additional things: hiding and pre-filling custom fields. Easy to do on a custom embedded form, not so much on the Subscribe Button it seems.

  • Adam Dipper
    3rd July

    Is it possible to add a drop down selection to the form so the list will capture that field?

  • Ros Hodgekiss
    3rd July

    Hi Aj, thank you for the feedback on hiding and pre-filling custom fields - i’ll let the team know this is something you’re after. If it does get slipped into a future update, we’ll let you know :)

    Adam - Yes, if you create a custom field with the data type, “Multiple options (can only select one)”, you can then get the subscribe form code, including a drop-down selection for that custom field. Follow the instructions on GitHub and you’ll be able to create a modal with a drop-down list :)

  • Adam Dipper
    31st July

    Thanks Ross, this is what I have done. But doesn’t go through to the thank you screen when you click the button but the info is submitted to the list.

    http://www.leedhamcreative.com/signuptest/fancy.html

    Any ideas or could you point me to the right place to ask?

    Thanks

  • Ros Hodgekiss
    1st August

    Hi Adam, please feel free to contact our team with details - we’d be happy to see if we can get this working for you :)

  • Chris
    14th March

    This is a great alternative for creating a custom button for opening the subscription form. I have no issues making this work on a standard webpage, but when I try to take the same code and put it into a Wordpress page using Raw HTML and Raw JS, then the modal overlay is not working. I even tried using the bootstrap-modals plugin instead to see if that would fix it, but it doesn’t. Have you been able to successfully make this work in Wordpress?

  • Ros Hodgekiss
    17th March

    Hi Chris, my recommendation would be to use one of the great WordPress form plugins that have been developed with Campaign Monitor in mind. It’s hard to say what could be happening with the modal overlay and the stylesheets that came with your theme, so your best bet is to use one of these tried-and-tested forms. Let us know how you go :)

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account