Collect UTM Data Within Hidden Fields for Optin Forms
There are many reasons why you may need to collect UTM data from a URL that someone clicks to go to your landing pages that have optin forms.
We recently released some updates on using URL parameters (essentially the same thing as a UTM) in optin forms. Just so you have them, you can click the links below to read those guides:
How to Prefill fields on an OP3 optin form (opens in new window)
Automatically Pass Optin Form Field Data And Autofil another form (opens in new window)
Now, lets take it another step further and actually use hidden fields on an OptimizePress optin form to collect the UTM data.
Create the fields within your email autoresponder system first:
In order to have fields available for this, you'll need to create them within your email autoresponder, or CRM, as text fields before they can be used on the optin form element.
Special note if you are using ActiveCampaign - after you create the plain text fields you may need to use a little trick to get them to show up in our optin form element.
Just follow this guide if you have any trouble with fields not showing available that you have created in ActiveCampaign (they must be TEXT INPUT fields).
ActiveCampaign fields not showing available within optin form options (opens in new window).
Setting up the Optin Form
If you have already read the "how to prefill fields on an OP3 optin form" from above, it is basically the same process.
1) Add your custom fields to the optin form. In my example I'm using UTM1 and UTM2, but you can use any fields you want:
2) Add the UTM parameter into the field settings.
- Click on the field you want to do this with (notice the utm1 field has the border in blue, which means it is selected)
- Then click the Input Settings Icon
- Then click the Validation tab
Now, fill in the "URL Mapping" setting with the UTM that you want to collect date for.
- Now, fill in the "URL Mapping" setting with the UTM that you want to collect date for.
In this example we have used "utm_source" as the UTM that we are collecting for that custom field.
We'll do the same for the next field, but this time we are collecting utm_campaign as you can see there in the settings:
Make the fields HIDDEN
Now we'll make the two UTM fields hidden so they won't show up when someone visits the page. As long as the UTM data is in the URL, the optin form will capture that data in the fields where you have added the proper UTM parameter like I did above.
1) To make the fields hidden, we'll need to load the main Optin Form Element Toolbar. To do this, just go to the very top of the editor, and click "Optin Form" in the element breadcrumb trail like you see here:
2) Then click the little gear icon in the element toolbar for the optin form, and then click "Advanced Options"
3) Now you'll see the advanced options sidebar on the left of your screen:
4) Simply click on the Eye Icon to the right of the fields you want to make hidden. Note that you need to setup the URL mapping BEFORE you do this, or you will not be able to click on the fields in the optin form to reach those settings unless you make the field not hidden long enough to do so. You'll see after the Eye icon is clicked, it will not show the field on the optin form, but you can still access the visibility setting from the advanced options sidebar.
- click on the Eye Icon to make the field hidden:
- Now you'll see a line through the Eye Icon, and the fields do not show on the optin form, but they will collect the UTM data as long as you setup the fields correctly as demonstrated above.
Congratulations, now you can collect your UTM Data as hidden fields in the optin form!
If you test out your form you should now see those fields get populated as long as the UTM data is in the URL when someone visits the form.
If you run into any issues or need further help, please let us know by putting in a support ticket and we'll be happy to guide you further