How to take a number of answers dynamically

  • lvonzeller
    Asked on April 19, 2018 at 3:15 PM

    Users must enter the total number of items they have. Then they must complete several question for each of their items. 

    Example: If a user enters 15 items, they must complete the questions 15 times, one time for each item. 

    Thanks!

  • aubreybourke
    Replied on April 19, 2018 at 4:30 PM

    This is quite difficult to accomplish. I have supplied two completely different approaches.


    1. Thank you page redirect loop

    You could make a landing form that asks how many items. Then it forwards the user to the main form. On submission it forwards the user to the main form again. In this way looping until the items count is reached.

    For example here's a demo I created:

    https://form.jotform.com/81086661037962

    I used the prepopulate app to help me get the right format for the thank you page redirect URL:

    http://prepopulate.jotform.io/

    And I used conditions to subtract the item number by one on each load of the main form.


    2. Vertical configurable list

    Another solution is to use the Configurable list widget. This method requires knowledge of CSS:

    https://widgets.jotform.com/widget/configurable_list

    https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    For example here's another demo I created to show that its possible:

    https://form.jotform.com/81085977537976


  • lvonzy
    Replied on April 20, 2018 at 12:32 PM

    Thank you! How did you get your questions to appear in a vertical list in the configurable list example? 

  • aubreybourke
    Replied on April 20, 2018 at 12:44 PM

    I used CSS.

    This is the code I used:

    td {

      display: table-row;

    }

    th {

      display: none;

    }

    td:before {

      display: block;

      font-weight: bold;

      margin-bottom: 5px;

      margin-top: 10px;

    }

    .col1:before {

      content: 'Question 1';

    }

    .col2:before {

      content: 'Question 2';

    }

    .col3:before {

      content: 'Quesiton 3';

    }

    Instructions here:

    How-to-Inject-CSS-Codes-to-Widgets

    The key to have fields display vertically is using "display:block;" or "display: table-row;"