WSForm Event Listener

Using this WSForm event listener opens different measurement possibilities: tracking WSForm clicks on submit, submission errors and successful submissions as conversion in your MarTech like Google Analytics, Mixpanel, Microsoft Clarity, Piwik Pro, etc., using GTM. You can now use this data to optimize campaigns, build audiences, analyze performance, and improve form interactions, ultimately boosting your marketing effectiveness.

How to track WSForm Submit Click, Submission Errors and Successful Submissions as Conversion with google tag manager

Here are instructions on using the WSForm event listener script in combination with Google Tag Manager (GTM) to track key form interactions, including submit button clicks, submission errors, and successful submissions.

These interactions can be recorded as events in platforms like Google Analytics (GA4), Piwik Pro, and Mixpanel, and as conversions in Google Ads, Meta Ads, etc.

Follow the step-by-step instructions below to seamlessly implement WSForm tracking in your GTM container.

Step 1: Create a Custom HTML Tag & Add the WSForm Event Listener Script

Start by copying the WSForm event listener script provided below and adding it to a new Custom HTML Tag in GTM.

Navigate to GTM and create a new tag of type Custom HTML.
Paste the following WSForm event listener script into the tag:
Set the trigger for this tag to DOM Ready, ensuring the script initializes properly when the page loads.

You can also utilize the Window Loaded trigger if DOM Ready doesn’t work for you.

What the WSForm Event Listener Script Does:

This script listens for specific WSForm interactions and pushes events to the dataLayer. The following events are tracked:

wsform_submit_clicked: Fires when the submit button is clicked.
wsform_submit_success: Fires when a form submission is successful.
wsform_submission_error: Fires when a submission error occurs.

Step 2: Create Custom Event Triggers

Next, set up custom event triggers in GTM to capture the WSForm interactions.

Go to the Triggers section in GTM.
Create a new Custom Event Trigger for each interaction:

Trigger Name: CE – WSForm Submit Clicked
- Event Name: wsform_submit_clicked
Trigger Name: CE – WSForm Submit Success
- Event Name: wsform_submit_success
Trigger Name: CE – WSForm Submission Error
- Event Name: wsform_submission_error

These triggers will be used to fire your analytics and marketing tags.

Step 3: Define DataLayer Variables

To add more context to your WSForm events, create the following dataLayer variables in GTM:

form_id: Captures the WSForm form ID.
instance_id: Captures the WSForm instance ID.
form_object.label: Captures the WSForm form name (use the dataLayer key “form_object.label“ for this).

Step 4: Configure Marketing Tags and Pixels

Once your variables and triggers are ready, create your marketing tags (e.g., GA4 Events, Meta Pixels) and attach the appropriate WSForm triggers. Use the variables in the tag configurations to provide additional context for the events.

For example, in a GA4 Event Tag configuration:

Event Name: wsform_event
Event Parameters:
- form_id → {{dlv – form_id}}
- instance_id → {{dlv – instance_id}}
- form_name → {{dlv – form_object.label}}

This setup ensures that each WSForm interaction is accurately tracked across your analytics and marketing platforms.

Additional Notes:

The WSForm event listener script is Tag Manager agnostic, meaning it can also be used with other Tag Management Solutions and not just limited to GTM, you could also use it without a tag manager. However, the implementation principles remain the same.

You can speed up the implementation time by scrolling down this resource page to find a downloadable premade GTM recipe template. Download, customize, and use it to track WSForm interactions like submit button clicks, submission errors, and successful submissions with minimal effort.

<script>
(function () {
// Ensure jQuery is available
if (typeof jQuery === 'undefined') {
console.error('jQuery is required for WSForm event tracking.');
return;
}

// Function to push events to dataLayer
function pushToDataLayer(eventType, formObject, formId, instanceId) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: eventType,
form_id: formId,
instance_id: instanceId,
form_object: formObject,
event_type: eventType
});
console.log('Pushed to dataLayer:', eventType, formId, instanceId);
}

// Attach event listeners
jQuery(document).on('wsf-submit-before', function (event, formObject, formId, instanceId) {
pushToDataLayer('wsform_submit_clicked', formObject, formId, instanceId);
});

jQuery(document).on('wsf-submit-success', function (event, formObject, formId, instanceId) {
pushToDataLayer('wsform_submit_success', formObject, formId, instanceId);
});

jQuery(document).on('wsf-submit-error', function (event, formObject, formId, instanceId) {
pushToDataLayer('wsform_submission_error', formObject, formId, instanceId);
});

console.log('WSForm event listeners initialized.');
})();
</script>

Video of how to use the listener

Related Event Listener

Amelia Appointment Booking Form

Use this Amelia Appointment Booking Form event listener to measure the booking form flow and completion.

Barns2 WooCommerce Restaurant Ordering

Track user activity on Barns2 WooCommerce Restaurant Ordering to optimize the ordering experience.

Amelia Event Registration Form

Monitor user interactions and successful submissions on Amelia Event Forms to trigger tracking pixels seamlessly.

download the google tag manager recipe for tracking WSForm Submit Click, Submission Errors and Successful Submissions as Conversion

we make you smarter with data

made with ❤️

The DumbData Team