Zoho Forms: Setup UTM parameter Tracking

Use our AFL UTM Tracker plugin to populate dynamic UTM parameters into your Zoho Forms embedded in your WordPress website.

Minimum Requirements

• AFL UTM Tracker v2.23.0
• WordPress v5.0.0
• Zoho Forms iframe embed

Steps

Let’s summarize the steps to populate the UTM parameters into your Zoho Forms.

1. Enable the “Javascript Merge Tag” feature under the AFL UTM Tracker plugin settings.
2. Create Hidden Fields on Zoho Forms.
3. Get your Zoho Forms Embed Code.
4. Use our Appfromlab HTML Code.
5. Paste our HTML Code in your WordPress page.
6. Test your Zoho Forms.
7. View your Zoho Forms submission.

1. Enable the Javascript Merge Tag feature

You will utilize our Javascript Merge Tag feature to populate the UTM parameters into the Zoho Forms hidden fields.

1. Login to your WordPress Admin dashboard.
2. Go to AFL UTM Tracker > Settings page.
3. Under Attribution section, enable the Javascript Merge Tag feature.
4. Save settings.
5. Clear all page cache from your caching plugin.

2. Create hidden fields on Zoho Forms

1. Login to your Zoho Forms account.
2. Go to your Form > Builder.
3. Add a Single Line field for each UTM parameters below.
4. Set Field Label to the following and set each field’s Visibility to “Hide Field”.
   • Last UTM Source
   • Last UTM Medium
   • Last  UTM Campaign
   • Last  UTM Term
   • Last  UTM Content

3. Setup Field Alias – Prefill URL on Zoho Forms

1. Go to the Settings tab > Field Alias – Prefill URL.
2. Map the respective Field Label to the Field Alias as below:
   • Last UTM Source: utm_source
   • Last UTM Medium: utm_medium
   • Last  UTM Campaign: utm_campaign
   • Last  UTM Term: utm_term
   • Last  UTM Content: utm_content
3. Save the setting.

4. Get Zoho Forms iframe Embed Code

1. Go to the Share tab > Embed > iframe.
2. Copy the iframe code (we will be using this in the next section).

Take note of your iframe src URL highlighted in bold below (we will be using this in the next section).

<iframe aria-label='Contact' frameborder="0" style="height:500px;width:99%;border:none;" src='https://forms.zohopublic.com/xxxxxxxx/form/Contact/formperma/xxxxxxxxx'></iframe>

5. Use our Appfromlab HTML Code

We will be using our HTML wrapper to surround the Zoho Forms iframe code.

1. Replace Line 3 with your Zoho Form iframe embed code.
2. On Line 2, paste your iframe src URL (from previous section) into the data-afl_utm_src=”” attribute.
3. Copy the HTML code (you will be using this in the next step).

HTML Code

Configuring the data attribute

See more data attribute options (e.g optout value) for iframe-based forms.

6. Paste our HTML Code into your WordPress page

1. Login to your WordPress admin dashboard.
2. Edit your Contact Form page.
3. Add a “Custom HTML” block.
4. Paste the Appfromlab HTML Code from the previous step into the block.
5. Save page and clear page cache.

6. Test your Zoho Forms

1. Generate your UTM tracking URL.
2. Visit your UTM URL in private-browsing mode to simulate a new visitor.
3. Submit the form.

7. Check your Zoho Forms Submission

1. Go to your Zoho Forms account.
2. Go to your Form > All Entries.
3. View the entry.