Ensuring users are aware of errors in your contact forms is crucial for a seamless user experience.
Users might miss important error messages if your form is located further down the page or the Contact Form module contains many fields that exceed the height of the browser window.
The Contact Form module works as follows:
The form's fields disappear on successful submission, and the Thank you message is shown.
If one of the required form fields is not filled out, the field(s) marked as required but left empty will be displayed at the top of the form.
When the Contact Form module contains a large number of fields that exceed the browser window's height, and if the required fields are left empty, the visitor might miss the error message that the Contact Form module is displaying at the top.
To fix this problem, follow these steps:
Edit the Contact Form module by clicking on the Gear
iconGo to Advanced Tab → CSS ID & Classes → CSS Class and set the dt-cf-scroll CSS class
Save the changes
Go to Divi → Theme Option → Integration tab → Header
Copy/Paste the following JS code.
<script>
(function ($) {
$(document).ready(function () {
function dt_scroll_form_top() {
var headerHeight = ($('body').hasClass('logged-in')) ? parseInt($('#main-header').data('height-onload') + $('#wpadminbar').outerHeight()) : parseInt($('#main-header').data('height-onload'));
var contactForm = $('.dt-cf-scroll.et_pb_contact_form_container');
console.log(contactForm);
$('html, body').animate({
scrollTop: contactForm.offset().top - headerHeight
}, 700, 'swing')
}
$('.dt-cf-scroll .et_pb_contact_submit').on('click', dt_scroll_form_top)
});
})(jQuery)
</script>
The result can be seen in the GIF below:
