JotForm User Guide / Create Forms /

How to Position Fields in JotForm

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

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.

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.

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.

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 "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.

Go to Advanced Designer afterward

The first set of options to adjust positioning are under 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 are 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.

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 the 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, single click will access the class. IDs are preferred when you want to change one and only one fields. 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:

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:

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.

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:
Contact JotForm Support:

Send Comment


  • jill5000

    In Excel I can create a cell of text inside of " " and add field content within it.

    Such as in the example
    ="Signing this acknowledgement will not result in any additional costs, cost share or liabilities to "&'Start Here'!H3&" County."

    How do I do this in Jotform?


  • Whareoranga

    Hi how do i get 2 x date fields on the same line

  • SpartanProducts

    It is entitled T-shirt, Sweatshirt, & Hoodie Order Form. It is a 2-column form. No matter what I do, I can't get content the content I want into the 2nd column. I have read the tutorials. I have worked with all the properties, all the elements in the designer and the advanced designer, including form width, horizontal and vertical padding, margins, and line spacing. It looks like it should be a simple matter to make a new field (or duplicate a current one) and move it to the right column. If I ever do get 2 fields side by side, they are not lined up very well, and I can't get as many to move as I want, and it requires way too much effort.
    And I have not been able to put 2 different fields next to each other in different columns. For example, I would like to put the text showing my company name, phone, and email on the right beside the text boxes on the left.
    Why can't you make it easy to move fields around? What should be simple drop and drag is hours of frustration. I would like to make many, many forms through JotForm as you do have many good features and functionality. However, the extreme difficulty doing a simple layout and formatting a form is making JotForm an unworkable solution.
    Please look at my form an let em know what is going on.

  • mistypachecoumb

    question. Im making a form where one of the fields shows how long a person has lived at his/her residence. I want it to say 1) less than a year (another box appear asking to place the last residence) 2) 1 year (box appear asking to place the last residenice 3) 2 years etc etc. then on +5) goes on to next thing on application. Is there a way to do this?

  • cavezy

    Hi I have shrunk a table with only 1 column in it, duplicated it and still it wont merge into 1 line. Form width is 900, table width is 50

  • m.saeed

    i have a problem i used this code but label still in left
    note: i use Arabic language

  • rugbynorcal

    When changing some spacing and sizing of fields, some fields on my form entered to the next line. Example: Contact Name used to be First and Last name fields on the same line, now they are on top/bottom of each other. How can I change this?

  • jmgizzo

    Sucks. 3 days of work. Got it perfect and zap text field gone...

  • czawodzi

    Worked like a charm!

  • williamsreg

    Very frustrating software to use. I'm only here because of FormsCentral begin phased out. Spent the whole day learning the sotware. It's very erratic and does things you don't expect. It wodl be nice if the view of the form builder is the same as the preview. Sometime it is vastly different.

    Still cannot figure out how the user can CONTROL the placement of two (or 3) fields on the same line. The User Guide tries to help but really you should test it with people who have limited experience with your software and get their feedback. The cursor moves at a rapid pace and is extremely hard to follow thus making it virtually useless. I designed several forms on Forms Central and hardly used the user guide. I have no choice but to learn to use the tool or cancel my subscription and find another provider. I will stick with this but it would be nice for future users if you did something about your user guide and videos.