In this article, you'll find three different solutions regarding the Divi Contact Form Module.
At a glance:
1. Style contact form success/error message
By default, the contact form module has no option to style the success or error messages. It has been added as a feature request to our Development Team.
Until then, we can do it using simple custom CSS. First, we need to add a CSS class to the Contact Form Module Settings → Advanced Tab → CSS ID & Classes → Class Field. You can refer to this article on how to add a custom class.
For example, we can use the 'cf_msg` class in the module and use the following CSS in Divi → Theme Options → Custom CSS.
.cf_msg .et-pb-contact-message, .cf_msg .et-pb-contact-message * {
font-size: 20px;
line-height: 35px;
color: #fff;
}The above CSS will change the message color to white. Along with that, you can customize the font size and line height.
2. Hiding contact form title on successful submission
Currently, we don't have any options to hide the title of the contact form. This is the title being referred to.
To remove the title, we can use the following script in Divi → Theme Options → Integration Tab → Head Field.
<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');
$(document).ajaxComplete(function(){
if( !thisForm.find('.et-pb-contact-message').is(':empty') ) {
thisForm.find('.et_pb_contact_main_title').remove();
}
});
});
});
})(jQuery);
</script>
It will remove the form title once it is successfully submitted and the success message shows.
3. Scroll up the form upon clicking on the submit button
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 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:
Thanks :)