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.

For all forms

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

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

Remove Confirmation Message Box Styling

For a specific form

If you wanted to target a specific form only, you can use this snippet.

div#wpforms-confirmation-479 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

If you are targeting a specific form by the ID, please remember to update the snippet above from using the form ID 479 to match your own form ID. If you need help in finding your own form ID number, please review this tutorial.

Changing the background color

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.

confirmation message box changing the background color

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.