Tag: forms

Aug 21
img_57b9a763c0c31

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

Jan 24
example-form

Let’s say I have the Formstack Form below and really want to capture the data of “Amount of Expense” and the User ID that is auto assigned to each submission, in Google Analytics. How would you go about that?

formstack

Set Up On Formstack

  • Within Formstack, navigate to the form > Settings > Emails & Redirects > Confirmation Emails > “Click to Add One” > Content: Custom Message. (You won’t be composing a message, just getting a few variables out of Formstack.)
  • Within the body, select the Unique ID & whatever field have the monetary (value) amount you’d like to capture. Remember that you cannot put personally identifiable data in Google Analytics, so don’t try to capture email, last name, etc. in Google Analytics.
  • Take note of the user ID tag and the tag associated with the expense amount.
  • Press cancel without saving, once you’ve copied that information.

formstack-email-ids

  • Once that screen is closed, navigate to “After the Form is Submitted” within the same page.
  • Select “Redirect to an External URL”, and insert your thank you page URL.
  • Immediately after, add a question mark (?) for a query. Within that query add the user ID tag.
  • Following that tag, add a hash symbol (#) followed by the tag for the expense, as you see below: www.example.com/thankyou.php?{$_submission_id}#{$37021767}.
  • This results in your thank you page having the data passed in the URL so that Google Analytics can parse it.submit-action-form

Set Up Google Analytics

  • Ensure that you have Google Analytics installed on the page the form is embedded and the form’s thank you page.
  • Next, add this script to your thank you page. It will pull the parsed information into Google Analytics as an event submission.

Results

Now the data will go into Google Analytics on each submission.

You’ll also be able to compare the Event Label within Formstack, under Submissions to match it up to the Personal Identification Information:
formstack-submissions

More Information

This tactic can also be use by taking advantage of Google’s Custom Dimensions and Metrics with Google Tag Manager.

Stay Updated