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 three fields ( "First Name", "Last Name", and "Accept Terms") 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 doesn't happen for your form, Mouseflow won't detect the submit.

If either of the following is 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".

Note: The ID must have a hash sign "#" prepended when pushing the submission state to Mouseflow.


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 handle submits instead of a traditional HTML submit:

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.
});
});

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("#checkout-form");

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?