Mouseflow Help & Support

Forms with no successful submits

Follow

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:

 

 

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 create the window._mfq object:

var _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 (a) the window._mfq variable exists (you've invoked "window._mfq = window._mfq || [];" first) and (b) 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:


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>

In this case, it's easy to see that the form uses JavaScript to handle submits. Instead of a traditonal HTML submit (like '<input type="submit" value="Submit">'), this form uses a like with an onclick handler. In this case, we can change the onclick handler, like this:

   <a href="javascript:void(0);" class="submit" onclick="window._mfq = window._mfq || []; window._mfq.push(['formSubmitAttempt', '#formID']); submit_signup();">

That would trigger the 'submit attempt' logging at each click. We would then need to go through the JavaScript function called ('submit_signup();'), to locate the correct place to invoke a 'formSubmitSuccess' or 'formSubmitFailure':

function submit_signup(result) {
window._mfq = window._mfq || [];
// do some processing
if (result == 'success') { window._mfq.push(['formSubmitSuccess', '#formID']); } else { window._mfq.push(['formSubmitFailure', '#formID']); } }

Questions?

If you have questions or need help, feel free to open a ticket or call us at +1 (855) 668-7335.

Have more questions? Submit a request

Comments

Powered by Zendesk