How to Change the Spacing Between Questions

April 12, 2024

Jotform Form Builder is very flexible, and you can customize your forms as you wish. Standard field spacing can also be changed to fit your needs and match your design better. When you reduce the spacing between questions, your form will be changed:

From this:

Jotform form with default line spacing

To this:

Jotform form with less line spacing

You can change the question spacing in the Form Builder through the Styles tab of the Form Designer or the Advanced Designer

Question Spacing

The easiest would be to adjust the spacing through the Styles tab of the Form Designer. Here’s how you can do that:

  1. In the Form Builder, click the Form Designer icon.
  2. Select the Styles tab.
  3. Change the value of the Question Spacing option. The value you enter here is in Pixels.
Question Spacing option in the Styles tab of the Form Designer in the Jotform Form Builder

Inject Custom CSS

If you wish to override the value with other units, you can do it by injecting custom CSS codes. Follow the same step to get into the Styles tab of the Form Designer, navigate to the Inject Custom CSS box, and enter the following:

.form-line {
    margin-bottom: 3px;
}
Inject Custom CSS box in the Styles tab of the Form Designer in the Jotform Form Builder

You can follow this guide to inject the codes: How to Inject Custom CSS Code in Your Form.

Advanced Designer

You can also change the spacing between form fields through the Advanced Designer. To get into the Advanced Designer, simply click the Advanced Designer button at the bottom part of the Styles tab of the Form Designer window.

Advanced Designer button in the Styles tab of the Form Designer in the Jotform Form Builder

Under the Design tab of the Advanced Designer page, expand the Line Layout section and adjust the following:

  • Line Spacing — This is the main spacing between each question.
  • Vertical Padding — Adjust the value of this option to make the vertical spacing of each question closer or farther from each other.
  • Horizontal Padding — Adjust this to change each field’s left and right spacing.

Lastly, don’t forget to click the Save button at the upper-left side of the Advanced Designer. You can return to the Form Builder by clicking the Jotform Icon at the top-right of the page. The above steps are outlined in the following short GIF:

Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Baddeley - Profile picture
  • culturalvistas - Profile picture
  • kwsajdak - Profile picture
  • couplaguysandgals - Profile picture
  • nolanpatrickgreen - Profile picture
  • amit kumar kushwaha - Profile picture
  • thrivein - Profile picture
  • cburtonhc - Profile picture
  • pinatas - Profile picture
  • Mohd - Profile picture
  • mscqadri - Profile picture
  • andy_ohalloran - Profile picture
  • ishushansky - Profile picture
  • Mark Sabol, Ph.D. - Profile picture
  • Mark Sabol - Profile picture
  • JAISANKAR - Profile picture
  • Sarah - Profile picture
  • CoverStarExperiences - Profile picture
  • Gio - Profile picture
  • Skweekah - Profile picture
  • jignesh patel - Profile picture
  • guest_22812089102042 - Profile picture
  • billroth - Profile picture
  • keedme - Profile picture
  • Alain974 - Profile picture
  • iecampus - Profile picture
  • nahro22 - Profile picture
  • sifugarry - Profile picture
  • davidgoebelstate - Profile picture
  • 405media - Profile picture
  • DebbyWerthman - Profile picture
  • hadassf - Profile picture
  • Tristan Capp - Profile picture
  • BClifton305 - Profile picture
  • walkinwardrobe - Profile picture