Change Button Background and Button Text Color

Hey @gazzaisvgan – Thanks for reaching out!

To change the background and text color, you can use following CSS snippet:

.wpforms-submit {
    background-color: #ddd !important;
    color: #000 !important;
}

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

Hi Prashant,

Thanks for replying.

Is the class for the form button correct as there is no change on the button color ??
I have tried different classes but also clearing cache and switching between chrome and firefox and in mobile view.

Have a good day

Gaz

It appears that the ID styling of the button is overriding the class of the button from what I can tell….

Hey @gazzaisvgan – Thanks for following on this ticket!

I checked the CSS snippet, and on my end, it seems to be working fine when I added it in the browser console. When you have some time, can you please share a screenshot of how you’ve added the code I shared so I can take a closer look?

Kindly,

Hi Prashant,

This is the syntax:

.wpforms-submit { color: #FFBF00 !important; color: #000 !important; }

Hey @gazzaisvgan – Thanks for sharing the CSS snippet. I looked into the code, and to change the background color, you’ll need to use the background-color property. I see in the snippet you’re using “color” which is the reason why the background color isn’t getting changed.

When you get a chance, please change to background-color and let me know how it goes.

Kindly,

Hi Prashant,

Changed the CSS element to background-color but no change, cleared cache no change, tried different browsers, no change ??

Thanks

Gaz

Hi Prashant,
I have the form injected into the page using a PHP shortcode form script. That script is wrapped in a div which creates the webform background which you can see.

This is it:

<div style="background: #168dd2;  text-align: center;  margin-top: 80px;  padding: 31px 35px 24px;  position: relative;  color: #fff;  width: 350px;  float: right;"><h2>Contact Us</h2><?php echo do_shortcode('[wpforms id="241" title="false"]');?></div>

The reason being is that Contact Form 7 was integrated into the theme, but Contact Form 7 doesn’t work, so I had to swap it out for wpforms. The theme itself has been giving console error issues. We’ve managed to overcome all so far apart from this CSS styling ?? ??

Thanks

• This reply was modified 1 year, 4 months ago by Gaz.
• This reply was modified 1 year, 4 months ago by Gaz.
• This reply was modified 1 year, 4 months ago by Gaz.

Hey @gazzaisvgan – Thanks for following on this ticket!

When you have sometime, can you please share a screenshot of the place where you’re adding the CSS snippet that I shared as that will help me to take a closer look?

Kindly,

Hi Prashant,

The CSS field is here:

Thanks Gary

Hey @gazzaisvgan – Thanks for sharing the screenshot. The field where you’ve added the snippet is specifically for defining the class name. When you have some time, can you please follow the steps shared in our documentation here to add the CSS, and then let me know how it goes?

Kindly,

Hey @gazzaisvgan – Please let me know how it goes!

• This reply was modified 1 year, 3 months ago by Prashant Rai.

Hey @gazzaisvgan – We haven’t heard back from you since my previous message, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!