Created
February 16, 2024 16:42
-
-
Save Qubadi/3e11f72f65a6507e4d89dfd15f2b1873 to your computer and use it in GitHub Desktop.
JetFormBuilder submission feedback auto-scroll
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
Add the code to your snippet plugins, create a new js, javascript snippet, paste the code there and save it. | |
This script significantly improves the interaction with JetFormBuilder forms by automatically scrolling the | |
browser window to show success or error messages following a form submission. It is compatible with both AJAX and | |
traditional page reload submission methods. Regardless of the submission type, the script ensures the feedback | |
messages are immediately brought into view, smoothly guiding users to see their form submission outcome. | |
________________________________________________________________________________________ | |
jQuery(document).ready(function($) { | |
function scrollToMessage() { | |
var message = $('.jet-form-builder-message--success, .jet-form-builder-message--error'); | |
if (message.length) { | |
$('html, body').animate({ | |
scrollTop: message.offset().top - 20 // Adjusted to add a little space above the message | |
}, 500); // Faster animation speed | |
} | |
} | |
// Scroll to the message if it exists when the page loads | |
scrollToMessage(); | |
// Use MutationObserver to handle AJAX submissions or dynamic content changes | |
var observer = new MutationObserver(function(mutations, obs) { | |
scrollToMessage(); | |
}); | |
observer.observe(document.body, { | |
childList: true, | |
subtree: true | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment