Improving user experience on your website often involves customizing elements to provide clear feedback and maintain a clean design.
This article covers the process of hiding the title of your Contact Form Module after a successful submission in Divi.
The Contact Form module doesn't have an option to hide the title once a user has submitted their information. Because of that, after the email has been sent, the form title and success message will appear on the confirmation page.
Here's an example of a successful submission:
To hide the title after a successful submission, follow these steps:
Edit the Contact Form module setting by clicking on the Gear
iconGo to Advanced Tab → CSS ID & Classes → CSS Class assign the dt-cf CSS class
Save the changes
Go to WordPress Dashboard → Divi → Theme Option → Integration tab → Header and copy/paste the following JS code
<script>
(function ($) {
$(document).ready(function () {
function remove_title() {
var contactForm = $('.dt-cf.et_pb_contact_form_container');
console.log(contactForm);
if (!contactForm.find('.et-pb-contact-message').is(':empty')) {
contactForm.find('.et_pb_contact_main_title').hide();
}
}
$(document).ajaxComplete(remove_title);
});
})(jQuery)
</script>
The result can be seen in the GIF below:
