This feature is basically needed for a long form. We know two native behaviors in the form module - that are:
Upon successful submission, the form fields disappear.
Clicking on the submit button, the form doesn't scroll to the top view of the form and instead stays in the same position.
For these behaviors, when it's a long form; as a result, the next elements of the form are shown on the viewport instead of the form's success message because it goes upper and outside the viewport due to the long form fields disappearing upon submission.
Also, when the submission is not successful, that means there are some errors, but due to not scrolling up, we cannot see the error messages at the top, and it requires manual scrolling. So, it's always necessary to scroll up the page to the top view of the form regardless of the submission status - whether to see the success or error messages.
To prevent the current required manual scrolling, we can use the following script to Divi → Theme Options → Integration Tab → Add code to the < head > of your blog field to make it easier.
<script>
(function($) {
jQuery(document).ready(function() {
jQuery(document).on('click', '.et_pb_contact_submit', function() {
var clickedBtn = $(this);
var thisForm = clickedBtn.closest('.et_pb_contact_form_container');
jQuery('html, body').animate({
scrollTop: thisForm.offset().top - 120 // 120 is the height of the header, it can be customized according to the website header's height
}, 700, 'swing');
});
});
})(jQuery);
</script>
Preview of the result:
