Creating a Two-Column FAQ Form with Section Collapse Buttons.

I would like to create a form that acts as an FAQ and has two columns side by side each with multiple section collapse or drop down buttons that have the question and that reveal the answer. I cannot seem to get the section collapse buttons to go side by side and sit next to eachother.

Hi Rick,

Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to check on this. I’ll get back to you as soon as possible.

Thanks for your patience, we appreciate it.

Hi Rick,

Thanks for your patience while I looked into this. The exact layout or functionality you described, an FAQ form with two side-by-side columns each containing collapsible sections, isn’t currently a built-in feature in Jotform. However, using some CSS, it’s possible to customize the layout to get something close to what you’re looking for.

To give you an idea, I created a sample form that demonstrates this approach. You can view it here. If you'd like to see how it's built, feel free to clone it into your account. You’ll be able to explore the field arrangement and the custom CSS applied. Here’s a quick walkthrough of how I arranged the fields:

Shrink Fields: After adding your fields, shrink them to allow fields to appear side-by-side. Let me show you how to do that:

1. In Form Builder, click on the field you want to shrink, then click the gear icon on the side to open the properties panel.

2. Go to the Advanced tab, locate the Shrink option, and toggle it to the On position. That's it. You can repeat these steps for any other fields you need to shrink. Keep in mind that fields will reposition in a zigzag pattern.

Customize Section Collapse Element: Since the Section Collapse element doesn’t have a shrink option, we rely on CSS to style and position it. To target a specific field with CSS, you’ll need its selector or unique field ID. Here’s how to find it:

1. In Form Builder, go to the Publish tab in the top orange navigation bar. Click on Open New Tab to be directed to your live form.

2. Right-click on the Section Collapse element or any field you need to get the selector for, then click on Inspect. This will open your browser’s DevTools and automatically highlight the code for the field you inspected.

3. Right-click on the highlighted code, hover over Copy, and in the submenu that appears, click on Copy Selector.

4. Open a notepad and paste the copied selector or field ID. You’ll use this selector to apply custom CSS.

Inject Custom CSS: Now that you have the selector for the field, you can apply the necessary CSS code to make adjustments. In the demo form I created, you will see how the codes are applied. Let me show you where to view and input your CSS codes.

1. In Form Builder, click on the floating Paint Roller icon in the upper right-hand side to open the Form Designer panel.

2. Go to the Styles tab and scroll down to Inject Custom CSS. There, you can review the CSS codes I’ve added to the demo form.

If coding isn’t your thing, we understand. While we don’t offer custom form creation or design services, you can always work with someone from our Jotform Solutions Partner Directory. You can sort by service type, industry, or location and contact a partner directly. You can get in touch with the right Solutions Partner for you by sorting them by location, type of service, industry, language support, or partner tier.

Just fill out the contact form for the Jotform partner you'd like to work with, so they can make the necessary preparations to help you. Keep in mind, though, that these parties operate independently of Jotform, so we assume no responsibility or liability for their work or their actions. 

Lastly, I’ve submitted a feature request to our developers for an easier, built-in solution for two-column FAQ layouts with collapsible sections. While we can’t guarantee when or if it will be implemented, we will keep you updated through this thread. The timeline for development depends on their workload, the feasibility of the feature, and how many other users request it. If there are any updates, we’ll return to this thread and let you know.

Give it a try and reach out again if you have any other questions.