Skip to Content
Menu

updateFormFlow()

Create a string of form fields/events as the user moves through a form.

JavaScript February 7, 2021

Usage

JavaScript
nebula.updateFormFlow(formID, field, info)

Parameters

formID
(Required) (String) A unique ID of the form
Default: None

field
(Required) (String) The name of the form field or event action
Default: None

info
(Optional) (String) Additional information
Default: None

Parameter Notes

Form flow data is stored in a window object called formFlow. The form ID is used as a key to store the field data.

Request or provide clarification »

Additional Notes

This function concatenates the new field/event to the existing string and then sets a custom dimension (if used). As the user moves through the form, the data is sent to Google Analytics scoped to their session.

Abandonment can be deciphered when the form flow does not end with a [success].

This function is already built into Contact Form 7 detections, but can be manually added to other forms too.

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/js/modules/forms.js on line 436.

    No Hooks

    This function does not have any filters or actions available. Request one?

    Note: This function contains 1 to-do comment.

    JavaScript
    nebula.updateFormFlow = function(formID, field, info = ''){
        if ( typeof nebula.formFlow === 'undefined' ){
            nebula.formFlow = {};
        }
    
        if ( info !== '' ){
            if ( info.length > 25 ){
                info = info.substring(0, 25) + '...'; //Truncate long info text
            }
    
            info = ' (' + info + ')';
        }
    
        if ( nebula.formFlow[formID] ){ //If this form ID already exists
            nebula.formFlow[formID] += ' > ' + field + info; //Append the next field to the string
        } else {
            nebula.formFlow[formID] = formID + ': ' + field + info; //Otherwise start a new form flow string beginning with the form ID
        }
    
        //Set the user property. @todo "Nebula" 0: When GA4 allows session-scoped custom dimensions, update this to session scope!
        gtag('set', 'user_properties', {
            form_flow: nebula.formFlow[formID]
        });
    
        return nebula.formFlow[formID];
    };
    

    Override

    To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).

    JavaScript

    For non-module import functions:

    nebula.updateFormFlow = function(formID, field, info){
        //Write your own code here, leave it blank, or return false.
    }


    For dynamically imported module function overrides:

    jQuery(window).on('load', function(){
        nebula.updateFormFlow = function(formID, field, info){
            //Write your own code here, leave it blank, or return false.
        }
    });


    Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:

    jQuery(document).on('nebula_module_loaded', function(module){
        //Note that the module variable is also available to know which module specifically was imported
        if ( typeof nebula.updateFormFlow === 'function' ){
            nebula.updateFormFlow = function(formID, field, info){
                //Write your own code here, leave it blank, or return false.
            }
    	}
    });