Welcome to the world of website customization, where even the smallest details can leave a lasting impression on your visitors. Picture this: someone lands on your WordPress site, fills out your contact form, and hits send. Now, what’s the next thing they see? A bland, default success message? Not on our watch.

In this guide, we’re about to embark on a journey to transform that mundane success message into something that reflects your brand’s personality and captivates your audience. Whether you’re a Divi enthusiast or just dipping your toes into the world of website design, we’ve got you covered.

We’ll be focusing on one of the most crucial elements of user experience – the confirmation that their message has been successfully delivered. By the end of this tutorial, you’ll be equipped with the skills to infuse your Divi contact form with style and flair, leaving your visitors not just reassured, but impressed.

So, let’s roll up our sleeves, fire up the Divi Builder, and unlock the potential to turn a simple form submission into a delightful user interaction. Get ready to elevate your website’s design game as we dive into the art of styling the Divi form success message!

Crafting Your Success Message

Creating an effective success message for your form is all about being concise, clear, and positive. It’s your chance to reassure your visitor that their message was received and let them know what to expect next. Don’t leave them hanging in uncertainty; make sure you can deliver on any promises you make.

Adding an emoji can help set a friendly tone, but use them sparingly unless your audience is on the younger side. Remember, less is often more when it comes to emojis.

Read More: How To Add Shape Dividers In Divi

If you don’t customize the success message, the default copy will be a simple “Thanks for contacting.” However, if you’ve changed the language settings in WordPress, the default message will be automatically translated.

So, take a moment to craft a success message that reflects your brand’s personality and assures your visitors that they’re in good hands. Keep it short, sweet, and positive, and you’ll leave a lasting impression on your audience.

Customize Your Success Message Appearance

Once your content is clear and concise, it’s time to give it a bit of personality with some stylish fonts and text. You might have noticed that the default success message in the Divi Form is easy to overlook – just a small, gray text. But don’t worry, we’re here to change that!

Unfortunately, Elegant Themes didn’t include an option to customize this text directly in the Contact Form Module’s design settings. But fear not, we’ve got a workaround! We’ll use some custom CSS to add our own touch of style to the success message. It’s a bit of a detour, but trust us, the end result will be worth it. Let’s dive into the world of CSS and give that success message the makeover it deserves!

Customizing Color and Font Style of the Success Message

To enhance the appearance of the Divi Form success message, we’ll target its class, “.et-pb-contact-message,” and apply some styling to make the text pop.

Here’s how you can do it:

• Navigate to your WordPress dashboard and go to Divi > Theme Customizer > Additional CSS.
• Once there, you’ll want to add the following lines of CSS code:

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

By tweaking these CSS properties, you can ensure that your success message not only confirms form submissions but also grabs the visitor’s attention and aligns with your website’s design aesthetic.

Read More: How To Set The Divi Accordion Module Default State Open Or Closed

Aligning the Divi Form Success Message at the Center

The success message for the Divi contact form is aligned to the left by default. However, if you prefer to center the success message instead, you can easily achieve this by adding a small CSS snippet:

Adding Success Message a Background Color

Want to make your confirmation message really stand out? Let’s give it some extra pop by adding a background color. Since the text isn’t wrapped in a span tag, we’ll need to get a bit creative here. By using “display: inline-flex,” we can ensure that the background color doesn’t cover 100% of the column width. It’s a neat trick that’ll make your success message catch the eye without overwhelming the layout.

• Go to Divi > Theme Customizer > Additional CSS
• Add the following CSS:

.et-pb-contact-message p {
display: inline-flex;
font-size: 21px;
background-color: #000080;
color: #fff;
padding: 10px 20px !important;
}

Feel free to swap out the color code #000080 with your preferred color. Just ensure that whatever color you choose looks great across all devices, from desktops to the smallest mobile screens.

Keep an eye on the font size too. It needs to be legible even on those tiny smartphone displays. If necessary, you can employ Media Queries to adjust the styles for different screen sizes.

When it comes to font weight, you have a range from 100 to 900 in increments of 100 to play with. Find the perfect balance that suits your design – whether it’s a light touch at 100 or a bold statement at 900.

And don’t forget the power of text-transform:uppercase; to give your text that commanding ALL CAPS look. With these tweaks and tricks, you’ll have your Divi form success message styled just the way you want it.

Conclusion:

Wrapping up our journey into the world of Divi form styling, it’s clear that the success message is not just a formality but an opportunity to make a lasting impression on your website visitors. By following the steps outlined in this guide, you’ve learned how to transform the mundane default message into a personalized and engaging element that reflects your brand’s identity.

Crafting a clear and concise success message is the first step towards ensuring a positive user experience. Remember to keep it upbeat, informative, and aligned with your brand voice. Whether you choose to add a friendly emoji or stick to plain text, less is often more when it comes to communication.

Next, we delved into the realm of CSS customization to elevate the appearance of the success message. With a few simple tweaks, you can adjust the color, font style, alignment, and even add a background color to make it pop. These small touches can make a big difference in enhancing the overall look and feel of your website.

As you continue to refine and personalize your Divi forms, keep experimenting with different styles and techniques to find what works best for your website. With each customization, you’re not just improving functionality but also creating a more engaging and memorable user experience.