WP Forms Button Styling

Support
#1

Hi Guys,

I’m using WP Forms on a PRO site and am trying to change the button background color:

https://mwm-systems.com/contact/

Using their documentation, I added CSS to the PRO global CSS area to style the form, and all elements worked (like form fields and button full width in container etc… except the button background color didn’t change. I set the button background color to #BC9D46 as you can see below, but it didn’t work…

Any ideas as to why?

Thanks for the help!

-Jonathan

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
width: 100%; /* Make the button full-width /
background-color: #BC9D46;
color: #fff;
font-size: 1em; / Size of text /
padding: 10px 15px; / Distance between text and border */

#2

Hello Jonathan,

Thanks for writing in!

Please use following CSS under Pro > Theme Options > CSS:

div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #BC9D46 !important;
}

If you would like to learn more about !important property, please take a look at following resource:

Thanks.

#3

Great! Didn’t think to add the !important property… Worked like a charm :slight_smile:

Thanks so much!

#4

One more question on this:

I’ve now styled the hover color, using WPForms suggested CSS, including the hex color they used in their example (#e5da00). At first, the hover effect didn’t work with their CSS, but then I used the !important property and it works (as you can see live now: https://mwm-systems.com/contact/)…

But when I simply replace the hex color in the functioning CSS I’ve now got working (#BC9D46), it stops working. I thought it might be a capitalization issue in the hex code and also tried lowercase letters (#bc9d46)b but it still doesn’t work…

Any ideas? Thanks again…

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #BC9D46 !important;
}

#5

Hey @jonathanrockett,

That’s because the button background color is same as the hover color you’re trying to set #bc9d46. You can change the hover color code to see the effect e.g you can use the following color code #8e752f so your code will be like:

div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form input[type=submit]:active, div.wpforms-container-full .wpforms-form button[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:active, div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #8e752f !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#6

Got it! I didn’t even notice… I was duplicating the hover effect of the modal area button I created on the same page, but realize now I created that hover effect in the particle editor… I copy/pasted the wrong color. lol.

Thanks so much!

#7

You’re welcome!
We’re glad @Nabeel were able to help you out.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.