How to Customize the Confirmation Message Box Styling

Interested in refining the appearance of your confirmation message box to align perfectly with your brand’s aesthetics? WPForms provides a default styling for the confirmation message within a green box, but if you prefer a different look or wish to remove it entirely, we’ve got you covered.

In this tutorial, we’ll walk you through the simple process of updating the styling on your confirmation message using custom CSS. Whether you’re aiming for a sleeker design or seeking to integrate your company branding seamlessly, customizing the message box styling is quick and straightforward.

Let’s dive in and explore how to disable or modify the default styling of the form confirmation message, empowering you to create a cohesive and visually appealing form experience for your users.

Customizing the Confirmation

Below we’ll share some various styling customizations that appear in the form of custom CSS styling. If you need assistance with how and where to add custom CSS, please review this tutorial.

Removing the background color for all forms

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

.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

Removing the background color for a specific form

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.

Updating the background color for all forms

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.

Updating the background color for a specific form

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

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.