Side by Side Form Field Positioning

March 26, 2024

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.

Youtube Embed Poster: Mv06Wg2JREA

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.

unshrunk form fields

To shrink a field, please proceed with the following steps:

  1. In the Form Builder, click the element’s gear icon to open the Properties panel.
  2. Go to the Advanced tab.
  3. Scroll down and toggle Shrink to “On”.
Form Builder Shrink Option

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.

shrunk form fields

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

shrunk form fields move to a new link

Pro Tip

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:

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:

  • joannep2008 - Profile picture
  • swadams3 - Profile picture
  • Hannah94 - Profile picture
  • ILSdata - Profile picture
  • jeffatlas - Profile picture
  • Flowh - Profile picture
  • JFWienecke - Profile picture
  • malonk20 - Profile picture
  • billsMusic - Profile picture
  • Anita - Profile picture
  • MFJLabs - Profile picture
  • amyadmin - Profile picture
  • cfappreciation - Profile picture
  • hr669 - Profile picture
  • hr669 - Profile picture
  • lisa_marzano - Profile picture
  • DRRE - Profile picture
  • SRWproducts - Profile picture
  • tomorrownight - Profile picture
  • SWCTchapter - Profile picture
  • NHK - Profile picture
  • hamamilano - Profile picture
  • ahbinelask - Profile picture
  • demandboost - Profile picture
  • markashton - Profile picture