Repeater Field

In this article, we will try to explain how to setup Contact Form 7 Repeatable Fields with the help of our Pro Addon “Contact Form 7 Repeater Field”.

What is Repeater Field?

A repeatable field in a contact form is a type of input field that users can duplicate or replicate as many times as necessary when filling out the form. This feature can be especially useful in forms where users might need to enter a varying amount of information.

For example, a repeatable field could be used for a form where users are registering multiple attendees for an event. Instead of having a set number of fields for attendee names, there could be a repeatable field that the user can add or remove as needed.

In this tutorial, we will try to show how to create such fields on Contact Form 7.

What’s needed

contact form 7 repeatable fields - Themefic

CF7 Repeater – Live Example

In this tutorial, we will create a CF7 repeater form similar to the example below. You can easily create your own form by following these steps.

repeater - Themefic

Check our main demo for a complete example of the Contact Form 7 Repeater field.

Creating Contact Form 7 Repeatable Fields

Go to Contact -> Add New in your WordPress Dashboard to create a new form. You should see a button called Ultimate Repeater.

Insert Repeater Wrapper

To create a repeater field, you first need to wrap the fields with a repeater tag called [uarepeater]. You can find this option when you click the Ultimate Repeater button. Note: Wrap only the fields that you want to repeat. Here is an example code:

[uarepeater uarepeater-35 add "Add more" remove "Remove"] 
--fields-- 
[/uarepeater]

Screenshot at Apr 13 12 14 29 e1727128814835 - Themefic

In this code, “Add more” and “Remove” are the texts for the add and remove buttons. You can rename them as needed.

Insert Repeater Title

If you want to add a title to a repeater group, use the class uacf7-repeater-title. Here is an example code:

<h4 class="uacf7-repeater-title">Member</h4>

This class will repeat the heading for each instance of the repeater.

Screenshot at Apr 13 12 15 11 - Themefic

That’s it for the form Settings. Now, save your form.

Settings Max Limit

If you want, you can set a maximum limit of a repeatable group. For instance, if you specify “10”, a user can repeat that specific group up to 10 times on the form. To do this, scroll down to the Repeater Field tab under “Ultimate Addons for CF7 Options.” Click the “+” icon under “Repeater Field Option” . Then, choose your field group and set the maximum limit.

contact form 7 repeatable fields

Mail tab setup

To ensure the repeater fields display correctly in your email, do the following in the Mail tab setup:

  • Use the name of the repeater tag to display fields in the email template. For example: [uarepeater-35].
  • To display the title of the repeater group in the email template, use: [uarepeater-35:title] [name-of-tag:title].

repeater mail - Themefic

Once you’ve set up the form and the mail settings, copy the form’s shortcode.

Time to Publish

Paste the shortcode wherever you want to display your form (Pages, Posts, Custom Post Types, or Sidebars). The result should look similar to the example form.

Watch Complete Video

If you’re still unsure, we recommend watching our video tutorial, which walks through the entire process of setting up a Contact Form 7 repeater.

Full Form Code

Here is a sample code of our above form:

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

[uarepeater uarepeater-35 add "Add another set +"]
<div><h4 class="uacf7-repeater-title">Repeater Set</h4>

<label> Choose an Option </label>
    [radio radio-33 use_label_element default:1 "Option A" "Option B"]
<label> Do you want to join the meeting? </label>
    [select menu-296 "Yes" "No"]

[/uarepeater]
</div>

<label> Your email </label>
    [email* your-email]

[submit "Submit"]

Here is the Mail tab code:

From: [your-name] <[your-email]>

[uarepeater-35]
[uarepeater-35:title]

Choose an Option: [radio-33 ]
Do you want to join the meeting?: [menu-296]

[/uarepeater-35]

Still Not Clear? Please contact us. Open a ticket from here.