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 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", "myForm"]);

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

window._mfq.push(["formSubmitFailure", "myForm"]);

--OR--

window._mfq.push(["formSubmitSuccess", "myForm"]);

In all three instances, you need to make sure that the form ID is being passed correctly. In the example above, the ID is "myForm".

Examples:

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

<form id="myForm">
<input type="text" name="firstName" required />
<input type="text" name="email" required />
<button type="submit">Submit</button>
</form>

and the JavaScript we are using to submit the form.

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
event.preventDefault();

const { firstName, email } = form;

sendDataToApi("/my-form-api", {
firstName: firstName.value,
email: email.value,
})
.done(function(response) {
// Server has responded saying the submit was successful!
})
.fail(function(response) {
// Response says the submit failed.
});
});

Since the form uses JavaScript to handle submits instead of a traditional HTML submit. This form uses a custom submit event handler which Mouseflow cannot detect without some help. Therefore, we need to go through this JavaScript function to locate the correct place to invoke the "formSubmitAttempt", "formSubmitSuccess", and "formSubmitFailure" functions. Here is an example of what that might look like.

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
event.preventDefault();

const { firstName, email } = form;

window._mfq = window._mfq || [];
window._mfq.push(["formSubmitAttempt", "checkout-form"]);

sendDataToApi("/my-form-api", {
firstName: firstName.value,
email: email.value,
})
.done(function(response) {
// Server has responded saying the submit was successful!
window._mfq.push(["formSubmitSuccess", "checkout-form"]);
})
.fail(function(response) {
// Response says the submit failed.
window._mfq.push(["formSubmitFailure", "checkout-form"]);
});
});

Did this answer your question?