[Resolved] Form buttons not showing, unable to fix them and WP Forms are blaming the theme

Hi there,

if i open the browser developers tools on that page ( Right Click > Inspect the page ), in the Console tab there is SG Optimized CSS file that is 404ing.

I assume that is the issue.
Begin by disabling the SG Optimizer, and then in your SG accounts cache panel flush any of the caches, do the styles return ?

OK, so just to be clear its not a theme issue, if it were a theme related then i would expect to see theme styles overriding the button, but that is not the case.

As a complete aside there is an error in your custom CSS, see this rule:

a.button {
    font-size: 26px;
    line-height: 35px;
    padding: 10px 40px;
    border-radius: 3px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
    transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out
}
}

There that extra closing } after it which should be removed as it “can” stop CSS below it from loading.

OK, to the Form Button issue – looking at The Custom CSS rule for the Forms button:

div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #ee165c !important;
    border: 1px solid #ee165c !important;
    border-radius: 3px;
    color: #fff;
    font-family: petcheckers !important;
    font-size: 26px;
    letter-spacing: -1px !important;
    padding: 10px 15px;
    width: 100%;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .2);
}

Note this part of the selector: button[type=submit] it is targeting a button with the type attribute.
This is also the case with the second CSS rule.

But if i look at the button HTML it does not have that attribute:

<button name="wpforms[submit]" id="wpforms-submit-7852" class="wpforms-submit" data-alt-text="Searching For Dog Walkers…" data-submit-text="Find Dog Walkers Near Me" aria-live="assertive" value="wpforms-submit">Find Dog Walkers Near Me</button>

If i edit the HTML in the browser dev tools and add that attribute then styles show.

Removing the attribute from the CSS should fix the issue:

div.wpforms-container-full .wpforms-form button,
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #ee165c !important;
    border: 1px solid #ee165c !important;
    border-radius: 3px;
    color: #fff;
    font-family: petcheckers !important;
    font-size: 26px;
    letter-spacing: -1px !important;
    padding: 10px 15px;
    width: 100%;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .2);
}

div.wpforms-container-full .wpforms-form button:hover {
    background-color: #00aeef !important;
    border: 1px solid #00aeef !important;
    border-radius: 3px;
    color: #fff;
    font-size: 26px;
    padding: 10px 15px;
    width: 100%;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .2);
    transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out;
}

I can only assume that WP Forms updated their plugin and have changed the front end HTML, whilst you’re logged in you may be seeing an older cached HTML.
Might be worth passing this info on to them.

The CSS i provided, can you paste that in to the Customizer > Additional CSS BEFORE any other CSS, then clear your SiteGround caches, you may need to do this from the server as it can cache super hard.

Glad to hear that!