Customizing the appearance of your Contact Form's Success and Error messages can greatly enhance the user experience and ensure consistency with your website's design.
In this article, we will guide you through the process of styling the success and error messages in Divi's Contact Form Module.
Edit the Contact Form module by clicking on the Gear
iconGo to Advanced Tab → Custom CSS → Free Form CSS
Add the following CSS Code:
selector .et-pb-contact-message p {
font-size: 20px;
line-height: 1.5em;
color: #06a022;
}
selector .et-pb-contact-message:has(ul) p {
font-size: 16px;
line-height: 1.5em;
color: red;
}
selector .et-pb-contact-message ul {
font-size: 16px;
line-height: 1.5em;
color: red;
}
Code Explanation:
The first snippet will set the following styles to the Thank you message:
Text Size: 20px
Line Height: 1.5em
Text Color: #06a022 - Green
The second snippet will set the following styles to the Error message:
Text Size: 16px;
Linie Height: 1.5em
Text Color: red
The third snippet will set the following styles to the list of items which indicates which fields have not been filed out:
Text Size: 16px;
Linie Height: 1.5em
Text Color: red
You can learn more about various CSS properties that can be applied to any text elements in the Fundamental text and font styling article.