JetFormBuilder change display message to Popup

gistfile1.txt

UPDATED: 22.08.2024

Copy the following HTML code and create a HTML snippet using your snippet plugins. 
Paste the code into the plugin and save it.

Update the targetPages array by replacing 'contact' and 'contact-2' with your desired page slugs. The array supports multiple pages, so you can easily add or remove slugs as needed.
_________________________________________

<style>
/* Overlay Styling */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 100;
    backdrop-filter: blur(5px) brightness(40%);
    display: none;
}
/* Popup Styling */
#messagePopup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 101;
    box-sizing: border-box;
    text-align: center;
    display: none;
    opacity: 0;
    top: 45%;
}
#popupMessageContent {
    margin-bottom: 20px;
}
#messagePopup button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#messagePopup button:hover {
    background-color: #0056b3;
}
@media (max-width: 1024px) {
    #messagePopup {
        width: 80%;
    }
}
@media (max-width: 767px) {
    #messagePopup {
        width: 90%;
    }
}
</style>
<div id="overlay"></div>
<div id="messagePopup">
    <div id="popupMessageContent"></div>
    <button onclick="closePopup()">Lukk</button>
</div>
<script nonce="your-generated-nonce-here" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script nonce="your-generated-nonce-here">
jQuery(document).ready(function($) {
    // Define an array of pages where the script should run
    var targetPages = ['contact1', 'contact2'];
    
    // Get the current page slug
    var currentSlug = window.location.pathname.split('/').filter(Boolean).pop();
    
    // Check if the current page's slug is in the targetPages array
    if (targetPages.includes(currentSlug)) {
        function openPopupWithMessage(messageText) {
            $('#popupMessageContent').text(messageText);
            $('#overlay').fadeIn(300);
            $('#messagePopup').css('top', '45%').show().animate({opacity: 1, top: "50%"}, 300);
        }
        
        window.closePopup = function() {
            $('#messagePopup').animate({opacity: 0, top: "45%"}, 300, function() {
                $(this).hide();
            });
            $('#overlay').fadeOut(300);
        };
        
        // Function to check and display form messages, triggered by form submission
        function checkAndDisplayFormMessages() {
            let successMessage = $('.jet-form-builder-message--success').text();
            let errorMessage = $('.jet-form-builder-message--error').text();
            if (successMessage || errorMessage) {
                let message = successMessage || errorMessage;
                openPopupWithMessage(message);
                $('.jet-form-builder-message--success, .jet-form-builder-message--error').hide();
            }
        }
        
        // Attach an event listener to form submission to ensure the popup only shows after submission
        $('form').on('submit', function(event) {
            $(document).ajaxComplete(function() {
                checkAndDisplayFormMessages(); // Check again after any AJAX call completes
            });
        });
    }
});
</script>