Automatic Popup Trigger After Form Submission – Kadence Stack

Hello Block Editor Lovers,

In this blog, I will show you how you can trigger a Kadence Conversion Popup, Just after a Successful Kadence Form Submission.

Special Thanks to Sam Jesani, who shared this problem in Kadence Group, It was quite interesting combination so I tried it.

Here is how you do it.

Required Tools:- Only Kadence Blocks Pro

1. Create a Modal Popup

First, create your popup using the Kadence Blocks “Modal” and add Custom ID as “form-popup” as a link.

Note:- You can change the trigger link but you will have to modify the JS given below.

2. Create a Form

Create your form as you want, just make sure not to choose Redirection after submission as this doesn’t make sense as well. Nothing to add custom in Form. (Below JS will work with Kadence Advanced Forms Only)

3. Create a Trigger Button

Create a trigger Button with this class “modal-trigger”. Now add the same link you choose in Modal Trigger, in our case, it’s “#form-popup”.

1. Add Trigger in Modal “form-popup”

2. Add this class to the Trigger Button “modal-trigger”

3. Add this “#form-popup” link to the same button

You also need to use this CSS to hide the trigger button, we will trigger it with JS when form submission is successful.

.modal-trigger {
    display: none;
}

4. Use This JS

Now you need to use the JS given below using any Code Snippet Plugin, it’s a very small JS but I will still recommend using it only on the pages where you have Form and want the popup to appear.

This Js checked when the form sends a successful response from Ajax and triggers a Click to the button which has a class

document.addEventListener('DOMContentLoaded', function() {
    // Listen for the successful form submission event
    document.body.addEventListener('kb-advanced-form-success', function() {
        // Find the popup trigger button
        const popupTriggers = document.getElementsByClassName("modal-trigger");

        // Check if the popup trigger exists
        if (popupTriggers.length > 0) {
            // Trigger the Kadence Conversion popup
            const popupTrigger = popupTriggers[0];
            if (popupTrigger instanceof HTMLElement && typeof popupTrigger.click === 'function') {
                const event = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                });

                // Dispatch the click event
                popupTrigger.dispatchEvent(event);
            }
        }
    });
});

That’s it, it will start triggering the popup as you want.