Side by Side Form Field Positioning

February 5, 2025

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

Shrinking a field reduces its width to the minimum required size, preventing it from spanning the entire width of the form. This allows you to place multiple fields side by side, optimizing space and improving form layout.

For example, the image below illustrates the difference between a normal and a shrunk field.

Unshrunk and Shrunk fields in Jotform

Shrinking a field is easy, you can follow the steps below:

  1. In the Form Builder, click the element’s gear icon to open the Properties panel.
Gear Icon to open field's properties
  1. Go to the Advanced tab.
  2. Scroll down and toggle Shrink to On.
Shrink option in Short Text Properties

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.

Unshrunk and Two Unshrunk Fields as sample result in Jotform

If you want to move a shrunk field to the next line, you can easily do so by enabling the Move to a new line option. Simply toggle this option to On, and the field will be positioned on a new line.

Move to a New Line option in Field Properties in Jotform

Pro Tip

  • To display fields in three or more columns, check out the Setting Up Form Columns guide for detailed instructions.
  • You may also need to adjust your form’s width to ensure a balanced and visually appealing layout. For more details, check out The Importance of Form Widths guide.

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