How to Style the Divi Form Success Message + Two Examples

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 color 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!

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 change the Success Message color and font style

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 p {
color: #32D190;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}

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

The result:

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

Bonus #1: 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 p {
display: inline-flex;
font-size: 21px;
background-color: #31d190;
color: #fff;
padding: 10px 20px !important;
}

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.

The result:

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.

Related post: How to add a Privacy Policy link in your Divi Form

Related post: 7 Tips For Better Divi Forms

Free course: Create a Stunning Contact Page With Divi

Bonus #2: Style the Divi Form error message

Both the Success Message and the Error Message share the same CSS class: .et-pb-contact-message

This means that the the green color in the success message also will be displayed in the error message title. This is not optimal but this is how the Divi form module is coded so we don’t have much of a choice here.

But to make the best out of the situation, we can change color and font style in the error message bullet list that specifies the errors, by targeting .et-pb-contact-message li

Style the error message

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

.et-pb-contact-message li {
color:red;
font-weight:700;
font-size:18px;
}

Just change red to the color of your choice.

The result:

Change the Divi Form error message color

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related post: 7 Tips For Better Divi Forms

Related post: How to add a Privacy Policy link in your Divi Form

Related posts

25 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
      • Hey I didn’t see this but this is an interesting workaround. I had hoped to style the shape of the background interestingly using
        border-radius: 10px 100px / 120px;

        But I may have to just settle for the tiny box not showing lol. I’m getting too picky for not knowing what I’m doing

        Reply
  4. Thanks for your help Victor. The CSS worked a treat!

    Reply
  5. Hi Victor,
    Thank you so much!! Really saved my day…been spending ages on this.
    One question, my success message is two lines of text on a mobile device and the letters are touching.
    Do you have some additional code I can add to add some spacing between the text lines?
    Sorry my coding knowledge is minimal..
    Many thanks!
    Best,
    Eliot.

    Reply
    • Hi Eliot! Sure, just add some line height with this CSS snippet:

      .et-pb-contact-message {
      line-height:1.7;
      }

      Play around with the number 1.7 to find the right line height. If it doesn’t work you might need to !important to override the default Divi CSS:

      .et-pb-contact-message {
      line-height:1.7 !important;
      }

      Let me know how it goes!

      Reply
      • Hello Victor,
        Brilliant – line-height:1.7; did the trick beautifully!
        Many thanks!
        Best,
        Eliot.

        Reply
  6. Problem is, that also the “You entered the wrong number in captcha” is green. How to make only the captcha message red but keep the success message green?

    Reply
    • Hi ZVI! There are some limitations since Divi use the same CSS class for both the success and the error message. But if you use .et-pb-contact-message p for the success message, that will not affect the bullet list in the error message. You can then use .et-pb-contact-message ul to style the error message bullet list. For example:

      .et-pb-contact-message p {
      color: #32D190;
      font-size: 21px;
      font-weight: 700;
      text-transform: uppercase;
      }

      .et-pb-contact-message ul {
      color:red;
      }

      Reply
  7. How do i target a specific form and not all forms on my site?

    Reply
  8. thanks so much, that worked a treat!!

    Reply
  9. Hello Victor
    Thanks for your help.
    What should I do if I don’t want a success message at all? I selected the “enable redirect URL” option, but it keeps showing the success message before redirects to the page I chosed.
    Thanks

    Reply
    • Hi Leonel! This seems to be the way the Divi form module works. You could just add a blank space in the Success Message field. But you will still see the form page refreshing before you are redirected to the thank you page (but without a thank you message blinking).

      You could send a feature request to the ET support to remove this extra step when a success redirect is enabled (which would be the best UX in my opinion too).

      Reply
  10. Hey Victor,
    A long-time follower and your tutorials are top-notch, you are basically my Divi guru! Thanks a lot for that.

    I have one question, in the error message, you can notice that if someone doesn’t agree to the Privacy Policy, in the error message, it display “I have read and agree”. So, can it be rephrased to “Privacy policy” instead of the incomplete sentence? Or any work around it?

    Thanks!

    Reply
    • Wow, I’ll make sure to put “Divi Guru” on my business card next time! 🙂

      Sure, if you open the field settings for the checkbox and type “Privacy policy” in the Title field, that is what will be displayed in the error message. I did just add a blank space in the checkbox title field (to hide the title in the form), which made Divi display the checkbox text in the error message instead.

      I hope that makes sense!

      Reply
  11. many thanks for this information, successfully implemented on my confirmation page using DIVI Contact Form

    Reply
    • That’s awesome Daun, I’m glad it worked out for you! 🙂

      Reply

Submit a Comment

Your email address will not be published.

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