How to create a registration form for multiple persons

  • Profile Image
    Asked on July 17, 2018 at 03:40 AM

    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?


  • Profile Image
    Answered on July 17, 2018 at 04:21 AM

    You can have the configurable list widget display in vertical layout. Here's a guide for that: The solution provided in the guide would also make it mobile responsive.

  • Profile Image
    Answered on July 17, 2018 at 05:40 AM

    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?

  • Profile Image
    Answered on July 17, 2018 at 09:04 AM

    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 - 

    Feel free to test it and clone it