Javascript Embed Forms

You can use our AFL UTM Tracker plugin and a HTML wrapper code to populate UTM parameters into Javascript-based Embed Forms.

This documentation is for SaaS-based forms (e.g Zoho, Jotform). The forms must have support for the feature below. These terms mean the same and are often used interchangeably.

Pre-populate Form Fields
Pre-fill Form Fields
Dynamically Populate Form Fields

Minimum Requirements

AFL UTM Tracker v2.23.0
WordPress v5.0.0

NOTE: Certain form builders will not work with this solution because they use virtual DOM which requires using their Javascript API to set the form value. Please view the Other Forms Integration list for the relevant forms.

HTML Wrapper Code

You will need to use our HTML wrapper to surround the HTML Script tag which you have obtained from the SaaS-based form builders.

If the form builders have includes additional files like CSS files, you need to place it outside of our HTML wrapper.

Basic HTML Wrapper Code

Advanced HTML Wrapper Code

Configuration

data-afl_utm_src

This attribute is for the purpose of remembering the original script path. Copy the src=”” value from the original HTML Script tag and paste into the data-afl_utm_src=””.

data-afl_utm_src_type

Accepted values are “script” or “iframe”. Since this is a Javascript-based form, we will set the value as “script”.

data-afl_utm_src_suffix

This is the URL query format to be passed to the form.
It supports using our Javascript Merge Tags. Each Merge Tag must be surrounded the curly brackets.
Each parameter will need to correspond to the respective hidden field name (not label name) created on the form builder’s website. Please read the form builder’s documentation on “Pre-populating form fields”.

For example, if you want to passed the GCLID value to your form:

data-afl_utm_src_suffix="utm_source={afl_utm_js:utm_source}&utm_medium={afl_utm_js:utm_medium}&utm_campaign={afl_utm_js:utm_campaign}&utm_term={afl_utm_js:utm_term}&utm_content={afl_utm_js:utm_content}&gclid={afl_utm_js:gclid_value}"

data-afl_utm_src_optout

Accepted values are “1” or “0”. It works hand-in-hand with Cookie Consent Banner.

“1” means the visitor can deny UTM parameter tracking. No attribution will be passed to the form.
“0” means the visitor cannot deny UTM parameter tracking after accepting. This will help to prevent the form from reloading after consent is denied.
The default value is “1” when the property is not provided.

data-afl_utm_src_optout_use_default

Accepted values are “0” or “1”. This option affects only when the consent is denied.

“0” means disable our Javascript Merge Tag “default” value filter.
“1” means enable our Javascript Merge Tag “default” value filter.
The default value is “0” when the property is not provided.

When consent is denied, all Javascript Merge Tag value will be empty. But if you need to have a specific fallback value when consent is denied, then use the default value filter in the data-afl_utm_src_suffix attribute.

data-afl_utm_src_suffix="utm_source={afl_utm_js:utm_source|default:hello}"

data-afl_utm_src_optout_value

Accepted value is a string. Set a value if you want to have a default value for all parameters (using our Javascript Merge Tags) when the consent is denied. For example:

data-afl_utm_src_optout_value="deny"
data-afl_utm_src_optout_value="NA"

When the visitor denies consent, the following URL query will be send to the form:

https://www.form-url.com/?utm_source=deny&utm_medium=deny&utm_campaign=deny.....

data-afl_utm_src_optout_suffix

You can use a URL query format just for visitors who denied consent. This will overwrite the data-afl_utm_src_suffix attribute.

data-afl_utm_src_optout_suffix="consent=deny"