How to Position Form Elements in Jotform

December 14, 2024

The ability to position elements is one of the best features of a form builder. It allows you to quickly add and move fields anywhere in the form. There are a few different ways to position elements on your form. Check out the list below:

Youtube Embed Poster: Mv06Wg2JREA

Drag and Drop

Drag and drop is the easiest way to add arrange elements on your form. All you need to do is left click your mouse, then drag and drop the element to your preferred location in the form.

Shrink

The shrink option is best used to place several elements on the same line. To shrink an element, open the field properties, go to the Advanced tab, then toggle Shrink.

Shrinking an element will reduce it to the minimum width needed. When you shrink multiple elements next to each other, they will appear on the fewest amount of lines necessary.

Expand/Unshrink

Expanding an element back to full width is just as easy. Go back to the Advanced tab of the element properties, and toggle the Shrink option to Off.

Expand/Unshrink line Toggle in Advanced Properties of the Element

Move to a New Line

If you want to shrink an element but keep it on a new line, you should toggle Move to a new line to On, still through the Advanced tab of the element properties.

Move to a new line Toggle in Advanced Properties of the Element

Note

For the new default theme, shrinking two elements in the Form Builder will automatically merge them into a single row. In other themes, depending on the form width, the Form Builder can merge three or more fields into a row. Check out our guide on How to Apply Your Form Theme for more details.

Merging the Lines Together

Let’s say after looking at two fields displayed on one line, you realize you would prefer them to be four fields per line. You can merge the lines by turning off the Move to a new line option. Again, you can only have two or more rows with the old themes. For the new default theme, you’ll have to inject custom CSS codes to align three or more fields in a row. Contact us for help.

Multi-Tasking and a Time Saver

Do you want to take form’s easy-to-use Form Builder to the next level? Then this is the option for you! The options to duplicate, remove, require and un-require save time and let you adjust multiple fields in one step. How does it work? Check out this complete on How to Manage Multiple Fields.

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:

  • Mir - Profile picture
  • Kelli A - Profile picture
  • Soul Thai - Profile picture