In this post, I’m going to share with you some Gravity Forms submit button color and styling tips. Let’s get into it.
A quick note before we get started with this tutorial: If you are using the Contact Form 7 plugin, do check out my CSS tutorial for some styling tips there. Here is the link.
When it comes to using contact forms on your WordPress website, there are a few good plugins to consider using. One of which is the Gravity Forms Plugin.
Now, Gravity Forms is a great product that I’ve used on multiple blogs and website projects in the past. I recently stopped using Gravity Forms, in fact. The reason being was due to the lack of documentation and tutorials available for styling the actual forms.
Update: Gravity Forms 1.5 now comes with CSS-ready classes. Click here to learn more.
So yes, I love the Gravity Forms plugin but it’s a real headache trying to customize the forms. It is a premium plugin and sadly there isn’t a free version that you can try out like there is with WPForms. However, asides from being hard to style on your website, you do get a great plugin with lots of fantastic features for your money.
OK, so I want to look at just one component of Gravity Forms to style in this post, and that is the form submit button.
Sadly, there isn’t a simple way to do this. You would think being a premium contact form plugin an actual ‘form builder’ feature would be included, similar to how page builders and email sign-up form builder plugins have.
Don’t get me wrong, I don’t mind using CSS to style my forms, I’m comfortable with doing just that. But I know that not everyone is comfortable with it.
Anyway, enough waffling on. Let’s get started, finally.
Below, you will find the CSS snippet, along with instructions on how to style your Gravity Forms submit button!
If you want to learn more about Gravity Forms and its features, click here.
Step One: Create your form and add the ‘shortcode’ to your page
If you already know how to do this or you have your forms embedded. Ignore step one.
Once you’ve created your form using Gravity Forms, save it. Then, 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 my “new client questionnaire form” shortcode that I created at an earlier time, into a static page on my site.
Once the form shortcode is embedded into your page, hit save and then view your page on the front end.
As you can see with my own web form, while it looks kind of clean and semi-styled, 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 more modern and on-brand with the rest of my website!
Important: Before I continue, I want to 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 or somewhat styled 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 let’s resume…
So to add some 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 to my theme. For this, I can simply go to Appearance > Customize > Additional CSS. See the image below.
However, since I use Oxygen Builder, I already have a dedicated stylesheet with my theme.
Step Two: Adding the CSS Snippet
The next step is to add the CSS and I’ve already created this for you to use 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;
}
I’ve shared input states already in a previous post. But I’ve included it below for your reference:
- input – This is the state of the button before any action has taken place on it.
- input:hover – This is the state of the button when someone hovers their mouse pointer over the top of it.
- input:active – This is the state of the button when someone clicks on the button itself.
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 flush your website’s 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 form 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.
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.
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
