Submit Button CSS Selectors

• Basic Targeting
• Submit Button
• Submit Button (image)
• Use Case Examples
• Basic Example
• Hover Example
• Active State Example
• Hidden Button

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: 4px 10px;
    border: 1px solid rgba(114, 114, 114, 0.4);
    border-radius: 3px;
    
    box-shadow: 0 1px 0px rgba(114, 114, 114, 0.3);
    background-color: #0096d6;

    /* Vendor prefixes for older browsers */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 1px 0px rgba(114, 114, 114, 0.3);
    -webkit-box-shadow: 0 1px 0px rgba(114, 114, 114, 0.3);
}

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

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