Side by side form field positioning

September 22, 2021

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.

Was this guide helpful?
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:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: