Form Field Positioning

Last Update: November 11, 2016

Field positioning is essential in designing your forms to match to your website structure. There are times that you will want to keep two or more fields on the same line (side by side.) Other times, fields will need their own lines. Luckily, JotForm provides different functions to manipulate form field positions.

First, we must learn how to shrink a field to allow it to be positioned next to another field. 


Shrinking a Form Field: Select the form field, click the drop down arrow just besides the "x" button or "Right Click" on a form field and click "Shrink.”



Shrinking allows a form field to take up only space it actually needs instead inhabiting a whole line. Look at the screenshot below:



This is useful if you want to place form fields in the same line. See Example 1 below, you would of course need to shrink the other field so that it would move up on the same line.

Example 1:



Now if you have already shrink a field BUT you want it to be placed at the next line, then you can do that by clicking the "Move to a new line" option. 



This moves a shrunken field to a new line and separates it from another shrunken field above it. Look at Example 2 below:

Example 2:




Now if you would like to merge a field to the above line, that is possible by clicking the "Merge to above line" option. 



As the opposite of "Move to a new line,” this is used to keep two or more fields in the same line. Look at Example 3 below:


However, please note that the width of the form is also a factor here. If the form's total width is less than the total width of all the fields in one line, then the last field will be force to move to a new line in display, you can simply increase the form's width to allow all the fields to sit in the same line. This guide about form widths might help: The Importance of Form Widths 

That's about everything when it comes to positioning your fields for better design. Did you find this article useful? Please comment below if you had any issues applying the positioning techniques.


23 Comments...


   
pixelp (June 11, 2011 at 02:58 AM)

I want to create a form with 2 columns but the system won't let me.
I
used the shrink button but it still pulls the entries back to the left hand side.

View Answer


   
J Nixon (July 21, 2011 at 12:29 PM)

Is it possible to upload the original form image (in jpg format) as a background?


   
neilparks1 (September 15, 2011 at 12:04 AM)

This shows how to get two fields on one line. How would I get 3 or 4?

I like the "matrix" idea but the text boxes in a matrix are too small.

View Answer


   
power2u (September 23, 2011 at 04:04 PM)

Because of fraud, we have had to restrict sales to the 50 US states. But want to continue selling overseas (and Canada)

I created a lightbox form on the checkout page to collect contact info (ship to address) and order info. I'd like to have it set up so there are 4 fields in a row collecting Quantity, Product Name, Price and Total. With total, it would be great if it did the math, but not essential. Total can also be skipped if it's a problem.

Is this possible?

View Answer


   
chfranklin (October 24, 2011 at 02:56 PM)

I need to add more fields but my form seems to have run out of space at the bottom. Does it have a cop on the amount of space?

View Answer


   
eclancy (November 18, 2011 at 05:46 AM)

My form looks different when I put in on my website. The check boxes and radio buttons are all a line above my option. I would like the square for the check box to be to the left of the text for that box. It looks correct in JotForms builder and preview, but online it is one line below. It looks like this: http://vtpf.com/freequotes/test.html

View Answer


   
vtpf (November 18, 2011 at 12:32 PM)

It is the OPTIONS that are not aligning properly and their is no "Shrink" available when right-clicking the OPTIONS, just the LABEL.

Please look at the result online:
http://vtpf.com/freequotes/test.html


   
vtpf (November 18, 2011 at 01:21 PM)

If figured it out, the css attached to my web page had css for forms that was conflicting with this jot form.
Thanks, I'm all set


   
NickyB (November 22, 2011 at 12:44 AM)

Hi there,

This is such an awesome app - thank you... Just a quick question, how can I remove the padding so the form fits it the top left??

Thanks,
Nicky

View Answer


   
mrbrent (October 26, 2012 at 05:16 PM)

Thank You, This is why I have been using JotForm for over two years now. Excellent service and support.


   
brerrabbi (February 20, 2013 at 01:14 PM)

Shrink is disabled for Header fields; what option do I have (other than constructing a JPG with my form title and logo in one line).

View Answer


   
idansk2 (March 28, 2013 at 05:00 PM)

Your example shows Full Name, with two separated fields, one for first, and one for last name. When I do exactly what you are talking about in, they do move up to the same line, but since the Last Name Field doesn't have a label per say (left blank), the field is not aligned like shown in your example. It is up about five pixels. Thanks.

View Answer


   
david (May 07, 2013 at 08:09 AM)

I have a jotform that I use to have people fill out with information that are coming to summer camp. I also have a form that is a PDF that has legal information that is a waver that has to be filled out and signed. The 2 forms contain the same information but the waver is also a release form that has to be signed. My question is this: Is there a way to have the jotform fill out both forms. Where I have the Name and address section of the jotform is there any way to have this information put in the Name and address section of the waver form that I have? Currently they have to fill out 2 forms. The jotform puts the information into excel for me but the PDF has to be printed and signed and mailed in for legal reasons. Any information would be great.

View Answer


   
aandztechdotcom (May 22, 2013 at 06:01 PM)

It didnot work for me. all it dos is shrink and only give me a move to new line option before i can merge.

View Answer


   
dianakryski (June 20, 2013 at 05:46 PM)

Your answer to NickyB's question above helped to move the form up to the top, but there is still a half-inch of space/margin along the left. In order to center the form in my website's side-bar widget, how can I get rid of that space along the left of the form? Thanks!

View Answer


   
rmyrtle (September 04, 2013 at 05:10 PM)

I have separated the reply options into two columns, but the are clumped closely together so when reading, the left column seems to run into the right column. How can I separate the two columns so they are easier to read?

View Answer


   
form_fiskalloy1 (October 18, 2013 at 12:31 PM)

I have three drop down fields in a row, how do I add space between the fields? It seems very cramped right now.

View Answer


   
tomorrownight (October 02, 2014 at 12:20 PM)

Hey, i cannot seem to make "Gift Registry" go onto a another line like this, is it me or the plugin?

http://form.jotformpro.com/form/42725093973967

thanks,

Adam

View Answer


   
SRWproducts (January 16, 2015 at 02:30 PM)

How can I remove the space between fields in a row? I have City, State & Zip (3 text boxes) and want them to be grouped closely together.

View Answer


   
DRRE (February 07, 2015 at 02:54 PM)

Way Cool! Thank You


   
lisa_marzano (April 07, 2015 at 07:48 PM)

Moving fields on these forms is not easy at all. Can you add a move left / move right--like you have the move up/down? I can't get these to drop in the right order and it's driving me nuts (this was really easy in FormsCentral...)

View Answer


   
hr669 (July 09, 2015 at 03:33 PM)

I can't seem to even locate an edit button on my forms, much less try to make the edits, seeing how so many people have issues with it...
am I going to have to build a completely new form to be able to edit the fields??

View Answer


   
hr669 (July 09, 2015 at 03:34 PM)

to clarify, my forms were imported from FormCentral.


Send Comment