Autofill Forms from Email Merge Fields

So, I always hate it when I receive an email from a company to sign up for an event or download a white paper, but when I click to get to the offer, they couldn’t be bothered to pre-populate the form with information about me they clearly already had (Name, Email, etc.). This is a bit challenging without a CRM, but if you have a good mail client, it can be done easily.

Create a Form:

See example-form.html below.
contact-form

Create The Form URL

Go to your email provider, and identify the merge fields you need. I use MailChimp which you can identify the merge fields for your list by crafting a campaign and in a text box clicking “Merge Tags”:

Once you’ve identified the merge fields, you can create the URL which will be structured very similarly to a UTM tagged URL:
mailchimp-url

After you regular URL like example.com/webinar add a question mark (?), then an identifier, I use “first” for first name. Set the merge tag to equal it, so first=*|FNAME|* if you’re using Mailchimp. That is one field set. To add additional, add an ampersands (&) and another identifier set equal to a form field. Continue until you have all the fields you need.

Add the jQuery Script to All Pages with Form

See example autofill-forms.js below.

This small script will read your URL and identify the information following the question mark and match up your identifier to the field. This should be added to every page the form is present on.

Identify the fields you want to auto-fill and fill them in, i.e. #firstname below corresponds to my input field with the ID of firstname. The name indicated on the right, i.e. “first” is the identifier we used in MailChimp before each equal sign. You can add additional fields as they become necessary.

Test Your URL

Once that has been put in place, test the URL to ensure the fields populate well. If you have the merge tags in place, it should fill with that tag since that is parsed through Mailchimp:

register-merge-field

Once you verify that that URL works, test your merge fields by entering preview mode in MailChimp and choosing “Enable live merge tag info”:

mailchimp-preview
(See the URL at the bottom left for the button I’m hovering over). Click through a few of your subscribers to make sure the merge fields look correct.

Codes

P.S. – Using Google Forms? Check out this easy tutorial

Leave a Comment