Just a quick one for you today. I’ve been asked by a customer about how to add some different styling to the Divi Contact Form module depending on whether a submitted form has error or feedback message.

Sounds simple right?

In principle it’s a bit of CSS but in reality it’s a little harder. There is no indication in the code of whether a message i an error or a thank you message. Validation of the form is handled client side and so there is no PHP to modify to make it work and so this handy bit of jQuery comes into play.

JS Source

jQuery(document).ready(function () {
        jQuery('.et_pb_contact_submit').click(function () {
            var form_parent = jQuery(this).closest('.et_pb_contact_form_container');
            jQuery('.contact_form_errors').removeClass('contact_form_errors');

            if (form_parent.find('.et_contact_error')) {
				jQuery('.et-pb-contact-message').addClass('contact_form_errors');
            } 
        });
    });

How does it work?

This, when added to your site, will run when the submit button is clicked on any Divi contact form module. One thing that Divi does do when there is an error is to add a class of et_contact_error to the fields that need attention. The jQuery code looks for this class and, if present, will apply a class of contact_form_errors to the container of the messages. This allows you to style the messages appropriately. I’d expect this will be red text or similar but now you have a class name to work with you can go nuts in CSS alone.

Integration

Simply add to your child theme JS file or, more simply, add to the head section in the integration tab of your Divi Theme Options page (in script tags) and that’s it.. it’ll just work!