Custom Forms Data Layer Activity

Our Custom Forms Listeners make it easy to generate data layers to track activity from forms across your website. Data Layer activity is structured for use with Google Tag Manager and includes form loads, submissions, and validation errors - you can even push custom values into the data layer based on rules you write. Check out the data layer samples below and get started for free!

Custom Forms Data Layer Examples

Learn more about how ListenLayer generates powerful data layers from the HTML Forms activity on your website. The data layer is a unique object in the browser reserved for holding measurement data. Events and variables that appear in the data layer can be referenced inside Google Tag Manager to power your analytics and conversions tracking.

Custom Data Layer Events

Like the ones shown here, generate data layer events when Custom Forms activity occurs on your website or landing pages. Collect data and trigger conversions every time forms load, validation fails, or form submissions are successful. You can even track comprehensive activity from forms inside iframes!

Unlike GTM’s “form submission trigger,” our Listeners are built with extreme accuracy so that you can rely on them for true conversion tracking. ListenLayer also allows you to customize your data layers and monitor activity to receive notifications when anomalies occur.

event: 'customFormLoaded',

event: 'customFormSubmitted',

event: 'customFormValidationFailed',

Track Custom HTML Forms In Iframes

Finally! You can track forms from inside of iframes accurately and with ease! Place a simple script inside your iframes to enable all of the powerful features of ListenLayer.

<! - Custom Forms Helper Script-->
<script>(function(w,d,s){var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src='';f.parentNode.insertBefore(j,f);})(window, document, 'script');</script>

Automatic Data Layer Values

ListenLayer pushes critical information from your website forms into the data layer automatically. Automatic values are pushed into the data layer inside an element called formAutomaticValues, as shown here. This includes form ID, CSS ID, CSS class, and details about every field on the form. The location of the form on your website is also pushed into the data layer automatically.

  formAutomaticValues: {
    formID: "form4",
    formCSSID: "form4",
    formCSSClass: "custom-form-4 custom-form-style init",
    formFieldValues: {
      your_full_name: {
        id: "full-name",
        value: "test",
        label: "Your Full Name*",
        name: "your_full_name",
        type: "text"
      short_description: {
        id: "short-description",
        value: "test",
        label: "Short description*",
        name: "short_description",
        type: "textarea"
      cars: {
        id: "cars",
        value: "First Choice",
        label: "Select an option*",
        name: "cars",
        type: "select-one"
    formLocation: {
      url: "",
      tld: "",
      hostname: "",
      pathname: "/custom-forms/",
      queryString: null,
      fragment: null,
      protocol: "https",
      originPathName: ""

Custom Data Layer Values

Using data from your form, website, and user activity, ListenLayer allows you to write powerful rules that generate custom data layer values. With this feature, data collection and marketing analytics becomes nearly limitless!

Examples of popular custom data layer values for Custom Forms:

  • Fire or segment conversions (or change conversion values) based on form quality using a visitor’s email address (i.e., emails might be less valuable to your organization).
  • Categorize Custom Forms across your website and use these categories to organize conversion activity.
  • Chain multiple Custom Forms into a multi-step experience and label each step’s number.

Amplify your website analytics with powerful custom data layer values for Custom Forms, with no programming required!

formCustomValues: {
	//custom variable values display here based on rules you write
	formCategory: 'Demo',
	formName: 'Landing Page Demo Form',
	formQuality: 'Low'