Submit Button Styling

Sure, we can help you out.

Do you have anything specific you want? The submit button can be styled with a little CSS code, which we can assist you with.

Once we nail that down, then you’ll put the code on your site – it’s simple.

Let me know!

Hi Jared,

Thanks for getting in touch!

I know a little code but just don’t know to do with it. I managed find the code being used at the moment and changed the values to suit the look I’m looking for (white outline, pink/red centre – I also want it centered beneath the form):

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
	background-color: #e02945;
	border: 5px solid #fff;
	color: #333;
	font-size: 1em;
	padding: 10px 150px;
}

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: #f34640;
	border: 5px solid #fff;
	cursor: pointer;
}

You can also view the button I’m trying to edit on the form on this page: https://justwogames.com/apps/

Thanks!

Sure thing. So just as a precaution, I’d prefix that code with another CSS variable, to make sure it has top priority. I’ve adjusted the code for you below:

#wrapper div.wpforms-container-full .wpforms-form input[type=submit],
#wrapper div.wpforms-container-full .wpforms-form button[type=submit],
#wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button {
	background-color: #e02945;
	border: 5px solid #fff;
	color: #333;
	font-size: 1em;
	padding: 10px 150px;
}

#wrapper div.wpforms-container-full .wpforms-form input[type=submit]:hover,
#wrapper div.wpforms-container-full .wpforms-form input[type=submit]:active,
#wrapper div.wpforms-container-full .wpforms-form button[type=submit]:hover,
#wrapper div.wpforms-container-full .wpforms-form button[type=submit]:active,
#wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
#wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
	background-color: #f34640;
	border: 5px solid #fff;
	cursor: pointer;
}

Normally the best place to put the above code is inside your theme. However in this case I’m not familiar with that theme and it doesn’t appear to be using the common style.css, so I would recommend using a simple plugin.

Here is a great how-to and video that shows you how and where to place the code ??

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

I cannot find at all where to make these changes, this thread does not specify. Which file has “.wpforms-page-button”? I need to do the same thing but using the Custom CSS Manager with new class and entering it into “Submit Button CSS Class” text box does nothing. Is this supposed to work that way?

These CSS updates can go in your theme’s style.css file OR you can use a plugin such as Simple Custom CSS to avoid editing your theme.

This link has a video walk-through of the Simple Custom CSS plugin:

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site

By default the WPForms styling used will override your theme, which is to prevent theme conflicts. So if you try to apply a submit button css class, it might not apply correctly since the WPForms CSS is overriding that.

To get around that you can make the CSS highly selector specific (as in the code examples mentioned earlier) OR you can change WPForms to use “Base styling only” which will let your theme handle many of the styling decisions (but won’t work with every theme) https://cl.ly/2P1G2E471u38

Hi
The above code didn’t work for me, any other ideas?

https://tinyurl.com/zfu6khy

Where did you place the custom CSS coded? I don’t see it on your site or on the page linked.

Hi Sorry
I started a separate thread, I lost track of this thread’s location. I was able to use Fire Bug and find the CSS needed:

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

Hi

What would be the CSS code if I’d like to change the color of the submit-button, always when I mouse-over it?

Thank you.

Hey alexzyz,

We have a doc just for that! Check out https://developers.wpforms.com/docs/change-the-submit-button-color/

The rule that has :hover is what tells the browser to change the CSS when the user mouses over it.

Hope that helps.