Last active
July 26, 2025 02:48
-
-
Save marklchaves/af0ba27d1c12a94b293afbf3119d5652 to your computer and use it in GitHub Desktop.
Close a popup when you submit a Fluent Forms Conversational Form inside that popup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Close a popup when you submit a Fluent Forms Conversational Form inside that popup. | |
* | |
* Watches for a specific element (".ff_conv_app_4 .text-success") being added to the DOM. | |
* When detected, waits 2 seconds and then closes Popup Maker popup #441 if available. | |
* | |
* @since 1.0.0 | |
* | |
* @return void | |
*/ | |
function close_ff_conversational() | |
{ ?> | |
<script type="text/javascript"> | |
// Immediately Invoked Function Expression (IIFE) for scope isolation. | |
(function() { | |
// Define the selector for the target element. | |
// NOTE: Change the number 4 to your Fluent Forms form ID. | |
const targetSelector = ".ff_conv_app_4 .text-success"; | |
// Create a MutationObserver instance. | |
// This observer will watch for changes in the DOM. | |
const observer = new MutationObserver(function(mutationsList, observerInstance) { | |
// Iterate over each mutation record. | |
for (const mutation of mutationsList) { | |
// Check if the mutation type is 'childList', meaning nodes were added or removed. | |
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { | |
// Iterate over the added nodes. | |
for (const node of mutation.addedNodes) { | |
// Check if the added node is an Element node (type 1). | |
if (node.nodeType === 1) { | |
// Check if the added node itself matches the target selector, | |
// or if it contains an element that matches the target selector. | |
if (node.matches(targetSelector) || node.querySelector(targetSelector)) { | |
// Log a message to the console indicating the element was added. | |
console.log(`Element '${targetSelector}' was added to the DOM.`); | |
setTimeout(() => { | |
// Check if PUM (Popup Maker) is defined before trying to use it. | |
// This prevents errors if PUM is not loaded on the page. | |
// NOTE: Change 441 to your popup ID. | |
if (typeof PUM !== 'undefined' && PUM.close) { | |
PUM.close(441); | |
console.log("PUM.close(441) called."); | |
} else { | |
console.warn("PUM or PUM.close is not defined. Popup might not close."); | |
} | |
}, 2000); // Wait for 2 seconds then close the popup. | |
// Disconnect the observer once the element is found | |
// to prevent further unnecessary observations. | |
observerInstance.disconnect(); | |
return; // Exit the function after finding the element. | |
} | |
} | |
} | |
} | |
} | |
}); | |
// Start observing the document body for childList changes, | |
// including changes in its entire subtree. | |
// This allows detection of elements added anywhere within the document. | |
observer.observe(document.body, { | |
childList: true, // Observe additions/removals of child nodes. | |
subtree: true // Observe all descendants of the target node (document.body). | |
}); | |
console.log(`MutationObserver set up to detect when '${targetSelector}' is added to the DOM.`); | |
})(); | |
</script> | |
<?php } | |
add_action('wp_footer', 'close_ff_conversational', 500); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo https://share.wppopupmaker.com/X6u6YOkg