How to change the submit button color in Gravity Forms

By Neil on June 27, 2014

Gravity forms has fantastic functionality, but its default styling sometimes is not right for a particular website design. Here we modify the color of the submit button along with the font color and weight using some simple CSS styling.

Watch the previous Gravity Forms tutorial video here showing how to format Gravity Forms so that it looks like the embedded form in this tutorial and on my consultancy page.

Learn more about Graviry Forms here!

Step by step tutorial

The theme I use is the Parallax Pro theme by Genesis, and this creates a black submit button with a pink hover color. Your theme will probably have different styling to start with but you can follow this tutorial and color it however you like.

Firstly you need to identify the ID of the Gravity Form you are formatting. You can see the ID by looking at your list of forms in your WordPress dashboard, or if you are editing your form you can see the ID in the top left of the screen. You can do global formatting that means every form on your site will have the same styling, but here we are targeting an individual Gravity Form. In this tutorial our form has an ID of 7.

Click Appearance/Editor in your dashboard to see the style.css file. This is where we will add some styling code to target the submit button. The code we need to target the submit button is:

body #gform_wrapper_7 .gform_footer input[type=submit]
{
**CSS styling here**
}


Replace the _7 with the ID of your form. If you want to do global styling to every form on your website use:

body .gform_wrapper .gform_footer input[type=submit]
{
**CSS styling here**
}


To target to color of the submit button we need to use the CSS code:

body #gform_wrapper_7 .gform_footer input[type=submit]
{
background: #f96e5b;
}


This changes the button to a pink color, and of course you can use what ever color you like.

To make the button change color when you hover the mouse cursor over it you need to add some code to target the hover button, like so:

body #gform_wrapper_7 .gform_footer input:hover[type=submit]
{
background: #f9dcd8;
}


Note the only changes are the addition of a :hover to the code to specify that we are looking at the hover button, and in the styling we have changed to background color to #f9dcd8, which is a lighter pink color.

As extra styling in this tutorial we modify the border color of the hover button and also the hover font color, so to do this we add the border and color CSS styling to our hover code, like so:


body #gform_wrapper_7 .gform_footer input:hover[type=submit]
{
background: #f9dcd8;
border: 2px solid #f96e5b;
color: #363636;
}


The extra styling adds a 2px solid border around the submit button with a pink color when you hover the mouse cursor over it. Also the font color changes from white to a dark gray.

Summary

This is a quick and relatively simple tutorial that show you how to change to color of your submt button and also do some other small CSS styling changes. Here we have a pink button that changes to a lighter pink on hover, and also the border and font changes color on hover. You can of course apply any styling you like to your Gravity Foms submit button.

Any questions or comments please get in touch.