How to Customize Divi Contact Form Success Message

by | Last Updated: Jun 9, 2017 | Blog, Divi theme

Today I’m going to tell you how you can customize your Divi contact form success message. Yes, in the contact form module settings you can type the message that you want to display after successful form submission. But I will explain how you can, for example, change the color of this text or center it across the whole width of your page.

 

Divi Contact Form

 

You may also have noticed that just 2 days ago (on June 7, 2017), Elegant Themes released a Divi update (Divi Version 3.0.51) in which they significantly improved many features of the contact form module. For example, the best feature for me (as I’m using Divi in a different language than English as well) is that you can choose your own submit button text. This is a great feature that I’ve been missing on the Divi’s contact form. Or, another great feature is the new Conditional Logic, which allows you to hide & display fields based on the form fields input. You can learn more about this on the ET blog post dedicated to the improved contact form module.

So now let’s get back to what I wanted to write about. If you want to change the styling of your contact form success message, you will need to use some custom CSS code to achieve it. I’m using the following code on one of my websites. You will need to enter it into your Divi theme options custom CSS field (or into your child theme stylesheet.css file):

 

.et-pb-contact-message p {
color: #fda600;
font-size: 16px;
text-align: center;
}

 

As you can guess from the code, it changes the color of my success message text, its font size and alignment.

If you have little knowledge of CSS, I recommend you taking a course. Some time ago, I had very little knowledge of CSS, but I took the CodeCademy HTML & CSS course and it significantly improved my CSS skills, which has been helping me with many customizations on the Divi websites that I’ve been building so far. W3 Schools also have a really helpful & free CSS tutorial. You will find it here: W3 Schools CSS Tutorial.

That’s all for my today’s tutorial. I hope you like this tip.

5 Free WordPress Plugins You Should Use

Divi Theme Design Services
Share This