How to Change Width of Gravity Forms

windows10Gravity Forms StylingLeave a Comment

When you create and embedded a new gravity form in your WordPress post or page the form automatically gets its width assigned. There is no direct option to change the width so that it becomes small or large.

You either need to add CSS to your style.css of applied theme or use a Plugin like Style Builder for Gravity forms. The latter being the optimal choice if you are into programming.

Steps to manually assign width using CSS

Open style.css of your current theme in editor and type the following code at the end of css

body #gform_wrapper_**form ID here**

{

Max-width: **Add width here**;

}

Change **form ID here** with form id of gravity form. You can remove _**form ID here** to set universal width for all forms

Change **Add width here** to the width you want to provide. It can be in px, em or %

Steps to Change From Wrapper with using Style Builder

Style Builder for Gravity Forms is specifically developed to make the design aspect of forms an easy and enjoyable task. It doesn’t require any coding skills and provides more than 130+ customization settings.

  • Install and activate Style Builder for Gravity forms from here.
  • From WordPress dashboard Navigate to Forms -> Style Builder .

Style builder in submenu

  • Click on Add New button

Add New Button

  • Select the Gravity Form you want to target. All your gravity forms will automatically appear in form ID dropdown menu.

Style Builder Form ID

  • Now click on Form Wrapper tab. This section contains all the settings to style body of gravity form.
  • The very first setting is Maximum Width. Enter the width you want to set. Values can be in px, em or %. Example 450px.

Set form wrapper width

  • Click on Publish button.
  • Now again navigate to Forms -> Style Builder and copy the shortcode.

Style builder Shortcode

  • Use this shortcode in your post.

shortcode in wordpress post

You can also change a lot of other settings like background color, background image, border size , border color , border type, margin, padding etc using this plugin without any codding.

Here is the video tutorial to change width of Gravity Forms using Style Builder

Leave a Reply

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