How to Change Background Color of Gravity Form

by sushil kumar | Last updated Mar 11, 2025 | Gravity forms, Styles & Layouts | 0 comments

Gravity Forms is among the most popular WordPress form plugin. However, it lacks in the designing section. You need to manually add CSS and for that, you need to know which class to use for each part of the form. However, the task is no longer difficult as there is a free addon in the WordPress repository which you can use to change Background color without any need to code or change any theme file.

So, there are two methods to change the background color of your forms, one involves coding and the other one needs you to install an addon.

Steps to Change Background Color of Gravity Forms Using CSS

Connect to your server using Ftp software like Filezilla or Fireftp and open the style.css file of your activated theme. You can also navigate to Appearance -> Editor in WordPress dashboard and open the style.css file for editing.

Add the following code to file

body #gform_wrapper_**form ID here**
{
   background : **form colour here** ;
}

Change **form ID here** with Gravity form ID.
change **form color here** with the background color you want to apply.

Check out the below example

body #gform_wrapper_1
{
background: red;
}

Click on the update file button to save your changes.

How to Add Background Colour using Styles and Layouts Addon

Download and activate Styles and Layouts Plugin for Gravity forms addon from the WordPress repository. You can also learn more about this plugin here.
Open the customizer in the post/page where you have added the form.

Navigate to the Style and Layouts Gravity forms option and then select the gravity form.
Let the page autosave and refresh.

Now navigate to Styles and Layouts Gravity forms ->Form wrapper. Here you will all the settings that can be done for the form wrapper.

Move to the Background Color option and select the color from the color picker. You can also enter the hex color code.
It is also possible to add a background image. To do so go to the Background Image setting and click on add Image. Upload a new image using the WordPress media uploader or select one from the gallery.
Click on Save and Close the customizer.

Here is the video I did to show you how it is done with Styles and Layouts for Gravity Forms Plugin

If you have any queries then leave a comment and I will try to resolve them.

Still stuck? Need custom solution? We can help

It Works Perfectly

If you need to give your form a bit of style, this plugin is perfect and easy to use.

Easy to use and powerful

Recommend this to anyone struggling to format their forms

Excellent plugin

Makes the job of styling forms so much easier.

Excellent

Makes styling Gravity Forms EASY.

Great stuff!

I rarely take the time to leave reviews.
With this one I felt compelled because it is so good!

Save me hours of work

I was skeptical to download…how can it be that easy? But, it was and it truly saved me hours of work to style my Gravity Forms.

Much better than forms that come with the themes

Solid plugin, much better than the forms that come with the themes. We’ve used GF to create membership and donation forms, which our clients love. I thought GF was a little pricey but it’s paid for itself in customer satisfaction.

great!

works great! should be in the gravity basic installation…

Exactly what Gravtiy Forms missed

I use it on every page – that should say it all.

Super Awesome and Easy to Use

Really great plug in that is so easy and simple to use! Thank you for your awesome work!

great plugin – easy to use

this plug in was exactly what i needed to help finish the layout of my page.

I love it!

Great Plugin

This plugin is a perfect complement to style Gravity-Forms. The intuitive user interface, integrated into the Customizer, is very well done. PERFECT!!! THANK YOU!!!

Works Great for Me

This app is easy to understand and use and works great for me.

Exactly what I was looking for

I don’t know CSS and was asked to make very specific changes to our Gravity Forms. This did the trick and this tool gave me the flexibility I needed.

Great Plugin Essential!

Very easy to use, exactly what I needed for Gravity Forms!

Should be default Gravity Forms functionality

Great plugin. My go to solution for Gravity Forms styling.

Just right!

Outstanding! Does just what I wanted.

Very Useful

Instead of playing with the style sheets, you can make all the changes directly here.

A great find!

This plugin enabled me to exactly what I wanted to with my forms and they look great! It would have been much more painful to customize my forms without it.

I love it

Easy and efficient plugin !

Very good and beautiful

It worked very good used with divi theme, popup builder and gravity forms!
CongraTulations!

It is a amazing gravity form plugin that I was looking for long time.Thanks

Thanks for helping for designing gravity form such an amazing way.

Very convenient, works great!

I’ve had a need to sometimes change the style of Gravity Forms, and this saves time so I don’t have to figure out the CSS styles and manually override them 😉

Great Gravity plugin

This is great for all those styling problems that can arise. Easy to use with a gentle learning curve.

Perfect

It works perfectly. I am satisfied. Congratulations!

Fantastic plugin!

This plugin saved me hours of work. I am not well versed in coding by hand and now I don’t have to figure it out. I styled my Gravity Forms beautifully, the easy way. Worked perfectly. Thank you.

Just what I needed!

Love love love this plugin. Who wants to spend hours using css to style a form?
Not me! I can get my forms looking exactly as I want them to in just a few clicks.

Very Helpful!

Gravity forms are awesome, but notoriously difficult to style. I was struggling for hours to reduce the space between a field, let alone tweak size, color, etc. This plugin is exactly what I was looking for – well done!

Excellent plugin

Easy and intuitive to use and helps to accelerate workflow.

Great work!

Thank you guys! extremely helpful!

Huge time saver

You can accomplish what this plugin does using CSS yourself, but the plugin saves you the time of doing so. This is a simple, effective and efficient way of making your GF look better.

Good Plugin

A bit of a learning curve for this old woman, but does what I need it to do!!

0 Comments

Submit a Comment Cancel reply