How to Track Form Submissions on Dynamic/Ajax Forms in VWO?

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:

If you don't want the code snippets to be hardcoded, you can use any tag manager to implement them.

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 the 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 a failure, use this code in the form error callback function of your form:

   window.VWO = window.VWO || [];
   window.VWO.push(['nls.formAnalysis.markSuccess', formInstance, 0]);