How to Position Fields in Jotform

September 22, 2021

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

The beauty of the fields on your form is that each field, no matter how different from another, can be styled to your liking through the Form Designer. You can move them wherever you want and the form will still work.

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.

Drag & Drop

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 the Advanced tab then toggle Shrink.

Shrink

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.

Expand

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.

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 on the “Move to a new line” option.

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.

How does it work? Check out this complete on How to Manage Multiple Fields.

Positioning With the Form Designer

The Form Designer is great for many reasons:

  1. Allows designers and coders to quickly create the designs they want.
  2. 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.

Form Designer

Go to Advanced Designer afterward.

Advanced Designer

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

Line Layout
  • 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.

Vertical and horizontal padding is a great way to fine-tune everything as you can see here.

Advanced Positioning With CSS

A more advanced way to modify field position from within the Form Designer is by adjusting the CSS. Adjusting CSS is primarily for advanced users, but with our Form Designer, it’s easy enough anybody can try it.

To do so, click on one field in the Form Designer. Notice, all of the fields of the same type become highlighted.

Form Designer - CSS

The highlighted fields have two sections on the right:

  1. It shows you all parent classes making it very easy to change the CSS rule
  2. It shows you the exact CSS property code that you can use

Here’s how to make the radio option fields fall into 2 columns of 50% in the middle and the two above and at the bottom to take an equal amount of space in a row – 25%.

The best way to do this is to see that there are more fields that should be set with 25% spacing and only 2 that would and should be at 50%.

Knowing this we will first apply the CSS code to the ones more widespread:

/* spread the shrunk fields into 4 equal sizes in one row */
.form-line.form-line-column {
width: 25%;
}

Now, to update the other two, just double-click on the first field. Double-clicking in the Form Designer will allow you to access the field ID, a single click will access the class. IDs are preferred when you want to change one and only one field. Classes are preferred when you want to change all the fields of that type. There’s only one ID allowed per web page, but there are multiple classes.

After these changes we end up with the first field:

/* set the two fields to share half of the form width each */
#id_15 {
width: 50%;
}

This gives us something like this:

Sample CSS code

What now? Click Save and then return to the Form builder to further configure the form, or get the embed code.

Positioning Cheatsheet

Setting Fields Into 2 Columns

.form-line.form-line-column {
width: 50%;
}

Setting Fields Into 3 Columns

.form-line.form-line-column {
width: 33%;
}

Setting Fields Into 4 Columns

.form-line.form-line-column {
width: 25%;
}

Did you notice what they all have in common? The values that we need are set by using this:

{form width} / {number of columns we want}

which is equal to:

100% / 2 = 50%
100% / 3 = 33.33%
100% / 4 = 25%

Align One Field in a Row to the Right Part of the Screen

.form-line.form-line-column.form-col-1 {
float: right;
}

Make Your Form Be Used as RTL (Right to Left)

.form-all * {
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}
label.form-label-top, label.form-label-left, label.form-label-right {
font-weight: bold;
margin-bottom: 9px;
float: right;
text-align: right;
}

See how it looks here: https://www.jotform.com/50887070621960

Have questions? Let us know about this in the comments or in our forum as we are happy to assist you and to hear about your great experiences.

Was this guide helpful?
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.

Comment:

Podo CommentBe the first to comment.