Help talk:Tracking forms with non standard submission

Overview
By default, ClickTale only tracks submissions on forms that are submitted via Standard Submission Elements as defined by W3C. These are:


 * 
 * 
 * 

If your form is submitted via a Non-Standard Submission Element – you can still use ClickTale to properly track form submission by using our Form Submission API.

This article shows how to use the Form Submission API to allow ClickTale to track the following stages of a form submission


 * 1) Tracking Submission Attempt
 * 2) Tracking Client-Side Validation
 * 3) Tracking Server-Side Validation

For simplicity, the examples below assume that there is a form on the page with an ID of ‘someForm’:

Tracking Submission Attempt
This first step of any form submission usually takes place after the visitor has filled the form, and clicked the ‘submit’ element.

When using non-standard submission element, this ‘submit’ element can be any click-able HTML element, such as a button, an image, or a span (to name a few):

Using the Form Submission API, we can let ClickTale know that a submit attempt took place on the page.

This is done by listening to a ‘click’ event on the submit element, and registering a ClickTale ‘submit attempt’ on the actual form when that happens.

For the example below, we’ll assume that the submit element is a with an ID of ‘submitElement’:

This registers a submission attempt on the page, and now ClickTale knows that the visitor tried to submit the page.


 * Please note, that the following steps of indicating Client \ Server-Side Validation are optional, and if omitted, the above snippet is enough to let ClickTale know that there was a submit. ClickTale will then assume that the submission was successful.

If you do need more control over the submission process, and would like to indicate to ClickTale whether or not the submission passed or failed Client \ Server-Side Validation – please continue reading below.

Next, we’ll see how to use the Form Submission API to track Client-Side validation.

Tracking Client-Side Validation (optional)
So the visitor tried to submit the form, and we tracked that there was a submit attempt. That’s great.

But what if the visitor didn’t fill out a required field on the form ?

This will usually result in an error message next to the required field, indicating to the visitor that they must fill out that field. This is called Client-Side Validation.

You can let ClickTale know that although the form was submitted by the visitor – the form wasn’t actually submitted, since it did no pass Client-Side Validation.

This is done by using a different part of our Form Submission API, which is used after Client-Side Validation.

To indicate that the form passed Client-Side Validation, call the ‘ClickTaleRegisterFormSubmitSent’ function, passing in the actual form element itself.

Make sure to call this function after your Client-Side Validation passes:

To indicate that the form failed Client-Side Validation, call the ‘ClickTaleRegisterFormSubmitNotSent’ function, passing in the actual form element itself.

Make sure to call this function after your Client-Side Validation fails:

Last, we’ll see how to use the Form Submission API to track Server-Side validation.

Tracking Server-Side Validation (optional)
Assuming that the form passed Client-Side Validation, your server now gets the form and begins to process the form.

If all goes well, we call this passing Server-Side Validation. If the server encountered an error, this is called failing Server-Side Validation.

If your form is submitted via AJAX, you can use the following function to indicate to ClickTale that Server-Side Validation was successful.

Make sure to call this function after the AJAX response has returned (commonly inside the callback function):

Or, if Server-Side Validation has failed, you should call ‘ClickTaleRegisterFormSubmitFailure’:

If your form is submitted via the standard GET \ POST methods (and not by AJAX), you should add these snippets to the ‘following page’ – i.e. the page that is loaded after the submit attempt. This is commonly the ‘Thank you’ page for a successful submit, or the same page for a failed submit (where the form is reloaded with an error message).

For these types of submissions, we do not need to pass in the actual form element to the Form Submission API, and you would simply call the Form Submission functions without any parameters.

To indicate success:

Or, to indicate failure: