Document – Contact Form 7 Repeater Fields

This feature allows users to dynamically add multiple sets of fields to the form, making it ideal for capturing information that may vary in quantity, such as multiple items, services, or participants.

These repeating fields can include various input types, such as text fields, checkboxes, radio buttons, or dropdown menus. Users can dynamically add or remove sets of these fields as needed, allowing for a flexible and customizable form experience.

Table of contents:

Installation – top

  1. Upload the add-to-any directory to the /wp-content/plugins/ directory.

Settings repeater field – top

1. How To Add Repeater Fields?

New contact form -> Click button “Repeater”

or use format:

[repeater repeater-name ] text and input repeater [/repeater]

<label> Your name
    [text* your-name autocomplete:name] </label>

[repeater repeater-329 title:'Email' button:'Add more...' max:5 initial_rows:1] 
<label> Email
     [email email-198]</label>
[/repeater]

[submit "Submit"]

And choose settings

2. How To Set a Maximum Limit?

You can also set the maximum repeat limit which allows how many times the repeatable field can be added in the frontend.

By typing the number in the Max box

E.g: If you want to repeat your email field 2 times.

[repeater repeater-821 max:2] <label> Your email 
    [email* your-email autocomplete:email] </label>
[/repeater]

And the result looks like this:

3. How To Set Initial Row?

It means the number of rows at start. By typing the number in the Initial Row box.

E.g: You want to show 2 repeating fields at first.

[repeater repeater-329 title:'Email' button:'Add more...' max:5 initial_rows:2] 
<label> Email
     [email email-198]</label>
[/repeater]

And the result looks like this:

4. How To Use Map Field?

It helps automatically create the number of repeating fields based on user selection.

By tying the name field in the Map box, you can generate auto-repeater fields.

<label> How many tickets do you have?
    [radio radio-528 use_label_element default:1 "1" "2" "3" "4" "5"] </label>

[repeater repeater-215 title:'Person' button:'Add more...' max:10 initial_rows:1 initial_rows_map:'radio-528'] 
<label> Email
     [email email-198]</label>

<label> Full name
     [text text-845]</label>
[/repeater]

[submit "Submit"]

You can see the results:


Email data – top

User name ( E.g: [repeater-56] )

Important: Check “Use HTML content type”


That’s it! We hope this article helped you learn how to add Repeater with Contact form 7.