Submit Button Not Showing

It looks like your page color (white) and form submit color (white) same so it can looks like submit button was not there.

but submit button was already there.

Open inspect elements and pick the submit button and than check css property there is a

background-color: #ffffff;
you just need to change it and any other color so it will be show off submit button

Thanks for the reply. I tried inspect elements. But I could find no specific CSS for anything labeled “submit”. I also tried to search the Style Sheet and found this area:

div.wpforms-container form.wpforms-form .wpforms-page-button {
border: none !important;
color: #FFF;
cursor: pointer; /* Improves usability and consistency of cursor style between

I changed the color to black just to see and there was no effect on the form. Out of frustration, I changed the background of the Elementor block to blue. I could then see the submit button area as a white box. However, the font must also be white since there was no word on the button saying Submit, just a white box. Ideally, I would prefer a white background. But, I am willing to live with a colored background to show the submit button area. Regardless, I need to change the font color of the button so it will show. I guess I’m not good enough with CSS to find where to change this. Can you help guide me with this?

It seems strange to me that WPforms would choose to make the button white with a white font. When I build the form in WPforms, the button shows as grey with the word “Submit” as black. I wonder why it isn’t like that when you apply the shortcode.

Hi @qwaioo,

Sorry for the trouble with that! The default style for the submit button is a grey background with black text. In this case it looks like there might have been a styling conflict with the site theme or another plugin.

I see that you’ve updated the button styles on your page. In case it helps, here’s the CSS snippet to change the submit button color:

.wpforms-form button[type=submit] {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
}
 
.wpforms-form button[type=submit]:hover {
    background-color: #022B57 !important;
}

You can look up the hex code for your preferred color using an online tool like this website.

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

Hope this helps!

Thanks, Ethan Coi. That is the CSS I changed to get the ‘Submit’ to show on the button. Weirdly, I tried it earlier and it didn’t change anything. Maybe I forgot to refresh the page when I checked it, although I know to do this. Anyway, when I tried it later it worked. I like your colors better, so I used those.

However, when I added the code for a hover color. That did not work. There are more attributes below “color: #FFF !* important;”. I put the hover code below all that. But, there was no change. Maybe it needs to go someplace else. I am fine without it as is, But, a hover color would be nice.

• This reply was modified 5 years, 1 month ago by qwaioo.
• This reply was modified 5 years, 1 month ago by qwaioo.
• This reply was modified 5 years, 1 month ago by qwaioo.

Hi @qwaioo,

I took a look at your form, and I think I see why that hover CSS isn’t applying: The selector for the non-hover color’s CSS has a more specific selector and has !important, so that style is winning out.

I believe this slightly modified version of the hover CSS will be able to fix that:

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

When you’ve had a chance to give that a try, could you please let us know if it does the trick?

Thanks ??

Jess Quig,
Thanks, That did the trick.

I’m so glad to hear that, @qwaioo! Thanks for letting me know ??