{"id":27847,"date":"2023-01-11T14:29:44","date_gmt":"2023-01-11T13:29:44","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=27847"},"modified":"2023-01-11T15:18:10","modified_gmt":"2023-01-11T14:18:10","slug":"how-to-style-the-divi-contact-form-success-message","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-style-the-divi-contact-form-success-message\/","title":{"rendered":"How to Style the Divi Contact Form Success Message"},"content":{"rendered":"\n

Are you looking for ways to customize your Divi contact form success message? If so, you’ve come to the right place. In this tutorial, we will explore how to style and personalize the form success messages available within the Divi Builder<\/a>. You’ll discover why it’s important to tailor these messages for a more personalized experience that reflects your brand identity and learn step-by-step instructions on how you can quickly make them look better with minimal effort. So let\u2019s get started!<\/p>\n\n\n\n

Style the Divi Form Success Message with custom CSS code<\/h2>\n\n\n\n

Divi does not have any option for styling the success message of the Divi contact form<\/a>, so we have to do that with some custom CSS. But first, we are going to start with changing the success text.<\/p>\n\n\n\n

Change the success message text<\/h3>\n\n\n\n

You can change the success message text by opening the Divi contact form module and navigating to the “Text” tab window. Here you can change the default text that comes when submitting the form.<\/p>\n\n\n\n

\"Divi<\/figure>\n\n\n\n

After submitting a form, the custom success message should inform them that their submission has been received and is being processed.<\/p>\n\n\n\n

An example of a success message could be:<\/p>\n\n\n\n

“Thank you for submitting the form. We have received your information and will be in touch with you soon. Have a great day!”<\/p>\n\n\n\n

This message acknowledges receipt of the form and reassures the user that their submission was successful. It also gives the user an idea of what to expect next and it gives a positive note.<\/p>\n\n\n\n

Change the font size and text color<\/h3>\n\n\n\n

I will give you an example with a demo of mine. This is what my default message looks like:<\/p>\n\n\n\n

\"Divi<\/figure>\n\n\n\n

To change the font-size and text color go to Divi > Theme Options > CSS and place the following CSS snippet:<\/p>\n\n\n\n

et-pb-contact-message p {\n   font-size: 20px;\n   line-height: 1.7em;\n   color: #490bad;\n}<\/code><\/pre>\n\n\n\n
Now my success message will look like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can adjust the font size, color, and line height to your liking.<\/p>\n\n\n\n
Add a custom background color and a box shadow<\/h3>\n\n\n\n
let’s take it a step further and also add a background color and box shadow.<\/p>\n\n\n\n
et-pb-contact-message p {\n   font-size: 20px;\n   line-height: 1.7em;\n   color: rgb(255 255 255 \/ 80%);\n   background-color: #4f22b0;\n   padding: 15px;\n   border-radius: 8px;\n   box-shadow: 0 0 20px rgb(0 0 0 \/ 32%);\n}<\/code><\/pre>\n\n\n\n
And now it looks like this:<\/p>\n\n\n\n
\"background<\/figure>\n\n\n\n
I made the text color white and changed it to RGB so I can make it a little bit transparent. I added a background color with 15px padding and a border radius of 8px. I have added a box shadow so it pops out a little bit.<\/p>\n\n\n\n
Divi Contact Form Helper plugin<\/h2>\n\n\n\n
If you’re looking for an easy way to customize and style your Divi contact form success messages, the Divi Contact Form Helper plugin<\/a> is a great option. This plugin gives users complete control over their success message styling with all of their favorite settings from within the familiar space of Divi. With this plugin, users have access to a Success Message Text toggle from within the Design tab, allowing them to completely customize the success message.<\/p>\n\n\n\n
\"Divi<\/figure>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In conclusion, customizing the success messages of your Divi contact forms can be an easy and effective way to ensure that you maintain the same level of professionalism across all aspects of your website. By using simple yet effective methods such as colors and fonts, you can give a unique flavor to your forms so that they not only reflect the identity of your brand but also speak to your target audience on a more personal level.<\/p>\n\n\n\n
With these tips in mind, making these small tweaks won\u2019t take long so that visitors will have a positive experience every time they successfully submit a form on your site!<\/p>\n\n\n\n
You might also like\u2026<\/h3>\n\n\n\n