JotForm User Guide / Create Forms /

Side by side form field positioning

Side by side form field positioning

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.


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.

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


  • joannep2008

    I saw the question below and it's my question too but there is no answer to view so I'm just asking again. Sorry. Thanks for the help

    How do i get the tables to fit close together knit tight instead of leaving big gaps like it is at the moment? I want to use 2 columns of tables and they wont sit up under each other or beside each other.

  • swadams3

    How do I reposition the whole form?

  • Hannah94

    how do i get the tables to fit close together knit tight instead of leaving big gaps like it is at the moment? i want 2 columns of tables (i have about 10 tables to place) and they wont sit up under each other or beside each other. someone help?

  • ILSdata

    Is there a way to affix the form rows/columns so that they do not move when you are filling out the form? Everything is in it's right place until someone tries to fill the form out, then suddenly the rows and columns start moving all over the place. Help!

  • jeffatlas

    how do I shrink the form length?

  • Flowh

    Now we're talking! Thanks.

  • JFWienecke

    How to align fields that are split so rows line up?

  • malonk20

    Why is my header properties only allowing me the fields of 'general' and 'heading image?' going to the 'advanced' options is not even an option for me! Need to be able to adjust these fields to be next to each other rather than one on top of the next (very long and not visually attractive).

  • billsMusic

    I am trying to set up an availability schedule for a job application. I have the conditions set so if someone checks off "Unavailable Sundays," the corresponding schedule for Sundays disappears so they are no longer required to input their availability. I shrunk these fields so they would appear next to each other on the same line. However, when an unavailability box is checked and the corresponding day disappears, the other fields for other days and unavailability buttons rearrange themselves instead of staying in their original lines, where they line up nicely. How can I make it so the corresponding day still disappears, but all the other fields stay in their original lines?

    I hope I'm being clear, I am completely new to Jotform and CSS.

  • Anita

    How do you reduce the space between the form fields. It seems really spaced out between each field I insert.

  • MFJLabs

    Hate to be a buzzkill here guys, but this is total BS (with a capital 'B' and a capital 'S'). Your users have been asking for the separate name functionality for over 3 freakin years. Seriously?

    It's completely unacceptable to ask us to manually separate name fields on every form we create. Just the thought of it is repulsive. AND, to make it worse ... the 'shrink' field functionality doesn't work on the new JotForm Cards ... Someone please write a freakin widget or something.

    The inability to export &/or integrate using separate name fields is a serious deficiency in your platform. Fix it or risk being ejected from the SF Bay Area by way of protest. haha (facepalm)

  • 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

  • cfappreciation

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

  • hr669

    to clarify, my forms were imported from FormCentral.

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

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

  • DRRE

    Way Cool! Thank You

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

  • tomorrownight

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



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

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

  • 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!

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

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

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

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

  • mrbrent

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

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


  • 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

  • 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:

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

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

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

  • J Nixon

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

  • pixelp

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