What is a repeated section?
The section element is a container, in which you can place elements. Each field dragged into the section can be filled in only once - it is a single use element. For example: if you have a section containing the following fields: friend name, friend age, friend gender - you will only be able to enter one friend - one name, one age and one gender.
The repeated section is when your container turns into a multiple-use object, one the form filler can repeat and fill in a few times. For example, if you have a repeatable section containing the following fields: friend name, friend age, friend gender it will allow your form filler to enter one friend's details, press on an "Add" button and then enter another friend.
Following are steps to create a repeatable section:
1- | Enter your form in the form builder. |
2- | Drag a section element. Resize it according to your needs. |
3- | Drag the elements into the section (In the example: Name, Age and Gender). |
4- | Go to "Properties" panel" > Element > Settings > Basic > Turn on the "Repeated" option. Notice that 2 buttons will be added at the bottom of the section: Add and Remove. These buttons will allow the form filler to fill in the section multiple times. |
5- |
Once you publish your form you will be able to enter data, press on "Add" to add more item lines and "Remove" to delete an item line. |
6. |
If you wish to limit the number of items the form filler can add in the repeated section you can easily do so by specifying the max item number in the section properties. Simply select the section in the form builder go to the "Properties panel" > "Element" > "Settings" > "Basic" and fill in the number inside the "Max items" field, for example:3. - Save the form and check in publish. You will only be able to fill in 3 item lines. |
7. |
Another thing you can change in the section settings is the number of visible items set in the form. the section, by default, shows only one visible item line, and if the filler presses on "add" - another item then opens and a scroll is added. However, if you wish for your section element to display 2 open item lines at a time, you can easily configure that in the section properties: - Go to the "Properties panel" > "Element" > "Settings" > "Basic" - Set the default number in the "Num of visible items" field. You will then see how the container border grows in height, taking up the new space of the now enlarged section. - If you publish this form at this stage you will see that the section is indeed taking up more space now, however, the first item line is the only one visible by default and the other lines will only appear when "Add" is pressed. - If you wish to have both item lines visible by default you can turn on the "Populate items" checkbox" and check your form - you will see both item lines open by default. * Please notice that when you add visible items to the section it will grow vertically, so you will need to make room for the visible items: Make sure the form is long enough. for example, if your section height is 200px and you set 2 visible items, this means that your section will now take up 400px of vertical space. If your form is not long enough please add height. Also, when the section grows in height it may cover elements that were below the original 200px section height. Make sure you move them after 400px so they are not caught inside the section area. |
8- |
So as you can see - the Section, by default, has a fixed height (based on the number of visible items in it), but you can make the height flexible by turning on the "Auto Sizing" Checkbox. Each time the filler then presses on the "Add" button will add another repeated line to the Section - making its height grow, moving up the elements that follow and even making the form height grow if needed. Same goes for when the filler presses on 'Remove' button to delete a repeated line. Then the Section will become smaller in height accordingly. |
9- | Another thing you can add to your repeated lines is Numbering. Sometimes when many items are added its may get confusing, so giving each line a number can help the filler keep track. Pressing on the "Show item number" checkbox will add a small number in the top left corner of each item line. |
10- |
The "Add" and "Remove" buttons are an integral part of the repeated section, but you can hide one of them if you want to (there is no sense in hiding both-though this can be done). If you wish to hide the "Add" button, for example, simply delete the text in the "Add button text" field and the button will disappear from canvas and the published form. Same goes for the "Remove" button. |
11- |
Another thing you can do in regard to the section buttons is make the 'Remove' button appear only in the last line the filler opens in the repeated section. That can be achieved by merely turning on the 'Show remove for last' checkbox. |