How To Style The Divi Contact Form Success Message Tutorial by Pee Aye Creative

How To Style The Divi Contact Form Success Message

In this tutorial I will show you how to style with CSS the Divi Contact Form module success message that shows after a form is submitted.

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Divi Contact Form

The first step to styling the Divi Contact form module success message after a form is submitted is to add a custom CSS class to the module. This is used to target the module with the code shared in step 2 of this tutorial. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-success-message” in the CSS Class input field of the Contact Form module.

add custom CSS class to style success message in the Divi Contact Form module

2. Add CSS To Style The Divi Contact Form Success Message

This is a very quick and simple tutorial, and we are almost finished already. The second step is to add some CSS code to your site to style the Divi Contact Form success message text. This is necessary because there are no design settings for this in the module (without our plugin).

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*style the contact form success message text*/

.et-pb-contact-message p {
  font-size: 28px;
  line-height: 1.7em;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding: 50px!important;
  border: 2px solid #000000;
  border-radius: 10px;
  background: #000000;
}

The main thing to do now is to customize the values. This CSS is meant to be a base for you to make your own design adjustments to meet your preferences. 

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

Divi Contact Form Helper by Pee Aye Creative
success message design settings in the Divi Contact Form Helper plugin

The Divi Contact Form Helper plugin adds a new toggle to the existing Divi Contact Form module in the Design tab called Success Message Text with all the normal font and text design settings you need to style the success message using familiar Divi settings.

10

Last updated Mar 14, 2022 @ 10:56 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart