How to Track Form Submissions on Dynamic/Ajax Forms

Last updated

To track form submissions on dynamic or AJAX forms, use the following API:
Syntax:

window.VWO = window.VWO || [];
window.VWO.push(['nls.formAnalysis.markSuccess', <REPLACE_THIS_WITH_YOUR_FORM_INSTANCE>, <IS_FORM_SUCCESS_VALUE>])

where,

  • <IS_FORM_SUCCESS_VALUE> This value could be 1 (for success) or 0 (for failure) based on whether the form submission is success or failure.
  • <REPLACE_THIS_WITH_YOUR_FORM_INSTANCE> This is your form instance (jquery or JavaScript).

For example, let’s say this is the HTML code of your form:

<form id=“my-form-id” class=“my-form-class”>
………..
</form>

Getting form instance

Add the following JavaScript code to your website for getting form instance:

  1. In case of using pure JavaScript: 
    var formInstance = document.getElementById('my-form-id');
  2. In case of using jQuery: 
    // Getting by form id
    var formInstance = $('#my-form-id');// OR//Getting by form class
    var formInstance = $('.my-form-class');

Track success and error event of the form

Add the following JavaScript code to your website to start tracking the success and error event of the form:

  1. If your form submission is successful, use this code in form success callback function of your form: 
    window.VWO = window.VWO || [];
    window.VWO.push(['nls.formAnalysis.markSuccess', formInstance, 1]);
  2. If your form submission is failure, use this code in form error callback function of your form: 
     window.VWO = window.VWO || []; window.VWO.push(['nls.formAnalysis.markSuccess', formInstance, 0]);

Contact Us / Login

Product
Resources Home