How to Customize Divi Contact Form Success Message
Also, in June 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 {
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.
You can also check my other article on this blog on how to learn some HTML & CSS easily.
Other issue that you might have with the Divi contact form is that it may not be sending the emails submitted through it. There is a solution to this problem. Just check my other article that explains how to solve it.
That’s all for my today’s tutorial. I hope you like this tip. And for more Divi tips like this one, feel free to subscribe to my newsletter.
WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.
Thank you for this to-the-point valuable information. I was searching around the web because Divi is really a good theme. They touched major things in their videos but for these small things, we have to roam around the web to find the right answer.
Fantastic! It worked! Thank you so much!
You can use the same method to change the color of the Catcha question .et_pb_contact_captcha_question color:#ffffff if you have changed the background color of the form, but unfortunately there is no way to change the color of the equals sign for the question.
There is also no way that I know of to do the most obvious customisation of the success message that most people would want to do i.e. add html, like a simple line break <br or bolding some text but not all.
The Divi team seem to be adding some great features to their platform but ignoring some of the most basic needs.
You can try posting in the ET Theme Suggestions forum (in your ET account) and hopefully they will implement it in future.
Thank you so much for providing the answer to my question on how to change the color of the contact form success message :-)
Cheers,
Rikke
Thanks for that, perfect clean and short solution, love it.
In reply to Alan: You can change the color of the captcha easily with the visual builder. Unfortunately the equals sign still does not change the color. I completely agree that there is still some basic needs missing.
Just as a note on styling the ‘Thank you message’. As a word of warning the error messages also share the same class, so if you style the thank you, you are also styling the main error message.
Thank you for letting me know that.