How to Position Fields in JotForm

Positioning fields on your forms is one of the most frequently asked questions. There are different ways to adjust field positioning on your form.

  1. Drag & Drop
  2. Shrink
  3. Expand
  4. Go to new line
  5. Merge to the line above
  6. Manage multiple fields at the same time

Drag & Drop Your Fields

This is the easiest way to add fields and arrange them. All you do is click on the field and while holding the mouse button down - drag to a new location.

jotformposition1

Follow the same easy steps to grab the field from the left Tools menu to move the field around your form. Click -> hold -> drag and drop.

Utilizing the Power of Shrink

Shrinking fields is used when you want to place several fields on the same line. To shrink a field, open the field properties, go to Advanced tab then toggle Shrink.

jotformposition2

Shrinking a field will reduce it to the minimum width needed. When you shrink multiple fields next to each other, they will appear on as few lines as necessary.

The Great Expand

Expanding a field back to full width is just as easy. Simply turn off the Shrink option you just did above.

jotformposition3

When it’s Time to Move - Move to a new line

If you Shrink 10 consecutive fields, all of them will display on as few lines as possible. Sometimes this is what you want, but more frequently users might want to display two fields per line.

jotformposition4

In that case on every 3rd line set it to be on a new line. You can access it the same way as the others- by going to the field properties, Advanced tab then toggle "Move to a new line"

Merging the Lines Together

Let’s say after looking at the fields displayed 2 per line, you realize you would prefer them to be 4 per line. In this case, you can merge the lines together by turning off the "Move to a new line" option you just did above.

It will break the new line and will make it act as just another shrunk field.

Multi-tasking and a Time Saver

Do you want to take form's easy to use Form Builder to the next level? Then this is the option for you!

The options to duplicate, remove, require and un-require save time and let you adjust multiple fields in one step.

Positioning with the Form Designer

The Form Designer is great for many reasons:

Allows designers and coders to quickly create the designs they want

Those that do not know code (HTML, CSS, etc) can also build beautiful designs

Anyone will be able to use it and get the design they like with just a few simple mouse clicks.

To use it just open your form and click the Form Designer icon located in the top right corner of the page.

jotformposition5

Go to Advanced Designer afterward

jotformposition6

The first set of options to adjust positioning are under Line Layout.

jotformposition7

Line spacing - Increase or decrease the space between two rows of fields. Using line spacing is helpful since it maintains the spacing for the error view as well. That is, when the user enters data when they submit the form and it’s returned as an error and the field is highlighted. Such as when they forget a required field. It is also great for global field positioning.

Vertical padding - Increases the space similar to the above option, but this option makes the size of the field larger both above and below.

Horizontal padding - It will increase or decrease the amount of space between the fields and also their horizontal outer border.