The Divi Contact Form module is a powerful tool that makes creating customized forms for your website easy.
When a user successfully submits a form, they will see a success message displayed on the screen.
By default, this message has plain text that says “Thanks for contacting us”
By editing the module settings and adding a little bit of CSS, you can style the success message to match your website’s branding and design.
In this tutorial, we’ll show you how to change the Divi Contact Form success message text message and style it with custom CSS.
Change the form submit success message text
You can change the Divi Contact Form module success message text in the Contact Form module settings.
Open your Divi contact form module and in the Content tab, you can scroll down to the field labeled success message.
You can type in any text here and it will replace the default success message when submitting the form.
Change the design of the success message text
To customize how the success message looks you can add some custom CSS to Divi that targets the form’s success message.
You can add CSS to Divi in a number of ways, so use the method which is most convenient for you.
You will want to add CSS that will target the .et-pb-contact-message p class.
Add the following CSS code to customize the success message:
/* Style the success message */
.et-pb-contact-message p{
background-color: #CED94A;
border: 1px solid #CCCCCC;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 17px;
text-align: center;
}In this example, we’ve customized the background color, border, font size, padding, margin, and text alignment of the success message. You can adjust these properties to match your website’s design.
Once you’ve added your custom CSS, save your changes and preview your Contact Form module to see the updated success message.
Conclusion
With a quick settings addition and a little bit of CSS customization, you can change the style and text of the Divi Contact Form success message to match your website’s branding and design.
By following the steps outlined in this tutorial, you can create a customized success message that enhances the user experience and adds visual interest to your website.
If you need a more powerful contact form for Divi then you can see the best contact form plugins for Divi in our recent roundup post.
