Submit button styling being overwritten...why?

[Curiouser]

https://staging4.bopteraerospace.com/collaborate/

I have used the styling selectors recommended by WPforms here: https://wpforms.com/docs/how-to-customize-the-submit-button/ so that I can style while using their form theme styling as mentioned here: https://wpforms.com/docs/how-to-choose-an-include-form-styling-setting/

But it’s not working. None of the selectors I’m using, even when viewing in Developer Mode is working. It shows in Pro editor mode but not in final site. I also see a flash of the correct styling before it get overridden.

Where is this override happening? How can I fix this?

Thanks much!
Amy

[prakash_s]

Hello Amy,

Thanks for writing to us.

It seems that your Custom CSS style overriding by the plugin CSS. It is showing properly in the editor mode because the plugin style has been enqueued only for frontend mode that is why it is not overriding the styles in the backend mode but it is overriding in the frontend mode.

You can override the button style by using custom CSS for that you need to add this CSS in your X/Pro -->Theme Option -->CSS

.wpforms-container.wpforms-container-full button.wpforms-submit {
    background-color: #C2A264 !important;
    border: 0px solid #ddd !important;
    color: #5c7097 !important;
    font-size: 2em !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-family: MOSTRA-NUOVA,SANS SERIF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks