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
- 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]. 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]
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:
[uarepeater-35]. - To display the title of the repeater group in the email template, use:
[uarepeater-35:title] [name-of-tag:title].
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.