Conditional side summary display

What is it?

Control on which pages the summary should appear.

How to use this?

To use this, copy one of the below code snippets to an HTML field or the Code Chest plugin. Be sure to wrap it between <script> Code goes here </script> tags if you use it inside a HTML field.

Next update the configuration bit and complete the summaryPages array with a comma seperated list of page numbers where you want to show the summary. The summary will be hidden on all the other pages.

Example for versions below Gravity Forms 2.9

if (typeof jQuery !== "undefined") {
    jQuery(document).on('gform_post_render', function(event, form_id, current_page) {
        current_page = parseInt(current_page);
        /**
         * Configuration.
         * Add the page numbers where you want to show the form overview as comma separated list in the below array.
         * Example to show on page 1 and 3: let summaryPages = [1,3];
         */
        let summaryPages = [1]; 

        if (summaryPages.includes(current_page)) {
            jQuery("#gotrgf_form_overview_container_" + form_id).show();
            jQuery("#gotrgf_form_container_" + form_id).addClass("gotrgf_form_container");
            jQuery("#gotrgf_form_container_" + form_id + " > div").first().addClass("gotrgf_form_wrapper"); 
        } else {
            jQuery("#gotrgf_form_overview_container_" + form_id).hide();
            jQuery("#gotrgf_form_container_" + form_id).removeClass("gotrgf_form_container");
            jQuery("#gotrgf_form_container_" + form_id + " > div").first().removeClass("gotrgf_form_wrapper");     
        }
    });
} 

Example for versions above Gravity Forms 2.9+

document.addEventListener("gform/post_render", function(event) {
    /**
     * Configuration.
     * Add the page numbers where you want to show the form overview as comma separated list in the below array.
     * Example to show on page 1 and 3: let summaryPages = [1,3];
     */
    const summaryPages = [1]; // Adjust this array as needed

    let current_page = parseInt(event.detail.currentPage, 10);
    let form_id = event.detail.formId;

    let overviewContainer = document.getElementById("gotrgf_form_overview_container_" + form_id);
    let formContainer = document.getElementById("gotrgf_form_container_" + form_id);

    if (overviewContainer && formContainer) {
        if (summaryPages.includes(current_page)) {
            overviewContainer.style.display = "block";
            formContainer.classList.add("gotrgf_form_container");

            let firstDiv = formContainer.querySelector(":scope > div");
            if (firstDiv) {
                firstDiv.classList.add("gotrgf_form_wrapper");
            }
        } else {
            overviewContainer.style.display = "none";
            formContainer.classList.remove("gotrgf_form_container");

            let firstDiv = formContainer.querySelector(":scope > div");
            if (firstDiv) {
                firstDiv.classList.remove("gotrgf_form_wrapper");
            }
        }
    }
});