-
V2MediaAsked on February 13, 2018 at 12:46 PM
I have a form here:
https://www.jotform.com/build/80070551765152
This form allows a user to sign his/her club up by adding each individual's info and submitting the from. The last two thirds of the form is mostly space to add multiple users. There are 30 slots for signup there, but I have just learned that there needs to be 150 slots. Each slot contains basic user info fields and there is a screenshot showing what we collect for each person.
I would like to get rid of the repetitious list of requested info, for a single "add member" button. Clicking this button would add the group of fields needed to sign up a single member. Users could then fill out the requested form fields, and click the button again to add the next user on their list. Rinse and repeat as needed.
How can I do that?
-
Jed_CReplied on February 13, 2018 at 1:30 PM
You can use the "Configurable list widget" and add a group of fields that will ask for user information. User will then just need to click on the "Add" button or by default the "+" sign to add another member.
Please see this guide https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget and see if this is something what you are looking for.
Let us know if you have any questions or if you need further assistance.
-
V2MediaReplied on February 14, 2018 at 4:27 AM
Is there a way to configure the entries vertically? Is there a way to configure a phone number like it appears now in the existing form? (the phone fields are all set to use input masks)
-
AdrianReplied on February 14, 2018 at 8:24 AM
Yes, you can display the Configurable List widget fields to display vertically using Custom CSS.
How to Inject CSS Codes to Widgets
Here is a demo I created for you: https://form.jotform.com/80443052839962
Here is the CSS I added to the widget:
.stepper-wrap input.stepper {
width: 120px;
}
table tr td {
display: table-row;
width: 100%;
}
table tr th {
display: none;
}
table tr td:before {
display: block;
font-weight: bold;
margin-top: 8px;
margin-bottom: 3px;
}
td.col1:before {
content: 'Member Name';
}
td.col2:before {
content: 'NSRA Membership Name';
}
td.col3:before {
content: 'City';
}
td.col4:before {
content: 'Phone Number';
}
Result:
Unfortunately, it is not possible to set an input mask to a field in the Configurable List widget.
Let us know if you have further questions.