Repeatable Elements with eForm

Starting eForm version 3.5 a new element was introduced, the repeatable element.

As the name suggests, it can be used to allow your users to add rows of predefined elements on your form. You can check out a demo here and download the from from this link.

Add a repeatable Element

Repeatable Element can be found under Other Form Elements (O) under the form builder. Open it and scroll down to the bottom. There you will see the newly created repeatable element.

Drag the element on to your form and you are ready to go.

Interface Options

Under the settings window of the element, you will see INTERFACE.

 

  • Icons on Elements: Disable to hide icons from all repeatable element group items.
  • Hide Label: Enable to hide labels from all group items.
  • Button Text: Used to populate the add button.
  • Sortable: If enabled, then user will be able to sort the repeated rows.
  • Deletable/Addable: Enable this to actually make the element repeatable. If you want a fixed set of elements without the capability of deleting, then disable this.

Validation Option:

Under the same settings window, you will see VALIDATION. Here you can set

  • Initial number of elements.
  • Minimum number of elements.
  • Maximum number of elements.

The delete button stops functioning when the element reaches minimum number and the add new button stops functioning when maximum is reached. You should make sure Initial number of elements is greater than or equals to minimum number of elements and lesser then or equals to maximum number of elements.

Adding Groups inside repeatable

Repeatable elements work by duplicating your predefined group. Every group can contain any number of the following elements:

  • Radio Element.
  • Checkbox Element.
  • Dropdown (select) Element with Multi select.
  • Textinput with a number of validation.
  • Textarea.
  • Password.
  • Date, Time & DateTime Pickers.

Configuring groups

Open the settings of the repeatable element. You will see the settings window.

Now navigate to “OPTIONS” section of the window and you will see ITEM GROUP LIST.

Click on ADD NEW ELEMENT and new item in your group will be created. Following configuration options are available.

  • Title: Form element title.
  • Type: Form element type.
  • Size: Column size of the element.
  • Req: Whether the element is compulsory (required) or not. This is the primary validation rule.
  • Options: Here you will enter choices for MCQs and placeholders for text inputs. We will discuss about it more.
  • Filter: Other validation filters specific for some of the types. We will see more about this.
  • Clear: Whether to clear columns before this element. Useful when building layouts and the height of the elements does not match. For example, if you wish to create a 4 column layout, then after every 4th element, i.e, on 5th element, 9th element etc, you would want to enable this.

Different Types of repeatable element

With eForm version 3.6.5 (at the time of writing) there are a total of 16 types of repeatable elements. Since many of them have very similar Options and Filters, we will discuss them together.

Element Type Options Filters
Radio You enter every option per line. You can also have mathematical value assigned to an option. Scoring isn’t possible.
Option List with Numerics

Option 1[num=10]
Option 2[num=20]

Simple Options List

Choice 1
Choice 2
N/A
Checkbox You can specify maximum and minimum number of checkboxes required.

minCheckbox="1" maxCheckbox="2"
Dropdown You enter every option per line. You can also have mathematical value assigned to an option. Scoring isn’t possible.
Option List with Numerics

Option 1[num=10]
Option 2[num=20]

Simple Options List

Choice 1
Choice 2

To enter an empty/placeholder option, add to the first of the list and have [empty] added to the end of it.
Options List with placeholder

Please select[empty]
Option 1[num=10]
Option 2[num=20]
N/A
Multiple Dropdown
Textinput Here you will enter the placeholder text of the element. You can have minimum and maximum string length through filters.

minSize="1" maxSize="10"
Password
Textarea
Phone Number
Anchor Link (URL)
Email Address
Person’s Name
Only Numbers Here you will enter the placeholder text of the element. You can limit the maximum and minimum numbers the element will take.

min="10" max="100"
Only Integers
Date Picker Here you will add the placeholder text of the element. You can add future or past filters. Could be yy-mm-dd formatted date string or NOW for current date.

future="1800-01-01" past="NOW"

This field does not really supports advanced filtering like the actual datepicker.

Time Picker N/A
Date Time Picker

Now you know how to configure repeatable elements properly. Start using it and let us know if you have any troubles.

Swashata has written 223 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>