Aug 16, 2011

Signup Form Embed Code Redux

If you’re already a MailChimp user, you’ve probably seen and customized the signup forms for your lists. If you’ve ever ventured from there into the "For Your Website" section, you may have encountered this intimidating interface:

That’s our old Signup Form Embed Code page, where you could generate HTML code to allow folks to subscribe to your email lists from your website. A lot of people use this feature, but just looking at that screenshot makes my right eye twitch a little. There are entirely too many check boxes on that page and the way it’s arranged is confusing at best.

For the v6.2 release, we set our sights on improving the Signup Form Embed Code interface. Before I explain what’s new, I’ll show you an "after" screenshot:

Much less frightening, huh? Under the hood, the page still does the same job, but we’ve tried our best to simplify the process and clean up the code that you copy/paste into your site.

Super Slim, Classic & Naked

Those are the names of our three embed code form types. We created Super Slim for all the people out there who just want to drop an email address input and subscribe button into their site. Super Slim has some slim HTML, super basic CSS styling (that can be easily overridden) and nothing else. There’s no complicated JavaScript, and the only options in the dropdown involve changing/removing the form title and providing a set width for your form. You can only use Super Slim if email is your only required field. If you have other required fields, skip down to the Classic form.

The Classic form type gives you most of the bells and whistles of our old embed forms, but simplified as much as possible. In the Classic form options, you can do everything you can in the Super Slim, plus show all merge fields (it defaults to required only), toggle interest groups and even hide those little required field indicators. The Classic form type also adds some JavaScript validation bits, but you can easily turn that off to reduce the embed code length.

Finally, there’s the Naked form type. Before, you could configure our old embed code interface to give you HTML code with no JavaScript or CSS, but you had to dig through all those options. We knew that was a popular configuration for our advanced users, so we decided to make the Naked form its own type. As with the Classic form, you can still use the options to control most of the form’s content, but the styling and any JavaScript magic is totally up to you, oh masters of teh interwebs.

Stay Tuned

As we worked on improving our embed forms over the last development cycle, we discovered a lot of other ways we’d like to improve this page. I don’t want to spoil the surprise, but you can count on more updates and improvements to our Signup Form Embed Code page in the next release as well.