How to move the field under the other field to reduce space?

I am trying to adjust my form so that certain fields automatically move up in line with other fields when space allows. Specifically, I want to position one field directly underneath another field instead of leaving unnecessary gaps.

I’ve attempted to use the "Shrink" setting and custom CSS, but it’s not working as expected. Below, I’ve attached an example of how I’d like the fields to align.

Could you please advise on the best way to achieve this layout? If custom CSS is required, could you provide the correct code to accomplish this?

Hi Benjamin,

Thanks for reaching out to Jotform Support. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience and understanding, we appreciate it.

Hi Benjamin,

To fix the field spacing, I added a section collapse element that is hidden, and made all the fields in it unshrink with two input fields. However, it depends on what the need and can be changed. In the builder mode, it looks like this:

Then, in the Preview mode:

Now, let me show you how to add Section Collapse in your form:

1. In Form Builder, click on the +Add Element button at the upper left side of the panel.
2. Under the Basic tab, scroll down, select the Section Collapse element and add it to your form.
3. Click on the Gear icon and hover your mouse to the Field Properties window on the right side of the panel.
4. Then, set the Section Visibility as Visible and the Button Visibility as Hidden.

Once done, you can now Inject the CSS Code to your form's styles tab. Let me show you how:

1. First, copy this code.

/* Setting the Section Collapse to be 2x2 grid */

.page-section ul.form-section:not(.page-section) {

 display: grid;

 grid-template-rows: 1fr 1fr;  

 grid-template-columns: repeat(2, 50%);

}



/* Setting first element (image) to be 2 rows 1 column */

.form-section:not(.page-section) li:nth-child(2) {

 grid-column: 1 / 2;

 grid-row: 1 / 3;

}



/* Setting 2nd & 3rd element to 1 row 1 column each */

.form-section:not(.page-section) li:nth-child(3) {

 grid-column: 2 / 3;

 grid-row: 1 / 2;

}

.form-section:not(.page-section) li:nth-child(4) {

 grid-column: 2 / 3;

 grid-row: 2 / 3;

}



/* Setting the image to be 100% the width of the column */

.form-section:not(.page-section) li:nth-child(2) img{

  width: 100%;

  height: auto;

}



/* Setting the input fields to match the column */

.form-section:not(.page-section) li:nth-child(3) .form-input-wide input,

.form-section:not(.page-section) li:nth-child(4) .form-input-wide input{

  width: 100% !important;

}

2. In Form Builder, click on the Paint Roller icon on the upper right side of the panel to open the Form Designer Menu.

3. Go to the Styles tab and add the CSS Code to the Inject Custom CSS input box. Give it a try and let us know how it goes.