Implementing dynamic message relocation for JetEngine forms: A guide to enhancing user feedback display

gistfile1.txt

Introducing Enhanced Message Display for JetEngine Forms: Our new code dynamically relocates success and error messages 
to the top area, providing clearer feedback for users. You can easily style the message container using the 
provided class name, 'display-message', or customize it to suit your design preferences. 
Simply integrate the code into your Elementor form, add a headline or container with the same class name, 
and adjust the styling directly within the code. Success messages are displayed in green, while errors appear in red, 
ensuring clear visibility and easy customization.

Add this code to your site by creating a new HTML snippet in your snippet plugin. 
Simply paste the code there and save it.
________________________________________________________



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Hide default message containers */
.jet-form-message--success, .jet-form-message--error {
    display: none !important;
}

/* Initially hide the custom message container, with customizable style */
.display-message {
    display: none; 
    padding: 20px; 
    border-radius: 6px; 
}
</style>
<script>
jQuery(document).ready(function($) {
    // Function to check and move messages
    function checkAndMoveMessages() {
        var successMessage = $('.jet-form-message--success').html();
        var errorMessage = $('.jet-form-message--error').html();

        // Display the message if found
        if (successMessage || errorMessage) {
            var messageToDisplay = successMessage || errorMessage;
            var isSuccessful = !!successMessage;

            // Set message and apply dynamic styling
            $('.display-message').html(messageToDisplay)
                .css({
                    'display': 'block', // Ensure visibility
                    'border': isSuccessful ? '2px dotted #008000' : '2px dotted #FF0000',
                    'color': isSuccessful ? '#008000' : '#FF0000'
                });

            // Calculate the position to scroll to, including an offset
            var positionToScroll = $('.display-message').offset().top - 100; // Adjust the offset value as needed

            // Scroll to the message with offset
            $('html, body').animate({
                scrollTop: positionToScroll
            }, 500);

            // Clear original message containers
            $('.jet-form-message--success, .jet-form-message--error').empty();
        }
    }

    // Periodically check for messages
    setInterval(checkAndMoveMessages, 500);

    // Check immediately in case messages are already present
    checkAndMoveMessages();
});
</script>