Submit Button CSS Selectors

Here’s how to apply styles to Gravity Forms submit buttons. You can utilize these selectors to apply any additional styling that you may need.

Basic Targeting

Submit Button

• example: the form submit button (input) – applies to all forms

  body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}
  

• example: the form submit button (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_footer input[type=submit] {border: 1px solid red}
  

Submit Button (image)

• example: the form submit button (image) – applies to all forms

  body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}
  

• example: the form submit button (image) – applies just to form ID #1

  body #gform_wrapper_1 .gform_footer input[type=image] {border: 1px solid red}
  

Use Case Examples

Basic Example

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;
}

Hover Example

body .gform_wrapper .gform_footer input[type=submit]:hover {
border: 1px solid rgba(114,114,114,0.6);
background-color: #444444;
}

Active State Example

body .gform_wrapper .gform_footer input[type=submit]:active {
top: 1px;
}

Hidde Button

Using the usual display:none; to hide the button will result in the form submission handler aborting the submission. The following example shows an alternative method to hide the button without causing any trouble.

body #gform_wrapper_1 .gform_footer input[type=submit] {
    visibility: hidden!important;
    position: absolute!important;
    left: -9999px!important;
}