Would you like to add repeatable form fields into contact forms? A repeater field lets you collect repeatable data which is a frequent need when building WordPress forms.
In this article, we’ll show you an effortless way to obtain and work with repeatable data and fields by utilizing WPForms and a 3rd-party plugin, WPForms Repeater Field by WPCanny.
First, make sure the WPForms Repeater field is installed and activated on your site. Then you’ll need to create a new form or edit an existing one.
Adding a Repeater Field #
Once the form builder is open, go ahead and drag a Repeater field into the preview area and drop it wherever you’d like to create a repeatable field. In the below screenshot you can see the kickstart of creating an Employee Record form shown on our main demo page which can collect repeatable names and emails records.
Then add any field you’d like to include inside the repeater field area as needed. To move any field inside a Repeater field of your form, simply click on it in the preview area and drag it inside the area you’d like. Below is the preview of a name and email field inside the repeater field for the previous Employees record form.
That was an effortless way to obtain and work with repeatable data and fields. Now let’s move ahead to the customizing Repeater field Settings.
Customizing Repeater field Settings #
WPForms Repeater Field offers several ways to customize your repeatable field inside forms, including adding field and button labels, allowing maximum repeat limit, and more.
Labels and its alignments #
If you click on the Repeater field in the preview area of the form builder, its Field Options panel will open. From here, you can edit the Label and customize its alignment to the Left, Center, and Right positions as needed. Also for any reason, if you don’t want the repeatable area to be shown on the frontend then you can toggle the Hide repeater field on the frontend. In the below screenshot only the field Label is changed to Employee Details.
Repeater Field Advanced Options #
On the Repeater Field options, you can customize ever more repeater settings by clicking on the Advanced tab. You can also add CSS classes here. This custom code will only apply to the specific repeater field in the form. Additionally, you can hide the repeater label by toggling the Hide Label.
Note: We only recommend adding custom CSS to your forms if you’re an experienced user. Check out WPForms developer documentation for more information on customizing your forms with code.
Button Labels & Max Repeat Limit #
To customize Button labels, style, alignment, and set Maximum repeat limit, click on the field repeater buttons below the last repeatable field added in the preview area of the form builder, its Field Options panel will open. From here, you can edit the Repeater button alignment to Left, Center, and Right positions. Also, button styles can be adapted to Text, Icon, and Icon with Text styles. Finally, you can change add and remove button text if the Button style is adapted for Text and Icon with Text.
You can also set the maximum repeat limit which allows how many times the repeatable field can be added in the frontend.
Frontend Repeater Field View #
Finally after customizing the repeater field setting in the above steps. Let’s see how the Employee Record Form looks on the front end. In the first screenshot, it’s all about the field validation process, and in the second on it’s a look at the frontend.
Frontend Validation Process 
Frontend Repatable Fields
That’s all now you can submit the form and collect the employee records!
Happy form building!
