How to Style the Divi Form Success Message + Two Examples

✏️ 2020-06-06 | Divi | 7 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 that 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 create 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 stand 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;
}

Just change #31d190 to the text color of your choice.

Custom CSS for the Divi Form Module

Add your custom CSS in the Divi Theme Customizer.

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

Bonus: Add Background Color to your Success Message

Do you want the confirmation message pop even more? Try to add a background color. Since the text isn’t wrapped in a span tag, we need to be creative and use display: inline-flex to prevent the background color to cover 100% of the column width.

Add your background color

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

.et-pb-contact-message
{
display: inline-flex;
font-size:21px;
background-color:#31d190;
color:#fff;
}

Just change #31d190 to the background color of your choice. You can of course change the white text color #fff to something else.

You can use background color and emojis together, but watch out for conflicting colors.

Custom CSS for the Divi Form Module

Add your custom CSS in the Divi Theme Customizer.

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

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

7 Comments
  1. Great post! Great content on the whole site. Thanks so much for this post on hot to modify the CSS for the success messages. Can’t tell you how much I appreciate how easy you made it and how well designed your site is.

    Reply
    • Thank you Kevin, your comment made my day! 🙂

      Reply
  2. I followed these instructions, but unfortunately now there’s a box above my contact form the color of the success message background. Any ideas?

    /*changing the color of sucess message*/
    .et-pb-contact-message
    {
    display: inline-flex;
    padding:30px;
    color:#191919;
    font-size:21px;
    font-weight: 700;
    text-transform: uppercase;
    background-color:#f3e9da;
    }

    Reply
    • So I figured out it only happens when I use the padding line… I took that out and it goes away, but I would rather use the padding to make it a response box. If you think of any ways to make it work I’d be interested to hear!

      Reply
  3. So I figured out it only happens with the padding line added in. I’d like to use the padding line though and make it more of a response box. If you have any ideas as how to make it work, I’d be curious to hear.
    If not thanks for the tip and the code! I’ll use a contrasting font color for now 🙂

    Reply
    • Thanks for the feedback Cosette! The Divi form module makes this a bit hard by the way it’s coded but I found a rough work around that solves the problem by “hiding” the success message behind the form. Replace the CSS code with this by adding a negative margin to the success message and a background color to the Form module:

      
      
      /*changing the color of sucess message*/
      .et-pb-contact-message
      {
      display: inline-flex;
      padding:30px;
      color:#191919;
      font-size:21px;
      font-weight: 700;
      text-transform: uppercase;
      background-color:#f3e9da;
      margin-bottom:-64px;
      
      }
      
      /* Add background color to the form module to hide the square */
      .et_pb_contact {
      background-color:#fff;
      }
      

      Change the background color to the same as you use in the form row. This will only work if you use a single color as a background, not for image or gradient backgrounds.

      Let me know if it works for you!

      Reply

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.