Introduction

If your form fields appear too close to the form border or the form container doesn’t have any space surrounding it then you should give padding or margin to it. Here I will give you a quick summary of margin and padding so that you get the full grasp of what we are going to achieve in this article.

Margin is the distance of the form’s container from its immediate outer element. It will add space around the form container. You can give margins for the top, right, bottom, and left sides.

Padding is the distance of form elements from its container. It will add space inside the form container. You can give padding for the top, right, bottom, and left sides.

So, padding acts on the inside, and margin acts on the outside. You can read more about margins and paddings from w3schools. Recently I have also published tutorials for changing the background color and font family.

By the end of this step-by-step tutorial you will be able to set margin and padding for these different parts of the form:

• Form Wrapper
• Form Header
• Form Title & Description
• Field Labels
• Sub Labels
• Field Description
• Text Fields
• Dropdown Fields,
• Radio Inputs
• Checkbox Inputs
• Paragraph Textarea Fields
• Section Break Title & Description
• List Field
• Submit Button
• Confirmation Message
• Error Message

Steps to Set Margin and Padding Using Gravity Booster

Margin and padding act on almost all the different parts of the Gravity Forms. Gravity Booster is a free plugin for Gravity Forms that lets you design your forms without coding. The design works on all themes and page builders like Divi, Elementor, WPBakery, Beaver Builder, etc. Follow the steps mentioned below to set the margin and padding using Gravity Booster.

• Login inside your WordPress dashboard and search for Gravity Booster under Plugins -> Add New. Install and activate the plugin.
• Now go to Forms -> Gravity Booster menu item. Here select the form in which you want to set margin and padding. 
• After selecting the form the page will auto-reload with the form design settings on the left sidebar and preview on the right side. The design settings are divided into multiple sections like Form Wrapper, Form Header, Form Title and Description, etc. Each of these sections has built-in controls for setting margins and padding.
• Let’s navigate to the Form Wrapper section and scroll the settings sidebar to the bottom to find the margin and padding settings.
• The margin and padding settings let you set one value for all four sides or you can also give separate values for the top, right, bottom, and left side. You can add the values in px, em, rem, or percentage. You can also use the slider to change the values using the mouse.

Steps to Separate Margin & Padding for Different Sides

If you add a value inside the margin or padding input box then it automatically applies the same value to all four sides. To unlock the separate controls for each side you need to click on the link icon present on the ride-hand side.

Clicking on the icon will show all four controls for the sides. There will also be a visual representation next to each control highlighting the side that will be affected by this control.

Saving Margin & Padding Settings

All the design changes you make are a live preview in the Gravity Booster itself. So, once you have set the margin and padding for all the different sections of the form and are happy with the changes then it’s time to save them.

The settings can be saved by simply clicking on the Save button present at the top right corner. If you don’t save your changes then they won’t show in the frontend where your form is embedded.

Steps to Set Margin and Padding using Custom CSS

If you are looking to set margin and padding using custom CSS then use the following codes. Each code is meant for a separate section of the form so, you can use them as you see fit for your design requirements.

Note: Change the Form_ID to your actual form id otherwise the code won’t work.