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

These are the list of things we need to do to create a repeater field on Contact Form 7:

contact form 7 repeatable fields

  • After installation of the plugins, it should look like this:

repeatable fields contact form 7

  • Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Repeater field checkbox. Then click the Save Changes button. This will allow the “Contact Form 7 Repeater addon” settings.

cf7 repeater

CF7 Repeater – Live Example

In this tutorial, we will create a CF7 repeater form like the example below. You can, for sure, create your own form following the same steps.

repeater - Themefic

Check our main demo to see complete example for Contact form 7 Repeater field.

Contact Form 7 Repeatable Fields Creation

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 make a repeater field, we first have to wrap the fields with a repeater tag called ‘uarepeater’. You can find this wrapper option when you click the “Ultimate Repeater” button. Note: Wrap only those fields which 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 - Themefic

On this code, the “Add more” and “Remove” are the text for the add and remove buttons. You can rename them based on your needs.

Insert Repeater Title

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

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

This class will help repeating the heading on each repeater.

Screenshot at Apr 13 12 15 11 - Themefic

That’s it for the form Settings.

Mail tab setup

To make sure these repeater fields shows perfectly on your email, do the following on 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

After you are done setting up all your conditions, save the contact form.

Time to Publish

Copy the form’s shortcode, and paste it wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.


Watch Complete Video

If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of 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.