How to Style the Divi Form Success Message

✏️ 2020-06-06 | Divi | 0 comments

Make your Divi Form Success Message stand out with flawless font styling and crisp copy. Here's all the tips & tricks needed.
Skribent: Victor Duse
By Victor Duse

When a visitor submits a contact form on your WordPress website, it’s important that you provide a clear success message to confirm that the message was successfully sent. Learn how to change and style the success message in the Divi Form Module.

In this example I’m using a contact form from the Ebook Layout Pack from Elegant Themes. But the styling tricks will work regardless of your Divi layout. We will use basic Divi Builder functionality combined with some custom CSS. Here we go!

Related post: 7 Tips For Better Divi Forms

Before (default success message)

Default Divi Form Success Message

The default Divi Form success message font is small, grey and easy to miss.

After (custom success message)

After changing the Divi Form Success Message font style and texts color

With a few simple tweaks, the success message pops out with a clear font color, increased font size, all caps and a better copy with a nice emoji as the cherry on the top.

1. Write your Success Copy

A success message should be short, clear and have positive vibe. You should also let the visitor know what to expect next; when and how will you respond? Don’t leave a potential lead in in uncertainty and make sure that you can keep what you promise.

Add an emoji to create a good vibe but don’t overuse them, unless your target group happens to be tweenies.

Here are a five emojis that can be used in your confirmation text:

👋 🎉 👍 🙌

If you leave the Success Message field empty, the default copy will be: Thanks for contacting

If you change language in the WordPress settings tab, the default Success Message will be translated automatically. 

How to change the Divi form Success Message

Add your Success Message in the Content tab in the Divi Form Module..

2. Style your Success Message

When your copy is crisp and sweet, it’s time to add some style to your text and font. It’s easy to miss the small grey default Success Text in the Divi Form. So let’s change it with the Divi Builder, right? Unfortunately not, Elegant Themes hasn’t included this option in the Contact Form Module’s design settings. So let’s make the styling with some custom CSS instead.

How to style the Success Message text

The Divi Form success message uses the class .et-pb-contact-message. We will target it to make the text pop out.

 

  1. Go to Divi > Theme Customizer > Additional CSS
  2. Add the following CSS:
/* Style the Divi Form Success Message */

.et-pb-contact-message {
color: #32D190;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}
After changing the Divi Form Success Message font style and texts color
Custom CSS for the Divi Form Module

Add your custom CSS in the Divi Theme Customizer.

CSS Code Explanation:

  • Change #32D190 to the color of your choice, for example #000 for black or #fff for white.
  • Be careful with the font size; it should look good on small mobile devices as well. You can of course use Media Queries to set different styles for different screen sizes.
  • The font-weight can be between 100 and 900 in even hundreds.
  • Use text-transform:uppercase; for ALL CAPS.
  • Please note that the error messages also use the same class: .et-pb-contact-message. Thus, the styling will apply both to the success message and the error messages.

Related post: 7 Tips For Better Divi Forms

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.