Sep 1, 2010

Better Embedded Signup Forms

By default, the standard signup form that MailChimp provides looks something like this:

chimptallica_signup

Not bad if you’re linking people directly to your subscribe form or you have a large spot on your website to display it, but if you prefer a cleaner, more compact look (say, for the sidebar of a blog) you can achieve it by changing a few things in the form designer.

Head over to the embed code area of the list builder.

create_embed

Once there, you’ll find a miniature preview of your signup form, along with a bunch of options for your embedded form.  Almost all of those options are turned on by default.  You’ll also see that the preview attempts to pull in certain design elements, like colors and a border, from your main signup form.

embed_preview

We did this to show you all the possibilities, but chances are you won’t need or want all of those options for a smaller embedded form.  Try tinkering with all of those options to achieve the look you want.

Check the radio button for "only required fields,"  then un-check any fields that are non-essential for a smaller form, like interest groups or addresses.

form_options

You can also decide to set a specific form width if you know the dimensions of the spot you’d like to embed the form.  Leaving this blank will allow the form to flow to the width of whatever area you place it on your site.   Also, since this form is tied to your main signup form, you can also experiment with settings there, like turning off page borders.

By playing with these settings,  it’s possible to go from something like this:

first_form

To something like this:

borderless_small

Your form will look more streamlined and will be ready for your blog, a mobile version of your website, or anywhere else you’d prefer a short-and-sweet signup process.

Other entries you might be interested in:

Embedding Signup Forms on Your Email Archives

Mobile Usability Testing