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

Send better email campaigns Subscribe to our email course to learn how to create and send high-performing email campaigns that drive results for your business. GET THE FREE EMAIL COURSE
  • MyCMSetup.Com

    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

    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

    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

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

  • Ros Hodgekiss

    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

    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.

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


  • Ros Hodgekiss

    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

    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

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

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free