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. Required fields are marked *

CommentLuv badge

Stay in touch!

Page Builder Cloud

Page Builder Cloud

A truly universal template library for WordPress Page Builders.

Page Builder Recommendation

Elementor Banner

We are BIG fans of the Elementor page builder. Give it a look!

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance PHP Website Developer in Crewe, Cheshire. He is a Wordpress and CMS/Framework specialist and Co-Founder of Page Builder Cloud.
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

Our Services

  • Wordpress plugin/theme development
  • Divi specialist
  • Ecommerce (Woocommerce, WPSC, Shopify, Magento)
  • PSD to Wordpress theme conversion (Responsive)
  • Website design work (Banners, Logos, Full Site, etc)
  • Website analysis (security, usability, SEO)
  • API Integrations (InfusionSoft, SalesForce, Ontraport, Customer Thermometer, etc..)
  • Wordpress consultancy & expert advice
  • Crisis support
  • Website hosting

The main services offered are Wordpress based although we do a great deal of technical programming for bespoke systems. From troubleshooting, extending frameworks, finding bugs to writing them from scratch.

Find out more by looking through our past projects or get a quote.

Be the first to hear about new products/updates!

This is a mailing list for those people interested in being told when we release a new product (Divi plugin or Theme).

We shall also use this list to let you know about product updates and releases.

You have Successfully Subscribed!