Positioning your fields correctly is essential when you’re designing your forms to match your website structure. There are times you want to keep two or more fields on the same line. 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. That means the field won’t span across the entire width of the form. For example, below is an image showing the normal and shrunk fields.
To shrink a field, please proceed with the following steps:
- In the Form Builder, click the element’s gear icon to open the Properties panel.
- Go to the Advanced tab.
- Scroll down and toggle Shrink 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 form’s width allows it.
What if you want to move a shrunk field to the next line? You can achieve that by switching the Move to a new line option to “On”.
Protip
To display the fields in 3 or more columns, check out the “Setting Up Form Columns” guide.
You may also need to adjust your form’s width. For more information, see “The Importance of Form Widths”.
That’s about everything when it comes to positioning your fields for better design. Did you find this article helpful? Please comment below if you have had any issues applying the positioning techniques.
See also:
Send Comment:
42 Comments:
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.
How do I reposition the whole form?
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?
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!
how do I shrink the form length?
Now we're talking! Thanks.
How to align fields that are split so rows line up?
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).
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.
How do you reduce the space between the form fields. It seems really spaced out between each field I insert.
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)
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
I have columns of options and I would like to add more space between them to even out the entire the entire field
to clarify, my forms were imported from FormCentral.
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??
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...)
Way Cool! Thank You
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.
Hey, i cannot seem to make "Gift Registry" go onto a another line like this, is it me or the plugin?
<a target='_blank' href="http://form.jotformpro.com/form/42725093973967" >http://form.jotformpro.com/form/42725093973967</a>
thanks,
Adam
my iphone app is not sending me the confirmations did something change on it?
Using smart phones to receive & managing submissions on the go could make the information accessible to other android apps in the phone. Have you looked into how our privacy is not controlled by the user of smart phones? It's not the content that is being stored in the phone that is being submitted. It is how it is collected and stored by android apps.
I have not been fortunate to date to get forms submissions from my website. However, I am still working on it. I am interested in getting my visitors involved with interacting on subject matter topics I put on a section of my website and leaving comments. Perhaps your combining submissions app can be of use for me.
Please feel free to drop me a line on my email address. Nsasi
very good
Türkçe dil desteğiniz olsa ne güzel olur
It is very good to see this new feature bringing 3rd party apps. But how can we trust them? Do jotform team check every single app to make sure they are not stealing information?
I have not seen any information regarding this matter.
Thanks
Amir
The apps idea is a good one. I like it. I haven't quite found one that I want to use yet though!
I like the idea of combining submissions ... but I would like to combine submissions from 2 separate forms ... not as a csv but actually combining the submissions. Then one could analyse directly in jotform with your existing tools like grids.
Galleria ... great but how can you use that if you are using filepicker for image upload ... which lets face it is the best way as it orientates photos from smartphones. The gallery with normal upload will have photos all on their side etc.
Submissions ... I would like to see an app that enabled a client to directly edit submission data ... not just look at it ... I've got that with the brilliant grid and stuff.
Hope this helps. Hope I can use an app soon.
Many thanks
Mark
excellent congratulate the apps. The only thing missing to make it perfect are statistics for each item in the forms with several options.
I have three drop down fields in a row, how do I add space between the fields? It seems very cramped right now.
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?
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!
It didnot work for me. all it dos is shrink and only give me a move to new line option before i can merge.
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.
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.
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).
Thank You, This is why I have been using Jotform for over two years now. Excellent service and support.
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
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
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:
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?
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?
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.
Is it possible to upload the original form image (in jpg format) as a background?
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.