How To Change The Color And Style Of Your Submit Button In Gravity Forms Easily

Here's a quick and simple tutorial on how to change the color and style of your Gravity Forms submit button.

Before I get started, if you're using the Contact Form 7 plugin, do check out this tutorial post for styling tips using CSS.

I recently invested in some 'premium web forms' software for my website called Gravity Forms. I'm sure you've heard of this one before.

Whilst I think this plugin is great for creating functional forms for any WordPress website, there is one small thing that I actually don't like about Gravity Forms.

Can you guess what that is?

I don't like the fact that you cannot style your forms easily.

Sure, it's a drag-and-drop form builder, but one that lacks any simple styling options.

Add some code! What code?

You would think a premium plugin of this kind would automatically have a simple series of settings for you to style the forms and buttons, right? Well, it doesn't.

So, what can you do?

Well, the only option is to style your forms and buttons using custom code, or more appropriately, using CSS.

Now, I won't dive into the styling of the forms themselves in this tutorial, I think I'll create a separate tutorial for this in the near future.

What I do want to show you, in this post, is how to change the color and style of the "Submit" button itself.

Maybe it's something you've been trying to do yourself, and, if you've found an easier way, please do let me know.

OK, so the code we'll use below will affect the global styling of the Gravity Forms on your site (all your forms), however, I will show you how to change the color of just a single "Submit" button for a specific form as well.

Let's get started.

If you want to check out Gravity Forms for yourself, by the way, you can do so by clicking here. Don't worry, I'm not an affiliate for Gravity Forms, not should that matter ūüôā

So, just one more thing, just to make you aware of the theme I'm using right now, I'm using a customized child theme for Genesis.

It doesn't really matter what theme you're using, just as long as you have the option to add custom CSS by going to Appearance > Customize > Additional CSS.

If you don't have this option, you can usually edit the Style.css file by going to Appearance > Editor. Unless, of course, you have this disabled for security reasons too, in which case you'll have to access your style.css file via FTP or log into your host cPanel to access your theme files, which I don't recommend.

Note: If the Gravity Forms plugin is conflicting with your theme in any way and or for any reason, it might be best to consult the plugin creator or even the theme creator.

Right, let's finally get started with this.

Step One: Create your form and add the 'shortcode' to your page

Once you've created your form using GF, save it, then copy and paste the 'shortcode' into a static page of your choice.

In the image below you'll see that I have dropped the "new client questionnaire form" shortcode that I created earlier, into a static page on this site.

How To Change Gravity Forms Button Color

Once the form shortcode is embedded into your page, hit save and view your page.

As you can see with my web form, while it looks reasonably clean style-wise, the "Submit Form" button doesn't look so great. See image below.

grav_form_2

The button looks very generic, flat and boring, so let's add some custom CSS to make it look cool!

Oh, before I continue with this tutorial, I want to just quickly show you the CSS and HTML5 settings that I have for my forms for your reference. Here is a screenshot of it.

grav_form_3

The reason why my forms look semi-clean is that I've selected "yes" for the Output CSS. This means the form is using some CSS from my theme.

If I selected "no" for Output CSS, the forms on my site would appear very messy and unstyled (CSS stripped). I also noticed that bullet points appear next to each line. The reason for this is because no CSS has been applied to the form to remove the bullet points.

OK, so lets resume...

So, to add style and to change the color of the "Submit Form" button for my 'client questionnaire form', all I would need to do is add some custom CSS code. For this, I can go to Appearance > Customize > Additional CSS. See image below.

Step Two: Adding the CSS code

Next step is to add the custom code and I've already created this for you to use. See below.

/* Submit Button Gravity Forms
-----------------------------*/
body .gform_wrapper .gform_footer input[type=submit] {
color: #FFFFFF;
background: #ED3330;
font-size: 19px;
letter-spacing: 1px;
text-transform: uppercase;
float: left;
height: 60px;
min-width: 280px;
border: none;
border-radius: 5px;
margin-left: 12px;
transition: 0.3s;
}

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

The first part of the code is for the 'static button'.

The second shorter piece of code is for the 'hover button'.

To change the colors of the button background marked in red, simply change the hex values (#ED3330;) in each of the code to the suitable color code of your choice. Click here to access color codes.

To change the colors of the button font marked in red, simply change the hex values (#FFFFFF;).

Once you've made your changes, hit Publish, then clear your cache and refresh the page where your form(s) is embedded on.

It should look something like this. (Note: I've since updated my own code and style for my own website)

grav_form_5

Now, as you can see from the image above, and compare it with the first image, my "request quote" submit button now looks more stylish and is on brand with the rest of my website.

Additional styling and tips

Essentially, any value marked in red, in the code above, can be changed to suit your preferences.

If you want to change the height of the button, adjust the percentage values for both static and hover codes for height: 60px;

If you want to nudge the position of the button slightly, adjust the value inside margin-left: 12px;

If you want to move the button from left to right, simply change the float: left; to float: right;

As I said at the beginning of this tutorial, this code will affect the global styling of all your gravity forms buttons.

If you want to just make changes to a single form button on a page, you'll need to make some changes to the top line of each code -

Replace everything on the top line of each code, before the input: with the following code:

body .#gform_wrapper_1 .gform_footer

Then simply replace the "_1" number with your own form ID value.

You'll find your form ID numbers beside each form inside your Gravity Forms. See image below.

grav_form_6

So there you have it folks, a short but hopefully useful little tutorial on how to change the color of your submit button for your Gravity Forms.

If this worked for you please do let me know in the comment section below. If it didn't work please let me know also, I'll try my very best to figure out why it hasn't.

If the comment section is closed or turned off, contact me here.

Best of luck - Fabrizio.

Recommended reading

  1. How To Add CSS To Contact Form 7 Forms
  2. WPForms vs. Gravity Forms vs. Contact Form 7: Which Is Best To Use?

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates

5 comments on “How To Change The Color And Style Of Your Submit Button In Gravity Forms Easily”

  1. Hi Fabrizio,

    Thanks for sharing this tip, I found it to be extremely helpful. What I normally do is create an image in Photoshop, optimize the image and then use the image to click through where I want it to go.

    Sometimes it's efficient, and sometimes it's not... lol...

    Thanks for bringing this up and offering an alternative perspective.

    Have a great week Fabrizio!

    ~ Don Purdum

    1. Hey Don, yeah sometimes I do that too. and it means I get to make the button look exactly how I want it. I've done this on several posts where I'm using custom buy it now buttons, it saves a lot of time and effort messing about with CSS.

  2. This is very helpful, but it only works for the regular form submission button. The css class doesn't work for the "next" button when you split the form into multiple pages. I had to add the following: .gform_wrapper .gform_page_footer .button.gform_button, .gform_wrapper .gform_page_footer .button.gform_next_button {}

  3. Quick update on this post. If you're using a Thrive Themes theme, the code does NOT go into the Rise stylesheet (style.css) as I outlined in this post. This is an error on my part and if you put any code into this section, it will just be overridden when the theme is updated.

    Instead place the code inside the theme's custom CSS box in theme options. I will update this post shortly to reflect this. - Fabrizio.

Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link