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”.

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.

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 #

• Ensure that both Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
• Download & Install Ultimate Addons for Contact Form 7 Pro from our Client Portal.
• Activate your license key.
• Go to Ultimate Addons menu in your WordPress Dashboard and enable Repeater Field Checkboxe/toggle.

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.

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 uarepeater-35 add "Add more" remove "Remove"]
--fields--
[/uarepeater]

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.

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.

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:

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

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

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

<label> Do you want to join the meeting?
    [select menu-296 "Yes" "No"] </label>
</div>
[/uarepeater]
</div>
<p><small>The border added on this area is for demo purpose, To differentiate the repeater area from normal fields. It's not part of the plugin.</small></p>

<div class="uacf7-repeatborder">
[uarepeater uarepeater-36 add "Add more +"]
<div><h4 class="uacf7-repeater-title">Another Repeater Set</h4>
<label> Your Rating
    [uacf7_star_rating rating] </label>

<label> Your Product
[uacf7_product_dropdown uacf7_product_dropdown-716 product_by:id order_by: layout:dropdown] </label>
</div>
[/uarepeater]
</div>
[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]

File Field Inside Repeater #

When using file upload fields inside a repeater field powered by Ultimate Addons for Contact Form 7, you must follow a specific format to ensure that file attachments are correctly included in the email.

You have a file upload field inside a repeater, and you want the uploaded files from all repeater rows to be attached to the email sent via Contact Form 7.

Repeater Structure Example in Form Editor:

[uarepeater-511][file-52][/uarepeater-511]

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