How do I capture form conversions?

Form Analytics will automatically detect conversions on most forms. It does this by adding an event listener to the submit event of the form.

What if my form doesn't use the submit event?

If your form doesn't use the standard submit machinery, an event won't be fired. Thus, Lucky Orange won't be aware of any conversions because they're taking place behind the scenes. In this case, you can make an API call whenever you consider your form to be submitted. In the callback function that handles the post-submission response, you can manually trigger a "successful" form conversion via the following API call:

_loq.push(["submit_form", [b]form[/b], [b]nopagereload[/b]]);

In the code above, you just need to supply two arguments:

• form Object | String — The form object itself or the form's name or id.
• nopagereload Boolean — Whether the form is submitted without a page reload or redirect. If the form is submitted asynchronously, for example, you would pass true. Otherwise, false.

Examples

Imagine we have a simple form that accepts a user's birthday, and that's it. That might look like this:

<form action="/add-birthday" method="post" name="birthday_form" id="birthday_form">
    [comment text="Date-related fields like month/day/year would probably go here" lang="html"]
    <input type="submit" id="add-birthday-btn" value="Add Birthday">
</form>

If the form isn't being submitted via AJAX, you'd want to add something like this to your handler:

var addButtonClickHandler = function(event) {
    var button = event.target,
        form = button.parentElement;
    [comment text="Ensure a queue is available" lang="js"]
    window._loq = window._loq || [];
    [comment text="Save a `submitted` cookie for `birthday_form`." lang="js"]
    [comment text="This will be checked on the next page." lang="js"]
    window._loq.push(["submit_form", [b]form.name[/b]]);
};

If the form is being submitted without a page reload, you might want to add something like this:

[comment text="When Add Birthday button is clicked, submit the form via AJAX" lang="js"]
$('#add-birthday-btn').on('click', function(e) {
    e.preventDefault();
    var $form = $('#birthday_form');
    $.post($form.attr('action'), $form.serialize(), function(response) {
        if ( !response.success )
            return;
        [comment text="Ensure a queue is available" lang="js"]
        window._loq = window._loq || [];
        [comment text="Mark `birthday_form` as fully submitted without any page reload." lang="js"]
        window._loq.push(["submit_form", [b]$form.get(0)[/b], [b]true[/b]]);
    }); 
});