Knowledge base | mouseflow

Troubleshooting: Forms with no successful submits

After adding a new form, you might find that the form report claims no successful submits have been made. While that might be the case for forms with very little interaction, it could also mean there's a problem detecting successful submits.

Let's take this form as an example:

Form with no successful submits

In this form, we have interactions on two fields ("Name" and "Email") but no successful submits. Instead, we see an abnormally high drop-off rate in the last field. This is a good indication that our recording script has problems detecting the successful submits from your form.

Why are the submits not being picked up?

Our Form Analytics suite considers a submit a "success", when there is a submit event (in the traditional sense of HTML) followed by a redirect to another page. If either of these don't happen for your form, Mouseflow won't detect the submit.

If either of the following are true, Mouseflow won't detect the submit:

  • Your submits are handled via JavaScript
  • No redirect takes place after a submit

To work around this, you need to tell us when a successful submit is made via some additional code.

Notifying Mouseflow of Submits

First, you need to ensure the _mfq object is available:

window._mfq = window._mfq || [];

Next, tell Mouseflow when a submit is attempted (by clicking submit or similar):

window._mfq.push(['formSubmitAttempt', '#formID']);

Finally, depending on the result, tell Mouseflow to count the submit as either a "failure" (validation issue) or a "success":

window._mfq.push(['formSubmitFailure', '#formID']);

--OR--

window._mfq.push(['formSubmitSuccess', '#formID']);

In all three examples, you need to make sure that the form ID is being passed in correctly. In the example above, it's "#formID".

Examples:

Let's use the form from earlier as an example:

Form with no successful submits

Here we have a simple form, with two input fields:

<form id="formID" method="post" name="test_form"> 
   <input type="text" class="text" name="name">
   <input type="text" class="text" name="email">
   <a href="javascript:void(0);" class="submit" onclick="submit_signup();">
      <span>Submit</span>
   </a>
</form>

And a corresponding JavaScript function, submit_signup()

<script>
    function submit_signup() {
        var success = send_data_to_api();
        if (success) {
            // Show OK message
        } else {
            // Show Fail message
        }
    }
</script>

In this case the form uses JavaScript to handle submits. Instead of a traditonal HTML submit using a submit button: <input type="submit" value="Submit">, this form uses a link with an onclick handler. In this case, we can change the submit_signup function like this:

<script>
    function submit_signup() {
        window._mfq = window._mfq || [];
        window._mfq.push(['formSubmitAttempt', '#formID']);
        var success = send_data_to_api();
        if (success) {
            // Show OK message
        } else {
            // Show Fail message
        }
    }
</script>

We would then need to go through this JavaScript function to locate the correct place to invoke a 'formSubmitSuccess' or 'formSubmitFailure'. In this case the best way to do that would be:

<script>
    function submit_signup() {
        var success = send_data_to_api();
        if (success) {
            window._mfq.push(['formSubmitSuccess', '#formID']);
            // Show OK message
        } else {
            window._mfq.push(['formSubmitFailure', '#formID']);
            // Show Fail message
        }
    }
</script>