Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Repeater

Last Updated: November 16, 2021

Knowledge Base → Forms → Form Building → Field Types → Repeater
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 if you would like 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.
Repeater field front-end

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Standard Field Options

A Repeater field has the following standard options:
Repeater field OptionRepeater field Option

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

Field-specific options


— Premium Feature —

Repeat Layout

With the Repeater, you can choose the layout you would like for the fields within that section. To set the layout, go into the Field Options setting and select the Repeat Layout that you would like.
Section Heading Options
The Inline format will display all the fields in the Repeater on one row. The Grid format will display 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 will show a (+)(-) symbol as well as the Add/Remove text. The text can be changed to whatever you would like, or you can remove the text altogether and only have the (+)(-) symbols. Alternatively, the (+)(-) symbols can be removed so you only see text on the Add/Remove buttons.

  1. Click on the (+)Add (-)Remove button inside the Repeater.
    Repeater Icons
  2. Set your Add New Label and Remove Label text.
    Repeater Icon Labels
  3. Choose if you would like to have Icons, Text links, or Text links with icons for the Repeat Links option.
    Repeater Repeat Links

Repeat Limit

With the Repeat limit, you can set the maximum number of rows a user can add in a Repeater field. If no value is set, it will allow users to submit as many rows as they want. It needs to have a value of at least 2 to trigger this function.
Repeatable Section Repeat Limit

Set up a Repeater Field

  1. Add a Repeater field by clicking on Repeater in the Fields Panel (in the right sidebar).
    Add a Repeater field

  2. Drag and drop the field(s) that you would like into the Repeater.
    Repeater Drag and Drop
  3. Now you can customize the layout of the repeat rows or change the repeat buttons.

Repeater styling

To customize the default styling for Repeater fields, go to Formidable → Styles → Repeater Fields. Select the icons and icon color that you would like to use for your add/remove buttons.
Repeater Styling

Repeater button color

To customize the Add/Remove button colors, go to Formidable → Styles → Custom CSS page and add the following CSS. 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 → Styles → Custom CSS page and add the following CSS.

.frm_repeat_buttons.frm {
  direction: rtl;
}

Add columns in a repeater

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

  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.
    Repeater Column Layout
  5. Note: This can also be done without the HTML field, if you don't want a heading title.

Get the total of the values of a Repeater field

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 Dynamic default value box, check the Calculations checkbox
  3. in the Calculations box, put the [id] or [key] of the field inside the Repeater that you want to total

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 check the text calculations checkbox, 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. Inside the repeater, add a hidden field to hold the row number.
    Repeater Calculate Number of Rows
    In the Default value box, set the default value to 1.
    Repeater Calculate Number of Rows Hidden Field
  2. Outside the repeater, add a text or number field to hold the total number of rows. In the Default value (Calculations) box, insert the Hidden field ID.
    Repeater Calculate Number of Rows Total Field

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

Displaying Repeater Fields

In emails and Views, you'll see values from Repeater fields grouped by field, rather than by row:

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

You may use the [foreach] shortcode in a View or an email to group values from a Repeater by row. 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 could be standalone or could be nested inside of a View from the main form.

Display data grouped by row

If you would like 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]

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:

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

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

<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</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.

Create a View from a Repeater Field

If you would like to learn how to create a View directly from your Repeater field, click here.

Limitation

Repeaters are not designed to allow form actions to trigger by row.

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.

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 $row ) {
		if ( $key === 'form' || $key === 'row_ids' ) {
			continue;
		}
		foreach ( (array) $field_ids as $field_id ) {
			if ( is_array( $row[ $field_id ] ) ) {
				$content .= ' ' . sanitize_text_field( implode( ', ', $row[ $field_id ] ) ) . '
';
			} else {
				$content .= $row[ $field_id ];
			}
		}
		$content .= '<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.

Related Articles

  • How to Update Repeater Fields in ACF How to Update Repeater Fields in ACF [The Easy Way!]
    Read More
    How to show business hours on WordPress site How to Show Business Hours on Your WordPress Website
    Read More
    The Best Gravity Forms Repeater Alternative The Gravity Forms Repeater Alternative - That Works!
    Read More
  • How to create a dynamic form in WordPress How to Create a Dynamic Form in WordPress
    Read More
    How to Create a Repeater Field in WordPress How to Create a Repeater Field in WordPress [3 Easy Steps!]
    Read More

Related Videos

  • How to Build a Repeater Field
  • Standard Field Options
  • Field-specific options
    • Repeat Layout
    • Repeat Buttons
    • Repeat Limit
  • Set up a Repeater Field
  • Repeater styling
    • Repeater button color
    • Repeater button order
    • Add columns in a repeater
  • Get the total of the values of a Repeater field
  • Calculate the number of rows in a repeater
  • Displaying Repeater Fields
    • Display data grouped by row
    • Display data in a table
  • Create a View from a Repeater Field
  • Limitation
  • Related customizations
    • Review before submit
    • Copy a calculated value from a repeater
  • Related developer hooks
  • Related Articles
  • Related Videos
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews