Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Last active July 26, 2025 02:48
Show Gist options
  • Save marklchaves/af0ba27d1c12a94b293afbf3119d5652 to your computer and use it in GitHub Desktop.
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.
<?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);
@marklchaves
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment