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']); } }

 

Have more questions? Submit a request

Comments

  • Avatar
    ben.hayes

    This is helpful. What if you have a form that is dynamically generated and you can't modify the submit button to have onclick code? Do you recommend using JavaScript/jQuery to detect the button click and then simply run "submit_signup();" inside that function? System in question is Oracle Eloqua.

  • Avatar
    Morten Hornbaek

    If you have a dynamically loaded form, you can indeed use JavaScript/jQuery to detect the submit event. Something like this (thanks for the suggestion, Ben), could do the trick:

    //get form ID
    var formId = '#' + $('form').attr('id');

    //defining _mfq variable to avoid error, if Mouseflow tracking code is not loaded on page
    var _mfq = _mfq || [];

    //on successful form submit, notify mouseflow
    $(formId).on('submit', function() {
    _mfq.push(['formSubmitSuccess', formId]);
    });

    Note that in this example, you would always get the ID of the first form found on the page. If you have multiple forms loaded on the page and need to select a specific one, you would need to change the initial selector. As an example, to target the second form found on the page, you could do something like this:

    //get form ID of second form
    var second_form = $('form')[1];
    var formId = '#' + $(second_form).attr('id');

  • Avatar
    ben.hayes

    Thank you Morten for the fast code suggestion! Correct me if I am wrong but I believe the variable formId needs to be surrounded in single parentheses? Would it be like below?

    var formId = "'" + '#' + $('form').attr('id') + "'";

    Thank you!

Powered by Zendesk