WS Form Event Listener: Track Clicks, Successes and Errors
WS Form gives you three separate events, including failed submissions. Here is what each one means and which one should be your conversion.
WS Form is unusual in a good way. Its listener reports three separate things: the submit being clicked, the submission succeeding, and the submission failing. Most form listeners only tell you about success.
This post explains what each event means and which one should be your conversion.
The three events
wsform_submit_clicked
Fires when someone presses submit, before anything has been validated or sent. Useful for measuring intent and abandonment. Not a conversion.
wsform_submit_success
Fires when the submission succeeded. This is your conversion event.
wsform_submission_error
Fires when the submission failed. Genuinely valuable, and almost nobody tracks it.
If clicked fires a hundred times and success fires sixty, you have a forty percent failure rate that nobody in the business knows about. That is usually a validation problem you can fix in an afternoon.
The listener code
This is the WS Form listener from DumbData.
The full listener is in the copy block at the bottom of this page, with a copy button. It is reproduced exactly as DumbData publish it, so you can copy it straight from here or from their page.
One change worth making before you go live
This listener includes console.log statements. They are helpful while you are setting it up and they are noise in production, where they log to the browser console on every submission.
Once you have confirmed it works, remove the three console.log lines and the one at the end. Nothing else changes. That is the only modification I would make to this listener, and it is cosmetic rather than functional.
Installing it in GTM
Create a Custom HTML tag and paste the listener.
Trigger on All Pages or the pages with forms.
Save and Preview.
Creating the triggers
Create one Custom Event trigger per event you care about:
CE WS Form Success, event name wsform_submit_success
CE WS Form Error, event name wsform_submission_error
CE WS Form Clicked, event name wsform_submit_clicked, if you want the intent signal
Creating Data Layer Variables
Data Layer Variable named form_id. Call it DLV WS Form ID.
Data Layer Variable named instance_id, if you have the same form embedded more than once on a page.
The listener also pushes form_object, which is the whole form object. You will rarely need it and it is not something to send to an analytics tool.
Sending it to GA4
Create a GA4 Event tag.
Event name: generate_lead
Add a form_id parameter from your Data Layer Variable.
Trigger: CE WS Form Success.
Sending conversions to Google Ads
Create a conversion action in Google Ads and note the ID and label.
Add a Google Ads Conversion Tracking tag with those values.
Trigger: CE WS Form Success.
Turn on Enhanced Conversions if the form collects an email: Enhanced Conversions setup
Meta and everything else
Same trigger, different tag. A Meta Pixel tag with the Lead event, Mixpanel or Piwik PRO from their GTM templates, or a LinkedIn or Microsoft conversion tag.
Tracking the failures too
Send wsform_submission_error to GA4 as its own event, named something like form_error, with the form_id attached. Do not mark it as a conversion.
Then build a simple report comparing form_error against generate_lead per form. Any form with a meaningful error rate is losing you leads right now.
Testing
Open GTM Preview and press submit on an empty required field to trigger an error.
Confirm clicked fires, then error fires, and that success does not.
Fill it in properly and submit.
Confirm clicked fires, then success fires.
Confirm your conversion tag fired only on success.
Common issues
jQuery error in console. The listener checks for jQuery and logs an error if it is missing. WS Form normally loads it.
Conversion fires on failures. You attached the tag to the clicked trigger rather than the success trigger.
Console noise in production. Remove the console.log lines as above.
Privacy considerations
Never send names, emails, phone numbers or free text into GA4.
Hash anything you send to an ad platform for matching.
Gate the tags behind marketing consent: Consent Mode v2 in GTM
Final thoughts
WS Form gives you more visibility than most form tools. Use success as your conversion, and spend twenty minutes looking at the error event. It usually pays for itself immediately.
Listener from DumbData.
Need this built properly?
Tracking failed submissions finds leads you are already losing. I set up and repair tracking for ecommerce stores and lead generation businesses, so the numbers in your ad accounts match the money in your bank account.
Have a look at what I do, or book a call and we can go through your setup together.
<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>
