PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Changing Submit Button

  1. 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 7 years ago on Sunday February 17, 2013 | Permalink
  2. 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 7 years ago on Sunday February 17, 2013 | Permalink
  3. 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 7 years ago on Sunday February 17, 2013 | Permalink
  4. 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 7 years ago on Sunday February 17, 2013 | Permalink
  5. 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 7 years ago on Sunday February 17, 2013 | Permalink
  6. 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 7 years ago on Monday February 18, 2013 | Permalink
  7. You could try using this:

    [css]
    body .gform_wrapper {
    max-width: 100%;
    }
    Posted 7 years ago on Monday February 18, 2013 | Permalink