Handy JS/CSS Snippet: Style Divi contact form errors differently to feedback messages

October 23, 2019 | Divi, Themes, Wordpress | 0 comments

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!

A Donate Button!

0 Comments

Submit a Comment

Your email address will not be published.

CommentLuv badge

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance Website Developer in Crewe, Cheshire. He is a Full Stack Developer but with extensive experience in Wordpress and other Frameworks. He is the Co-Founder of SitePresser, Layouts Cloud and Page Builder Cloud among other things..
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

SitePresser is the plugin that packages child themes and layout packs for sale. Works with Divi and Elementor.