How to position fields in JotForm

Last Update: November 27, 2016

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


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

The beauty of the fields on your jotform 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 jotform. Click -> hold -> drag and drop.


Here’s a link to an animated gif to see it live.



Utilize the menu and move your fields up and down


Some prefer a more precise way to get the element in just the right position. Just a right click is needed on the field you want to move and choose where you want it to go:


Going UP                    or                        Going Down




Take a look at how easy it is to move the fields by clicking here.



Utilizing the power of Shrink


Shrinking fields is used when you want to place several fields on the same line. To shrink a field, right click on it, or click the gear on the top right of the field, then select “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. Right click, or click the gear to bring up the menu. Then select 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 right clicking, or selecting the gear, and then selecting “Move to a new line” from the menu. This option will only be displayed if the field is shrunk.




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 bring up the same menu, and then selecting the “Merge to above line” option.


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



Bringing it all together it looks too easy to do.



Multi-tasking and a time saver


Do you want to take JotForm’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 JotForm and click on Designer button located in the toolbar




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 jotform 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: http://form.jotformpro.com/form/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.



2 Comments...


   
williamsreg (June 07, 2015 at 07:36 PM)

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.

View Answer


   
czawodzi (July 07, 2015 at 10:38 AM)

Worked like a charm!


Send Comment