How to Change Width of Gravity Forms

by | Last updated Mar 11, 2025 | Gravity forms, Styles & Layouts | 1 comment

Whenever you publish a form on your website then it automatically takes its width depending upon the place it is added. If it is inserted in post/page then it takes the width of post container. If it is added as widget in sidebar then it adjusts its width to that of sidebar.

However if you want to specify the width then you need to add width parameter to form-wrapper ID. This can be easily accomplished by using Styles and Layouts for Gravity Forms plugin.

A little Brief of Styles and Layouts for Gravity Forms Plugin

This plugin is based on WordPress Customizer API that lets you instantly see the changes you make without any need to refresh the page. It has more than 100 settings to customize the look of your forms. It is fully responsive and you can set width/height in percentage as well as pixels.

How to use Styles and Layouts for Gravity Forms to Change Width

Once you activate and install this free plugin from WordPress plugin directory you will get a new panel in customizer.  Initially you will only get the option to select the form. Once you select the desired form then Styles and Layouts plugin will automatically save your settings and refresh the page.

open customizer

This time when you will navigate to Styles & Layouts Gravity Forms panel then you will notice that a lot of new sections are there. All these sections contains settings for particular part of form ex form wrapper, confirmation message, submit button etc.

styles & layouts menu

Option for setting the width can be found under Form Wrapper section. You can give width in pixels, percentage or em. If you would like to have responsive design then width should be entered in percentage.

maximum width

You can also do other settings like background colour/image or give margin and padding to your form from this section.

 

If you set the width by editing the style.css file of your theme then whenever you will change or update the theme then your styling will be lost. If you do styling using the plugin then the settings will work even when you change or update the theme.

Here is the video tutorial for this article

If you want to ask anything regarding this tutorial then drop a comment.

Still stuck? Need custom solution? We can help

Super Awesome and Easy to Use

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

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.

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 😉

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.

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.

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!!!

Easy to use and powerful

Recommend this to anyone struggling to format their forms

Excellent

Makes styling Gravity Forms EASY.

Excellent plugin

Easy and intuitive to use and helps to accelerate workflow.

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.

It Works Perfectly

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

great!

works great! should be in the gravity basic installation…

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!

Good Plugin

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

Excellent plugin

Makes the job of styling forms so much easier.

Great stuff!

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

Very good and beautiful

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

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.

Great Plugin Essential!

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

Works Great for Me

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

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!

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.

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.

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.

Exactly what Gravtiy Forms missed

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

Great work!

Thank you guys! extremely helpful!

I love it

Easy and efficient plugin !

Just right!

Outstanding! Does just what I wanted.

Should be default Gravity Forms functionality

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

Very Useful

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

great plugin – easy to use

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

I love it!

1 Comment

  1. Kathleen Meyerowitz
    Kathleen Meyerowitz on August 12, 2019 at 7:44 am

    Hi, how can I add padding or margins between the radio buttons? My choices are all too close together at a desktop size. Also, I can’t get to the next page on my form because the “next” button is in edit mode and whenever I press on it, instead of going to the next page I’m forced to just edit it! Please help.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *