Subscribe on YouTube

Use a Repeater field to add a group of fields any number of times. This field allows users to click an Add button to add another group of fields. This field is incredibly useful when you want users to add details about multiple items in a form. This feature is commonly used when adding information for multiple individuals, such as children, in a form.

Standard Field Options

A Repeater field has the following standard options. Click Advanced in the field's options to show the rest of them.

• Field Description
• Field Key
• CSS Layout Classes
• Label Position
• Visibility
• Conditional logic

A Repeater's Label Position offers Default, Top, None, Hidden (but leave the space), and Center. To place labels to the left, right, or inline, set the Label Position on the fields inside the Repeater.

Field-specific options

Collapsible

To make your section or repeater slide open or closed, check the Collapsible box in the field options. This box is unchecked by default. A collapsible Repeater loads closed. Users click its heading to open it.

Learn more about collapsible sections.

Repeat layout

With the Repeater, choose the layout for the fields in that section. To set the layout, select an option in the Repeat Layout dropdown in the field options. The default option is "Default: No automatic formatting".

The Inline format displays all the fields in the Repeater on one row. The Grid format displays all the fields in the Repeater on one row with the field names only on the top of the first row.

Repeat buttons

By default, the repeat buttons show a (+)(-) symbol and the Add and Remove text. Change the text, or show only the (+)(-) symbols or only the text on the Add and Remove buttons.

1. Click the (+)Add (-)Remove button inside the Repeater.
2. In the Repeat Links dropdown, choose Icons, Text links, or Text links with icons. Text links with icons is the default.
3. For a text option, set your Add New Label and Remove Label text below the dropdown.

The label boxes are hidden while Icons is saved. If you switch from Icons back to a text option, click Update and reload the form builder to see them.

Minimum repeater rows

In the Repeater's Advanced section, set the number of rows a Repeater shows when the form first loads in the Min Repeater Rows box. It's empty by default, so only 1 row appears. To show more rows, enter a value of at least 2.

Maximum repeater rows

In the Repeater's Advanced section, set the maximum number of rows a user can add in a Repeater field in the Max Repeater Rows box. It's empty by default, so users can submit as many rows as they want. To set a limit, enter a value of at least 2.

Set up a Repeater Field

1. In the form builder's Add Fields panel on the left, click Repeater under Advanced Fields to add a Repeater field.
   

   

2. Drag and drop the fields that you want into the Repeater.
   

   

3. Click Update to save your changes.
4. Now you can customize the layout of the repeat rows or change the repeat buttons.

Set up Repeater action

Subscribe on YouTube

By default, every form action is triggered based on the events of the main entry, such as entry creation, saving, updating, and deletion. With the repeater action, you can trigger specific actions based on the entries in the repeater. Below is a list of supported form actions.

This guide will walk you through using the Repeater actions with the Send Email action as an example.

1. Begin by creating the required repeater fields in your form.
   

   

2. Go to Settings → Actions & Notifications and open the Send Email action, or click the Send Email tile to add one. In the Run this action for dropdown, select your Repeater field.
   

   

3. Add the necessary data for the email message, considering the repeater entries. In the To box, insert the Email field from inside the Repeater. In the message, use the shortcodes of the fields inside the Repeater. Click Update to save your changes. In this example, the custom email will only be sent out if a value is submitted to the selected repeater.
   

   

4. Submit some new entries for the repeater.
   

   

5. Once you have submitted the entry, you can check your email inbox to see the entry results of the Send Email action. It will vary depending on which repeater you have triggered it to run.
   

   

Repeater field styling

Change the icons and icon color of the Add and Remove buttons in your form's style. The Repeater Fields section is in the style's advanced settings.

1. Go to Formidable → Styles. The style editor opens on Quick Settings.
   

   

   At the bottom of Quick Settings, click Show advanced settings.
   

   

2. Open the Repeater Fields section. Choose an Icon Color. Under Icons, pick the plus and minus pair you want.
   

   

3. Click Update to save your changes.

Repeater button color

To customize the Add/Remove button colors, go to Formidable → Global Settings → Custom CSS page or your form's style custom CSS area and add the following CSS. Then click Update. You may adjust the background-color and border-color as needed.

.frm_repeat_sec .frm_button {
    background-color: #5bcd5d !important;
    border-color: #5acc5c !important;
}

Repeater button order

To customize the order of the repeater buttons, go to Formidable → Global Settings → Custom CSS page or your form's style custom CSS area and add the following CSS. Then click Update.

.frm_repeat_buttons {
  direction: rtl;
}

This shows the Remove button before the Add button.

Add columns in a repeater field

Since section headings can't be used inside a repeater, you can create a two-column layout by following the steps below:

1. 1. If you want to create a title similar to a Section Heading field, you can add two HTML fields for each column inside a repeater.

      <h3>Section Title</h3>

   2. In the CSS layout classes box, insert frm_first frm_half for the first HTML field and frm_half for the second HTML field.
   3. Add the other fields that you want in the first column below the HTML field. Set the CSS layout class to frm_first frm_half.
   4. Add the fields that you want in the second column below the HTML field. Set the CSS layout class to frm_half.
      

      

Note: This can also be done without the HTML field, if you don't want a heading title.

Get the total of the values from Repeater fields

To get a total of the values in a field in a Repeater, you can:

1. Create a field outside of the Repeater to hold the total.
2. In the field's options, open the Advanced section. Under Default Value, toggle on Calculate Value and select the Math option.
3. In the Field Formula box, insert the [id] or [key] of the field inside the Repeater that you want to total.
4. Click Update to save your changes.

The values in the field in the Repeater will be added together automatically. If the values in the Repeater are words instead of numbers, you can select the Text option, too. The total field will contain a comma-separated list of the values in the field in the Repeater.

Calculate the number of rows in a repeater

To calculate the number of rows in a repeater, follow the steps below:

1. 1. Inside the repeater, add a hidden field to hold the row number.
      

      

      
      In the field's Advanced section, set the Default Value to 1.
      

      

   2. Outside the repeater, add a text or number field to hold the total number of rows. In its Advanced section, under Default Value, toggle on Calculate Value and select the Math option. Then insert the Hidden field ID in the Field Formula box.
   3. Click Update to save your changes.

The values in the hidden field in the Repeater will be added together automatically to calculate the number of rows.

Displaying Repeater Fields

Display the value submitted in a Repeater field by inserting the shortcodes into a View or email.

• Display submitted options. In emails and Views, you'll see values from Repeater fields grouped by field.

  Name: John Smith, Julie Roberts, Rob Darlington
  Meal: Pepperoni pizza, Fettucine alfredo, Pepperoni pizza
  Drink: Dr. Pepper, Water, Coca-Cola

  When you use the field shortcodes like this:

  [101 show="field_label"]: [101] 
  [102 show="field_label"]: [102]
  [103 show="field_label"]: [103]

  Replace 101, 102, and 103 with the field IDs inside the Repeater.

• Separator. Apply a separator between iterations.

  Dr. Pepper, Water, Coca-Cola

  When you use the foreach shortcode like this:

  [foreach 100 sep=", "][103][/foreach 100]

  Replace 100 with the field ID of your Repeater field. Replace 103 with the field ID inside the Repeater.

Alternatively, you may create a View from a Repeater field. A View from a Repeater provides ordering and filtering options that the [foreach] shortcode, in a View from the main form, does not. A View from a Repeater can be standalone or nested inside a View from the main form.

Display data grouped by row

To display the data from a Repeater field grouped by row, like this:

John Smith: Pepperoni pizza, Dr. Pepper
Julie Roberts: Fettucine alfredo, Water
Rob Darlington: Pepperoni pizza, Coca Cola

you can use the foreach shortcode like this:

[foreach 100]
[101]: [102], [103]
[/foreach 100]

Replace 100 with the field ID of your Repeater field. Replace 101, 102, and 103 with the field IDs that are inside of the Repeater.

Display data in a table

You can also use the foreach shortcode to display the repeater fields in a table:

Use the code below to create a table with the foreach shortcode:

<table>
<tr>
<th>[101 show="field_label"]</th>
<th>[102 show="field_label"]</th>
<th>[103 show="field_label"]</th>
</tr>
[foreach 100]
<tr>
<td>[101]</td>
<td>[102]</td>
<td>[103]</td>
</tr>
[/foreach 100]
</table>

Replace 100 with the field ID of the Repeater field. Replace 101, 102, and 103 with the field IDs that are inside of the Repeater.

Display data in reverse order

To display the data from a Repeater field in reverse order, you can use the parameter order="desc". It goes through the Repeater rows starting from the last row added and ending with the first one.

[foreach 5651 order="desc"]
[5653]
[/foreach 5651]

Replace 5651 with the ID of your Repeater field. Replace 5653 with the field IDs that are inside the Repeater.

Create a View from a Repeater Field

To learn how to create a View directly from your Repeater field, click here.

Change delete confirmation message

When deleting a repeater row, a confirmation message is displayed to avoid cases where form data is accidentally deleted. To change the message, go to Formidable → Global Settings → Message Defaults and look for the Repeater row delete confirmation field.

Limitation

Repeaters are not intended to contain a page break, section field, or another repeater. They can also not be placed inside section fields.

Related customizations

Review before submit

Note: Custom code is no longer needed. Please use a Summary field to review before submit.

Other field types are much simpler to display in an HTML field on the last page of your form. But repeater fields need a bit of extra code. Use [frm-repeat-post section_id=25 field_ids='26,27'] in the HTML field at the end of your form. Replace 25 with the ID of your repeater field, and 26,27 with the fields inside of it. Each row shows on its own line, with a dash between the values.

add_shortcode( 'frm-repeat-post', 'frm_repeat_post' );
function frm_repeat_post( $atts ) {
	$content   = '';
	$field_ids = explode( ',', $atts['field_ids'] );
	if ( ! isset( $_POST['item_meta'][ $atts['section_id'] ] ) ) {
		return $content;
	}

	foreach ( (array) $_POST['item_meta'][ $atts['section_id'] ] as $key => $row ) {
		if ( $key === 'form' || $key === 'row_ids' ) {
			continue;
		}
		$values = array();
		foreach ( (array) $field_ids as $field_id ) {
			if ( ! isset( $row[ $field_id ] ) ) {
				continue;
			}
			$value    = is_array( $row[ $field_id ] ) ? implode( ', ', $row[ $field_id ] ) : $row[ $field_id ];
			$values[] = sanitize_text_field( $value );
		}
		$content .= esc_html( implode( ' - ', $values ) ) . '<br/>';
	}
	return $content;
}

Copy a calculated value from a repeater

If you need to copy a calculated value from one repeater to another repeater, you can start with this Javascript example.

Related developer hooks

• Create entry in form with repeaters using the frm_after_create_entry hook.
• Prevent entries from repeaters from being deleted when the parent entry is deleted with the frm_before_destroy_entry hook.
• Show ten rows in your repeater by default with the frm_repeat_start_rows hook.
• Automatically populate multiple rows in a repeater with the frm_setup_new_field_vars hook.
• Validate field in a repeater with the frm_validate_field_entry hook.
• Set a custom value in a repeater with the frm_validate_field_entry hook.
• Use the frm_before_action_settings action hook that fires before any form action settings.
• Allow custom actions to be triggered and skip the default trigger with the frm_custom_trigger_action hook.
• Allow adding or removing repeater actions support for form action type with the frm_pro_repeater_action_support hook.
• Change the number of repeated entries displayed in the admin Entries limit with the frm_pro_repeated_entries_display_limit filter.