Home / Integrations / Google Tag Manager / Populate form fields from URL Variables using GTM
Populate form fields from URL Variables using GTM

Populate form fields from URL Variables using GTM

If your goal is to improve your visitor experience and increase conversion rates, then you will know that the less effort a visitor has to make to reach the information they are looking for, the more likely they are to convert. Having a visitor fill in a form distracts away from the ultimate goal of having them convert.

One step closer to this goal is to help your customers and populate form fields from URL variables sent in email campaigns. This means your visitors are only one click away from the information they and more likely to convert.

Less information to fill in = higher conversion rates

If you’re already tracking visitor activity using URL or Form variables in Woopra, this will also help in joining your visitor data when an email is clicked across different devices.

For this example we’re going to take a simple form with a Name, Email and Phone Number, which will auto populate based on a link click from a Mailchimp email to produce what we call a ‘one click form’.

Update your form with field ID’s:

To ensure that our URL variables are passed to the correct fields, we need to first ensure that ID’s are set on each form field which needs to be passed. In this case we are using the Name, Email and Phone Number fields, so we will set our field ID’s to correspond correctly to these fields.

You can tailor this example for your own form fields/variables.

Create URL Variables in GTM:

For the one click form to work, it requires that your visitors are on your mailing list in which you can pass query variables in emails you send. This is possible in email systems such as Mailchimp through the use of merge fields.

For Example: A subscriber clicks a merge link in an email. You want to have all of these 3 fields sent to Woopra to identify that customer for future visits.

http://www.yourwebsite.com/?email[email protected]&name=Fred&phone=123456789

  1. Open GTM and navigate to Variables > Create new
  2. Name the variable something you can remember
  3. Select URL as the variable Type
  4. Select Query component as the variable
  5. Enter your query key. In the example below we have used email
  6. Repeat for variables Name, Phone, etc

Populate form fields from URL Variables using GTM

Create Trigger in GTM:

  1. Open GTM and navigate to Triggers > Create New
  2. Name the Trigger
  3. Select Page View as the event
  4. If you wish, only fire when the Page URL contains the query variable set in the previous step

Populate form fields from URL Variables using GTM

Create JavaScript Tag in GTM:

  1. Open GTM and navigate to Tags > Create New
  2. Name your tag
  3. Choose HTML Tag as the product type
  4. Configure the tag with the JavaScript which will auto populate the form fields
  5. Add trigger set from the previous step which the tag will fire on

(Note: {{URLEmail}} {{URLName}} & {{URLPhone}} are the names of the variable which you created in GTM)

Populate form fields from URL Variables using GTM

Woopra Integration:

If you’re using Woopra, you can take this data one step further and start tracking your visitors cross-device as they open your email campaigns through the same URL variables we’ve just created. To do this, simply update the tag code to include the Woopra Identify tracking information.

Test out your form with URL variables:

The final step is to test out the work you’ve just done by passing a fake variable to see if your form fields auto populate.

http://www.yourwebsite.com/?email[email protected]&name=Fred&phone=123456789

If everything is working, you should see your form fields populated with the name, email and phone from the example URL above. If it’s not working, ensure you’ve published your GTM container and you’ve typed in your URL correct.

Hope you’ve enjoyed reading – please post any questions or comments you might have below :).

  • Was this Helpful ?
  • yes   no

About The Moo Master

As today's world moves towards more cloud based solutions, it's not always easy to find an all-in-one solution to a business problem. We focus on business development. finding new, creative and innovative ways to use different IT systems to enhance and automate business processes. We're happy to share our knowledge and solutions we've come up with over the years to some of those unique IT/Business problems.

Leave a Reply

Your email address will not be published. Required fields are marked *