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

Written by
Fabrizio Van Marciano
Posted on
January 7, 2020

A quick note before we get started with this tutorial. If you're using the Contact Form 7 plugin, check out this post and video tutorial for styling tips using simple CSS.

When it comes to using contact forms on your WordPress website, there are a few good plugins to consider. One of which is the Gravity Forms Plugin.

This is the plugin I use over on my main blog at Magnet4Blogging, and for the most part, I love it. Except for one small snag!

There is no easy way to style the forms or the submit button, without hacking into pieces of CSS code.

Don't get me wrong, I don't mind doing that myself, being a web developer, I'm comfortable with it. But I know that not everyone is code-savvy?

Of course, Gravity Forms is a great all-around drag-and-drop form builder, but one that lacks any simple styling options.

One more thing, just to let you know that I'm using a custom-built website using Oxygen Builder for WordPress.

That said, it doesn't matter what theme you're using. As long as you have the option to add custom CSS by going to Appearance > Customize > Additional CSS.

If you don't see this option available in the WordPress site, you may be able to edit the CSS file by accessing the theme files via FTP, if you know how to.

Right then, let's get started, finally. Here's a quick and simple tutorial on how to customize your Gravity Forms submit button with CSS.

If you want to learn more about Gravity Forms and features, click here.

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

Once you've created your form using Gravity Forms, save it. Next, copy and paste the 'shortcode' into a static page of your choice. For instance, your contact page.

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 my site.

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

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

The button looks very generic, flat and boring, so let's add some custom CSS to make it look modern and to match the style of my website!

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

The reason why my forms appear semi-clean is that I've selected "Yes" for the Output CSS. This means the form is using some CSS from my Oxygen template.

If I had selected "no" for Output CSS, the forms on my site would appear very messy and unstyled (the CSS stripped).

If you notice any bullet points appearing in your forms, that's because the CSS property 'list-style' hasn't been declared to remove them for the forms.

OK, so lets resume…

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

Since this site is built with Oxygen Builder, I can simply add the CSS in my custom Stylesheet in my global template.

Step Two: Adding the CSS code

The 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 effect button'.

You can change the colors of the button background by changing the hex code value. It's currently set at #ED3330.

Click here to access hex color codes.

To change the colors of the button font, simply change the hex values set at #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, so it might appear different)

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 on-brand.

Additional styling and tips

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 margin value -

margin-left: 12px;

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

Keep in mind that 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, and not any other forms, 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 {
     color: #fff;
     ...
}

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 the image below.

Alternatively, you can create a custom class for the submit button in Gravity Forms settings. Then declare some properties and values for those custom classes to style.

(image six)

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 here. If it didn't work please let me know also, I'll try my very best to figure out why it hasn't.

Best of luck - Fabrizio

Recommended Posts

  1. How To Style Your Contact Form 7 Forms Using CSS
  2. How To Style Your WPForms Contact Form Using CSS
Posted in ,

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
.FVM © 2014 - 2019. A division of Magnet4Blogging Media. All Rights Reserved.
filmcamera-retrohtml5 linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Copy link
Powered by Social Snap