BugWP logo BugWP
Back to Community
Home / Community / Plugin → Wpforms

Troubleshooting WPForms Confirmation Message Styling Issues with Custom CSS

13 threads Sep 7, 2025 Plugin → Wpforms

Content

Many WordPress users rely on WPForms for their contact forms, but a common frustration arises when custom CSS to style the confirmation message box doesn't seem to work. This guide will explain why this happens and provide the most effective solutions based on community troubleshooting.

Why Your Custom CSS Isn't Working

The primary reason custom CSS fails to apply to WPForms confirmation messages is CSS specificity. WPForms applies its own styles with high specificity, and sometimes theme styles can also override your custom CSS, even when using !important.

Another common issue is that the confirmation message is dynamically injected into the page after form submission, which can sometimes affect how CSS is applied. Additionally, some themes or caching plugins might interfere with custom styles.

Most Effective Solutions

1. Increase CSS Specificity

The most reliable solution is to use more specific CSS selectors. Instead of just using the class selector, try prefixing it with the form container and/or using attribute selectors:

div.wpforms-container-full .wpforms-confirmation-container-full {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    color: #333333 !important;
    padding: 15px !important;
}

/* Alternative with attribute selector */
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
}

2. Target Specific Form ID

For more precise control, target the specific form by its ID (found in the form's shortcode):

#wpforms-confirmation-123 {
    background-color: #e0ffc7 !important;
    color: #333 !important;
    margin: 0 0 24px 0 !important;
    padding: 15px !important;
}

3. Change Text Color Specifically

If you're trying to change the text color within the confirmation message, you may need to target the paragraph elements specifically:

div.wpforms-container-full .wpforms-confirmation-container-full p {
    color: #fff !important;
}

4. Check CSS Implementation Method

Ensure you're adding CSS through a reliable method. The most recommended approaches are:

  • Wordposium Customizer → Additional CSS
  • A dedicated custom CSS plugin
  • Your theme's custom CSS option (if available)

Avoid adding CSS directly to individual posts or pages unless you're certain the CSS will be loaded on all pages where the form appears.

Debugging Tips

  • Use your browser's developer tools (F12) to inspect the confirmation message and see what styles are being applied
  • Check if your theme has conflicting styles that need to be overridden
  • Clear any caching plugins or server cache after adding new CSS
  • Test with all other plugins temporarily disabled to rule out conflicts

By using more specific CSS selectors and ensuring proper implementation, you should be able to successfully customize your WPForms confirmation messages to match your site's design.

Related Support Threads Support