Apr 5, 2010

How to pre-fill items on your MailChimp hosted form

Sometimes you’ll find that you want to guide potential subscribers’ preference or options, just to point them in the right direction. You may have noticed this about the MailChimp hosted forms, but here’s an option to try out if you’re linking to your sign-up forms. (Warning: not for those who get queasy at the site of raw html code.)

(Edit: this method will actually only work with visible items on your form. If you’re using hidden forms, it won’t work unless you put those hidden inputs on your form via the advanced designer. Using the embedded form, you can certainly track that way.)

Basically, the hosted forms are pretty versatile in the fact that they can capture and extract query strings and then pre-fill the form based on values that you can define. This gives you the ability to put in text or pre-select certain items on your form.

So, how do you do it? The first thing you’ll need is the full URL of your sign-up form. It should look something like us1.list-manage.com/subscribe?u=XXXXX&id=YYYY where the u and id values define your unique MailChimp form. Next, you’ll need to take a look at the source code of your sign-up form just to gather a little bit of information. In particular, you’re looking for all of the input elements for your html form. Here’s a sample screenshot.


Next, take note of the "name" attributes of the inputs. These should look something like "MERGEZ" where Z is a number. Basically you need to make up "name=value" pairs and attach them to the end or your MailChimp form URL as an additional query. In the above screenshot, "MERGE0" is the email address input and "MERGE1" is the First Name input.

An example of a query that will work is "MERGE1=Freddie" which basically says, "Set the First Name field as ‘Freddie.'" Simple, right?  Here’s the before URL and the after URL. (Keep in mind, standard URL encoding rules apply to all of this. When in doubt, just type in the text you want in a browser address bar and go to the page. Most modern browsers will auto encode those characters.)

Before link and visual:


After link and visual:


Once you test this out and try it, it’s easy to go crazy with the options. Here’s a URL that puts in a name, pre-selects the "Second Choice" on the form, inserts a favorite website, and sets the preferred format to mobile.

Link and visual:


You may be wondering about the groups fields? Those are a bit special and so deserve some individual attention. Groups come in a few flavors: checkboxes, radio buttons, and drop-downs.

For a groups field with checkboxes, you want to think about it as an array of true and false options. You still want to maintain the "name=value" relationship described above, so in this case, the desired query looks like "group[5][1]=true" or "group[5][4]=true" (which will depend on the group you’re selecting). Here’s a quick visual.


You can then tack that onto your form URL like this. Link and visual:


(Bonus Points: create enough groups on your list, then view the source of your hosted form to notice a numerical pattern.)

The versions for radio buttons and drop-downs are easy enough to set up (they behave mostly like the standard fields) and their implementations are left as an exercise to the reader. (Phrases like that are borne of too many mathematics courses.)

So, of what use is this? Setting first names and email addresses isn’t very practical. However, selecting particular options for your subscribers before hand (like preferred format or newsletter frequency or even the interest groups field) can help you guide your readers in the right direction. Sometimes having some options filled out already makes the subscriber more aware of the available options and they may go and fill out more items.

Hope that helps out. Definitely test all these out before putting them into practice.