Tracking Form Submissions in CustomerLabs

Form submissions are actions that users perform when they fill out and submit a form on your website. Tracking these events is essential for lead generation and understanding user intent.

Form Submission Events

The following events are commonly used to track form interactions in CustomerLabs:

• Form Submitted
• Lead Generated
• Contact Us Form Submitted
• Newsletter Subscribed
• Registration Completed

Danger

If events are configured via Google Tag Manager (GTM), ensure that the event name triggered to CustomerLabs and the GTM trigger event name does not match. Otherwise, it will trigger an infinite loop of events.

Example, for dataLayer.push ({'event': 'form_submit', 'form_data': {...}})

_cl.trackClick('form_submit', properties) should NOT be set up.

Instead, the event name should be modified to something else like _cl.trackClick('cl_form_submitted', properties)

Tip

When these events are sent to other platforms that have native integration with CustomerLabs (like Meta or Google Ads), they are automatically transformed to the standard lead or registration events of the respective platform.

Properties Object

Common Parameters

The following parameters are recommended (not mandatory) for form submission events. These should be included in the customProperties object.

Parameter	Type	Description
form_name	string	The name or ID of the form.
form_id	string	The unique identifier for the form.
page_url	string	The URL where the form was submitted.

Either one of these will have to mandatorily be passed on to create a user profile. These should be included in the user_traits and external_ids object.

Parameter	Type	Description
email	string	The email of the user.
phone	string	The phone number of the user.

Standard Form Submission

This event is triggered when a user successfully submits a form. It is crucial to capture user details like email or phone to identify the user.

Syntax

Javascript

var properties = {
    "customProperties": {
        // Event properties
        // User traits (email, name, etc.)
        // External IDs
        // Identity mapping
    }
}
_cl.trackClick("Form Submitted", properties)

Example - Lead Form Submission

In this example, we capture user information and trigger both the trackClick event and the identify call.

Javascript

var eventName = "Contact Us Form Submitted";

var properties = {
  "customProperties": {
    "form_name": {
      "t": "string",
      "v": "Contact Sales Form"
    },
    "form_id": {
      "t": "string",
      "v": "contact_sales_001"
    },
    "user_traits": {
        "email": {
            "t": "string",
            "v": "john.doe@example.com"
        },
        "first_name": {
            "t": "string",
            "v": "John"
        },
        "last_name": {
            "t": "string",
            "v": "Doe"
        },
        "phone": {
            "t": "string",
            "v": "9876543210"
        },
        "company": {
            "t": "string",
            "v": "ABC Corporation"
        }
    },
    "external_ids": {
        "identify_by_phone": {
            "t": "string",
            "v": "9876543210"
        }
    },
    "identify_by_email": {
        "t": "string",
        "v": "john.doe@example.com",
        "ib": true
    }
  }
};

// Trigger the event
_cl.trackClick(eventName, properties);

// Identify user if email exists
var email = properties.customProperties.identify_by_email.v;

if (email) {
  _cl.identify(properties);
}

Note

It is a best practice to always include user_traits and external_ids in form submission events and trigger the identify call. This ensures that the lead is correctly associated with a user profile in CustomerLabs.

Multi-step Form Submission

Multi-step forms collect user information across several pages or steps. The key to tracking them correctly in CustomerLabs is:

• First step capturing email or phone → Trigger Create user event to create the user profile.
• Subsequent steps capturing more PII → Trigger Update user event to update the existing user profile without creating a duplicate.

Tip

This pattern ensures that only one user profile is created per user, and all subsequent information is appended to the same profile via the identify_by_email or identify_by_phone identifier captured in the first step.

Step 1 – Capture Email / Phone (Create User)

This is the first step of the form where the user enters their email or phone number. Use Create user here to create the user profile.

Javascript

// Step 1: User enters their name and email
var properties = {
  "customProperties": {
    "form_name": {
      "t": "string",
      "v": "Registration Form - Step 1"
    },
    "form_id": {
      "t": "string",
      "v": "registration_form_001"
    },
    "user_traits": {
      "first_name": {
        "t": "string",
        "v": "John"
      },
      "last_name": {
        "t": "string",
        "v": "Doe"
      },
      "phone": {
        "t": "string",
        "v": "9876543210"
      }
    },
    "identify_by_phone": {
      "t": "string",
      "v": "9876543210",
      "ib": true
    }
  }
};

// Trigger the form step event
_cl.trackClick("Quiz Started", properties);

var email = properties.customProperties.identify_by_email.v;

// Create the user profile
if (email) {
  _cl.identify(step1Properties); // Creates the user in CustomerLabs
}

Step 2 – Capture Additional PII (Update User)

In subsequent steps, the user fills in personal details like address, city, zip, and gender. Use _cl.identify(properties, "Update user") to update the existing profile without creating a new one.

Javascript

// Step 2: User enters their location and demographics
var properties = {
  "customProperties": {
    "user_traits": {
      "email": {
        "t": "string",
        "v": "john.doe@example.com"
      },
      "dob": {
        "t": "string",
        "v": "1990-01-01"
      },
      "gender": {
        "t": "string",
        "v": "Male"
      }
    },
    "external_ids": {
      "identify_by_email": {
        "t": "string",
        "v": "john.doe@example.com"
      }
    }
  }
};

// Update the existing user profile — does NOT create a duplicate
_cl.identify(properties, "Update user");
_cl.trackClick("Quiz Step 2 Completed", properties);

Step 3 – Final Submission

The final step triggers the actual form submission event, tying all the collected data together.

Javascript

// Step 3: Final form submission
var properties = {
  "customProperties": {
    "user_traits": {
      "address1": {
        "t": "string",
        "v": "123, Main Street"
      },
      "city": {
        "t": "string",
        "v": "Los Angeles"
      },
      "state": {
        "t": "string",
        "v": "CA"
      },
      "zip": {
        "t": "string",
        "v": "90001"
      },
      "country": {
        "t": "string",
        "v": "USA"
      }
    }
  }
};

// Trigger the final lead event
_cl.trackClick("Quiz Completed", properties);

// Update user with final details
_cl.identify(properties, "Update user");

Note

Summary of the pattern:

• Step 1 (phone captured) → _cl.identify(properties) → Creates user
• Step 2 (additional PII) → _cl.identify(properties, "Update user") → Updates the same user
• Step 3 (additional PII) → _cl.identify(properties, "Update user") → Updates the same user

Next Steps

Now that you’ve set up form tracking, you might want to look at:

• Identify (Create / Update User)
• Javascript API Documentation
• How to setup a custom Source