Changing Submit Button « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

dmayer5
Member

How can I change the submit button, via CSS? What I mean is I have used GF's on a couple websites that I have worked with. Some of the themes, I activate and create the forms and they automatically adopt the settings of the theme so the text fields and submit button look like the other forms. Here is an example of what I mean: http://www.oclawmen.org/contact/

How can I set up the forms so they integrate without having a plain button? I have already changed some of the CSS settings to make the text fields and ext to look like the Blog page comment form.

Posted 11 years ago on Sunday February 17, 2013 | Permalink

This is what I have gotten so far in the forms.css however, I can't figure out how to get the hover effect to work.

[css]
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
	color:#ffffff;
   	padding-top:4px;
	padding-bottom:4px;
	padding-left:10px;
	padding-right:10px;
	border: 1px solid rgba(114,114,114,0.4);
	border-radius: 1px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	-moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	-webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	background-color: #0096d6 !important;
}
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit]:hover {
	border: 1px solid rgba(114,114,114,0.6);
	background-color: #444444;
}
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit]:active { top: 1px; }

Posted 11 years ago on Sunday February 17, 2013 | Permalink

Chris Hajer
Key Master

Do you have a URL to the page on this site where you are trying to change the look? And also, another page on the site where we can see what you want the buttons to look like?

Posted 11 years ago on Sunday February 17, 2013 | Permalink
dmayer5
Member

Chris, yes I do: http://dekarmedia.com/new/contact/

Right underneath the Gravity Form is the built in Contact form the developer put in the theme.

Thanks!

Posted 11 years ago on Sunday February 17, 2013 | Permalink

Rob Harrell
Member

The first thing you are going to want to do, is not edit the forms.css file of the plugin. As soon as we release an update to Gravity Forms, it's going to wipe out your changes - thus the warning message at the top of the file to not edit it.

Once you have removed and reverted the forms.css file, place the following edited CSS snippet in your theme's stylesheet (or wherever you place custom styles at the theme level) and it should do the trick for you:

[css]
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit] {
	color:#ffffff;
   	padding-top:4px;
	padding-bottom:4px;
	padding-left:10px;
	padding-right:10px;
	border: 1px solid rgba(114,114,114,0.4);
	border-radius: 1px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	-moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	-webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
	background-color: #0096d6;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	border: 1px solid rgba(114,114,114,0.6);
	background-color: #444444;
}
body .gform_wrapper .gform_footer input[type=submit]:active { top: 1px; }

Posted 11 years ago on Sunday February 17, 2013 | Permalink

dmayer5
Member

Rob:

I typically don't add the license key to my forms but you made a great suggestion so I added all the modified CSS to my theme stylesheet. Thank you very much for all the help. Only other thing is that I am trying to make the form to align perfectly even on both the left side and right side. Any quick fix that I can accomplish with that? (full width page)

Posted 11 years ago on Monday February 18, 2013 | Permalink
Rob Harrell
Member
You could try using this:
```
[css]
body .gform_wrapper {
max-width: 100%;
}
```
Posted 11 years ago on Monday February 18, 2013 | Permalink