How to Change the Submit Button Color

Introduction

Would you like to change the submit button color on your forms? By default WPForms styles the submit button color with a soft gray background. However, you may want to change the color to better match the colors on your website or company branding.

Since the release of WPForms 1.8.1, you can now easily do this without using CSS just by adding the form to your page using a block editor. With this form styling feature, you can style your forms without writing any CSS. To find out more about form styles, please check out this helpful documentation.

However, you can also use custom CSS to achieve this as well and for this tutorial, this is the method we will use for changing the styling of the Submit button color.

Creating your form

We’ll begin by creating a new form and adding our fields. If you need any assistance with how to create a new form, please check out this documentation.

Adding the CSS

In order to change the color of the button, you’ll need to copy this CSS to your site.

If you need assistance in how and where to add CSS to your site, please check out this tutorial.

.wpforms-form button[type=submit] {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover {
    background-color: #022B57 !important;
}

The above CSS will change the submit button color background to blue (#024488) with white text on all WPForms Submit buttons on your site.

And that’s it! You’ve now changed the color of your submit button. Would you like to learn how to center your form? Please take a look at our tutorial on How to Center a Form.

FAQ

Q: Why doesn’t this CSS work for me?

A: There could be many reasons why you’re not seeing your change to your site and this could be anything from caching or something overwriting the CSS even with the use of the !important; on each CSS rule.

You can read through the troubleshooting CSS guide for any assistance.

Q: Will this work for the Next and Previous buttons too?

A: If you are using a Page Break in your form and are using Next and Previous buttons for navigation, we’ll use some CSS that will make all these buttons with the exact same styling. Simply copy this CSS to your site.

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}