Archived topic
Styling a Gravity Forms submit button
7 replies · Started by Jason on September 18, 2018
Hi there, I know this is going to be something really simple, but I just can't seem to style a Gravity Forms submit button.
I've tried the css example on the gravity forms website: body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red} , and putting !important in there. I can change the colour of the submit button using the colors -> button options in the customizer, so it seems that Generate Press settings can change it.
Other buttons style ok, it's just the Gravity Forms submit button that I'm having a problem with.
Does anyone have any ideas?
cheers
Jason
Hi there,
try this selector .gform_wrapper .gform_page_footer .button.gform_next_button it is the most specific one the from uses for the button on that page.
If that doesn't work then hit the group selectors they are using for their colors that should hit all the buttons it uses:
body .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_footer input.button, .gform_page_footer .gform_previous_button, .gform_page_footer .gform_next_button
Hi David,
Thanks for replying. I removed the selectors for the other buttons and replaced them with your second example (the first was for the next button, which styles ok), and have the same result I'm afraid - prev & next are styled, but the submit button isn't styled. :-/
This is the styling I have now:
body .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_footer input.button, .gform_page_footer .gform_previous_button, .gform_page_footer .gform_next_button {
box-shadow: -3px 5px 4px 0px #d4d4d4;
background:linear-gradient(to bottom, #ff0000 5%, #ff6600 100%);
background-color:#ff0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#ffffff;
font-size:17px;
padding:10px 31px;
}
cheers
Jason
Looks like thats picking up the default: input[type="submit"]
Try hitting that with importance.
To be sure, I placed !important on the end of all of the properties for that selector. Nothing I'm afraid. I've check in Firefox and Chrome to make sure it wasn't an issue with the browser.
Odd, even Gravity Forms docs provide those classes. Try hitting the ID: #gform_submit_button_1
Hi David
Sometimes it's the most obvious thing. Thanks so much, the Send button now looks as beautiful as (or at least the same as) all of the others.
cheers
Jason
You're welcome _ they're a nice looking button i must admit.
