2 vs 5 columns in 1 form (separate pages)

Hi there,

Is there a way to have 1 form display 2 columns on a page and 5 on another?

Thanks!

Cynthia

Hi Cynthia,

I'll do my best to support you until one of our support agents replies.

You can indeed have different numbers of columns on separate pages within the same form in Jotform. Here’s how to do it:

1. Use the Page Break element to divide your form into multiple pages.

2. On each page, you can set up the number of columns by shrinking the fields and enabling form columns:

• Select the fields you want to display in columns and use the Shrink option to make them fit side by side.
• For three or more columns, select multiple fields, right-click and choose Shrink, then go to the Form Designer > Advanced Designer > Form Layout and enable form columns. Enter the desired number of columns for that page.

3. To have 2 columns on one page and 5 columns on another, simply adjust the number of columns and field shrinking on each page separately.

4. If you want to control how many fields appear in a row, you can use the Move to a new line option in the field's Advanced properties to start a new row.

This way, you can customize each page's layout independently within the same form.

Give it a try and let us know how it goes.

Best regards,

Jotform Support

Thanks! If I accidentally made a mistake in builder and it autosaved is there a way to go back to what it was?

Hi Cynthia,

I'll do my best to support you until one of our support agents replies.

Regarding your question about going back to a previous version after an autosave in the Form Builder, Jotform provides a Revision History feature that allows you to view and manage changes made to your form. Here’s how you can use it:

1. Open your form in Form Builder.
2. Click on the text under the form title at the top of the builder. This will open the Revision History pane on the right side.
3. Browse through the list of revisions to find the version you want to restore.
4. Select the desired revision and click on Revert. This will restore your form to that previous state.

This way, you can undo any accidental changes that were autosaved and get back to an earlier version of your form.

Give it a try and let us know how it goes.

Best regards,
Jotform Support

Thanks, that did it!

Hi Cynthia,

I'll do my best to support you until one of our support agents replies.

I'm glad to hear that the Revision History feature helped you restore your form to the desired version. If you have any more questions or need further assistance with your form layout or any other Jotform features, feel free to ask.

Let us know if you have any other questions.

Hi there,

I can't get the final page to have 2 columns on the actual form that people fill out - even though it shows as 2 columns in the builder. I've tried heading into advanced settings CSS to adjust the width and it shows 2 columns in both builders but not the live form here - can you please help?

Thank you!

Cynthia

Hi Cynthia,

I'll do my best to support you until one of our support agents replies.

Regarding the issue where the final page shows 2 columns in the builder but not in the live form, this is often related to how the form fields are set up and the form's responsive behavior. Here are some key points and steps to help you fix this:

• Shrink the fields: Make sure the fields on the final page are shrunk so they can fit side by side. You can do this by selecting each field, opening its properties, going to Advanced, and enabling the Shrink option.
• Enable form columns: In the Form Designer, under Advanced Designer > Form Layout, ensure that "Enable form columns" is turned on and set to 2 columns for that page.
• Check form width: The form's width must be wide enough to accommodate two columns. If the form is too narrow, the fields will stack vertically in the live form even if they appear side by side in the builder.
• Field width and label position: Fields with left-aligned labels take more horizontal space. Consider changing the label alignment to top to save space.
• Use "Move to a new line" option: If you want to control exactly how fields break into rows, enable the "Move to a new line" option in the field's Advanced properties.
• Avoid conflicting custom CSS: Custom CSS might override the builder settings. Try removing or adjusting any custom CSS that affects field widths or layout.

These steps should help ensure the live form displays two columns on the final page as intended. Give these a try and let us know how it goes.

Best regards,
Jotform Support

Hi Cynthia,

Thanks for reaching out to Jotform Support. I'll need a bit of time to look into your form, and I'll be back as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Cynthia,

To clarify, all fields in the last page should be in two columns, right? Let me walk you through how to fix this:

1. First, you will need to shrink the long text elements in the last page, that aren't shrinked yet.

a. In Form Builder, in the last page, select all the long text element's that are still displayed in one column.

b. Then, right click on your mouse and select the Shrink option.

2. After that, you will have to go through each of the long text elements that you shrinked, and make sure the fixed width is enabled, with a specified width size.

a. In Form Builder, select the long text element and click on the Wand icon.

b. In the right panel, go to the Options tab.

c. Now, toggle on the Width, and specify a size.

3. Finally, we'll need to add a Custom CSS code.

a. First, copy this code:

.page-section:nth-child(3) .form-line-column {
width: calc(100% / 2 * 1 - 8px) !important;
}
.page-section:nth-child(3) .form-label {
text-wrap: auto;
}

b. In the Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

c. Now, in the Form Designer menu, click on the Styles tab.

d. Then, in the Inject CSS Code box, remove all existing codes, and paste the code I shared. That's it. The code is automatically saved. 

Give it a try and let us know how it goes.

Hi there, I followed your instructions exactly and it didn't work - can you please review and check out? Thanks for your feedback to help fix!

https://form.jotform.com/251175973130051

Also, not sure if this is helpful but when I click preview it only shows that last page (still not formatted properly) and then when I go to the live link it shows all pages of the form.

Thanks again!

Cyn

Hi Cyn,

I checked your form, and it seems to be working correctly:

Was this issue already resolved?

Let us know if you have any other questions.

Hi! So sorry - it has not been resolved.

The first two fields of each section should be 1 column and the last 2 fields should be 2 columns. can you please help? Also, this question label needs to wrap text.

Hi Cynthia,

Your screenshot made it more clearer. Allow me some time to work on this, and I'll be back with an update.

Thanks for your patience and understanding, we appreciate it.

Hi Cynthia,

You can paste the code below into your form:

/* third page - 2 columns */

.page-section:nth-child(3) .form-col-1, .page-section:nth-child(3) .form-col-2 {

    width: calc(50% - 8px) !important;

}

/* end */





/* text wrap form label */

.form-label {

    white-space: normal !important;

}

/* end */

Check out my result:

Give it a try and let us know if you need any more help.

That worked great!

Final question on this form, page 3 - how do I get all of the submitted text in the 2-column fields to show in the PDF that people can download after submitting? For instance, the final words get cut off here in this test submission:

Hi Cynthia,

To avoid confusion, I've moved your other question to a new thread and will be helping you out here.

Let us know if you have any other questions.