How to Remove Confirmation Message Box Styling

Overview

Would you like to remove the confirmation message box styling? If you’d like to change this styling to match your own company branding, you can easily do this. In this tutorial, we’ll show you how to update the styling on the message using custom CSS.

By default WPForms styles the form confirmation message inside a green box. In some cases, this styling may need to be changed or removed. With a few CSS rules, it can be easily disabled.

Setup

The CSS snippet below will remove the green styling WPForms applies when the confirmation message appears.

You can also change the properties in the CSS rules below to adjust the styling if needed, such as change the background to a different color on the confirmation box.

We show two different examples of adding the CSS below. If you need assistance with how and where to add custom CSS, please review this tutorial.

div.wpforms-confirmation-container-full {
	color: inherit !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

div.wpforms-confirmation-container-full p:last-of-type {
	margin: inherit !important;
}

With the CSS shown above, it removes the background color and border from the confirmation message.

If you just wanted to change the background color from green to a different color. Your CSS would look something like this.

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

To the adjust CSS snippet shown above, the confirmation message will have a darker background and white text.

And now you’ve successfully adjusted the styling on the confirmation message! Would you like to know how to create your own custom Smart Tag? Please view our article on How to Create a Custom Smart Tag.