How to create a registration form for multiple persons

Hi all,

I've been working on a form for our business partners to registrate their clients for our events. Now, we need a lot of info from each person attending the event.

I've already found a perfect way to make them add as many persons as needed. Since the groups can differ from 4 to 80 persons.

I want to make an easy form for our partners to fill out. But the list of info we need for every attendee is to long, as seen below. Now I would like to find a way to make this smaller. Because you wont be able to scroll to the right on the form, you therefore won't see all questions. (see 2nd picture).

Does anyone have a thought about this?

You can have the configurable list widget display in vertical layout. Here's a guide for that: https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive. The solution provided in the guide would also make it mobile responsive.

That looks perfect!

Though somehow it won't work on my form. I pasted the CSS code in the right tab of the element, but somehow it still stays horizontal.

Any ideas?

You did not add the correct CSS codes to your Configurable List widget. Add the following CSS codes to the Configurable List widget:

#list tbody > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody > tr > td{display:block; padding: 6px 0;} #list tbody > tr + tr + tr {border-top: 1px solid #ccc;} #list tbody tr td:first-child {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

And then add this CSS code to your form:

iframe[src*="configurableList"] {width: 100% !important;}

How to Inject Custom CSS Codes

Here is my demo form - https://form.jotform.com/81973526196973 

Feel free to test it and clone it.