User Guide

Form Field Positioning

Last Update: August 5, 2017

Field positioning is essential in designing your forms to match your website structure. There are times you 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, what happens when you shrink a field? This option reduces the field's width to its bare minimum. Meaning, it won't span across the entire width of the form. As an example, below are 2 fields (normal and shrunk) so you can see the difference.

To shrink a field, click the GEAR icon to open its properties > go to the ADVANCED tab > then toggle the SHRINK option to ON.

Repeat the same steps on another field. You'd notice the shrunk fields would align themselves on the same line for as long as the width of the form allows it.

But, what if you want to move a shrunk field to the next line? You can achieve that by enabling the MOVE TO A NEW LINE option. It's right below the SHRINK option.

NOTE:

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 automatically move to a new line. If you want to display 3, 4 or even more fields in one line, you need to increase your form's width. 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.

25 Comments...

  • pixelp

    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.

  • J Nixon

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

  • neilparks1

    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.

  • power2u

    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?

  • chfranklin

    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?

  • eclancy

    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

  • vtpf

    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

    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

    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

  • mrbrent

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

  • brerrabbi

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

  • idansk2

    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.

  • david

    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.

  • aandztechdotcom

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

  • dianakryski

    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!

  • rmyrtle

    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?

  • form_fiskalloy1

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

  • tomorrownight

    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

  • SRWproducts

    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.

  • DRRE

    Way Cool! Thank You

  • lisa_marzano

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

  • hr669

    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??

  • hr669

    to clarify, my forms were imported from FormCentral.

  • cfappreciation

    I have columns of options and I would like to add more space between them to even out the entire the entire field

  • amyadmin

    Why don't I have the shrink option in my Advanced Settings? We are trying to make a table where we can input - Name of Shareholder and No. of Shares, but the only widget that I can find is the spreadsheet

Send Comment