All Collections
FAQ's and Troubleshooting
Style contact form success/error message
Style contact form success/error message

Style contact form success and error message

Showhan Ahmed avatar
Written by Showhan Ahmed
Updated over a week ago

By default, the contact form module has no option to style the success or error messages. It has been added as a feature request to our Development Team.

Until then, we can do it using simple custom CSS. First, we need to add a CSS class to the Contact Form Module Settings → Advanced Tab → CSS ID & Classes → Class Field. You can refer to this article on how to add a custom class.

For example, we can use the 'cf_msg` class in the module.

And use the following CSS in Divi → Theme Options → Custom CSS.

.cf_msg .et-pb-contact-message, .cf_msg .et-pb-contact-message * {
font-size: 20px;
line-height: 35px;
color: #ff0000;
}

The above CSS will change the message color to red. You can change the color code(#ff0000) according to your liking. Along with that, you can customize the font size and line height. If you want to add additional CSS properties like background color, padding, etc then you can add them as well.

Did this answer your question?