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.
With the release of WPForms 1.8.1, you can now easily change the Submit button’s color 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 this, 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.
Changing the Submit button color
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.
The colors in this CSS are defined using hex codes, which you can read more about in this documentation.
For additional style changes to the submit button such as hover styles, please see our submit button styling tutorial.
And that’s it! You’ve now changed the color of your submit button. Would you like to use CSS to customize the Submit button in other ways? Please take a look at our tutorial on Using CSS to Personalize the Submit Button.
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;
}
Q: Can I target just one of my forms?
A: If you wanted to change just one form, you would simply target the form ID in your CSS. In this example, we’re going to target form ID -999 for the Submit button as well as the Next and Previous buttons from the Page Break field.
You’ll need to update the -999 to match your own form ID. If you’re not sure where to find your form ID, please review this useful guide.
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}