Add a Repeater Field in WordPress

Are you looking for a way to collect data with the same group of fields on your form without cluttering the view? The solution lies in Repeater fields, which eliminate the need for multiple individual fields, saving you time that you’d otherwise spend on customization.

In today’s article, we’ll show you how to add a Repeater Field in WordPress for free with the Ninja Forms plugin. We’ll also teach you other exciting things you can do to improve repeater fields within your forms. Eager to start? Let’s begin!

Table of Contents

1. What is a repeater field in WordPress?
2. Ways to use a repeater field in WordPress forms
3. How to add a repeater field to your form
4. Create a two-column layout with a repeater field
5. How to style a repeater field

1. What is a repeater field in WordPress?

The Repeater field, or as we refer to it at Ninja Forms, Repeatable Fieldset, is a set of identical fields that users can easily duplicate on the front end.

Repeaters condense related data into a single field, providing a more organized user experience. 

Typically, a user can click the Add+ button and a new set of form fields will appear on the form. Think of it as a copy button for those submitting the form. Here is an example of how the Repeater field looks in a WordPress form:

Adding a repeater field to your WordPress forms is beneficial for multiple reasons:

• Your data on the WordPress form looks consistent.
• Repeaters make your forms user-friendly and intuitive.
• They reduce form length, which prevents form abandonment.
• Repeaters are flexible, empowering users to adjust their data input.
• They save time because there is no need to add or customize multiple individual fields.

Now that we know the benefits of Repeater fields, let’s take a look at the ways you can use them in practice in your WordPress forms.

2. Ways to use a repeater field in WordPress forms

There are multiple use cases for adding a Repeater field to your forms. For example, if you’re dealing with registration forms or job applications, the Repeater field may become a staple in your form-building toolkit.

The most common use of the Repeater field in WordPress forms is allowing users to add more attendees to an event registration form. This can include parents signing up their children or registering a plus one for a special event.

If you require information about an applicant’s educational background, including certificates or other proof of completion, you can enhance your Repeatable fieldset by incorporating a File Upload field.

This allows users to upload any file types to your WordPress forms, including .doc, .pdf, and other popular file formats. You can also set a file size limit for uploads as needed.

The Repeatable fieldset proves versatile in various scenarios. It can be employed to include emergency contact details or used when collecting entries for a photography contest that features multiple categories like portrait, landscape, fine art, and nature.

The potential uses for the Repeater field are virtually limitless and we hope these examples have inspired you on ways to utilize them in your forms. Now, let’s take a look at how to add this field to your WordPress form with the Ninja Forms plugin.

3. How to add a repeater field to your form

The Repeatable Fieldset is one of many field types that is part of our free core plugin. To add this field type to your WordPress form, look under the Layout Fields.

With our contact form plugin, you have the flexibility to either drag and drop the Repeater field directly onto your form, or simply click on it and it will automatically show up.

To add individual fields to your Repeatable fieldset, click the blue plus-sign icon, then drag and drop your fields to your Repeatable Fieldset. Note that you can only add new fields to the Repeater fieldset, and you can’t drag existing fields on your form into it.

When a user views the form on a page, they will see all fields that you’ve placed inside the Repeater field as a group. They can click the Add button to duplicate a Repeatable fieldset as many times as they like and delete a duplicated field if necessary. There is no limit, nor ability to set a limit, on the number of repeaters that can be added.

You can change the label on the fieldset title and the button from the field’s label settings. For example, if you change the label to “Guest,” the fieldset will display as “Guest,” and the button will change to “Add Guest.”

Once your users submit the WordPress form, it’ll show up in your submission record just like a standard submission, but with multiple entries.

4. Create a two-column layout with a repeater field

Although research suggests that single-column forms generally lead to fewer skipped fields, misinterpretations, and errors compared to multi-column layouts, the choice is yours. There’s no stopping you. Your form, your rules!

If you prefer a multi-column layout for your form with a Repeater field, Ninja Forms fully supports your choice and provides the necessary tools.

To create a two-column layout, the most popular type, do the following:

Add a group of fields to your Repeatable Fieldset. Next, you will add helper classes to each individual repeating field within your Repeatable Fieldset. Navigate to the Display tab on each individual field within the Repeatable Fieldset itself and look for the Custom Class Names > CONTAINER field. 

Add the helper class “first one-half” to the CONTAINER field for the first repeating field within the Repeatable fieldset. (First Name)Every time you start a new row, you must add the “first one-half” to the Container. This means, for the First Name field and Email field you’ll type first one-half in the Container, and for the Last Name and Phone Field you’ll type one-half in the Container. 

After that, your repeating fields will display in two columns side-by-side like this:

Want to learn how to create other multi-column layouts with repeaters? Check our step-by-step guide on How to Create Multi-Column Layouts with the Repeatable Fieldset!

5. How to style a repeater field

Styling your forms, including the Repeater field, is easy with Ninja Forms. No need to edit your style sheet. Using the Layout and Styles add-on, you can easily customize the look of your form.

Head over to the Styles Settings in Ninja Forms > Styling. From there, navigate to Field Type Styles. Choose Repeatable Fieldset from the Select a Field Type from dropdown. Doing so will reveal three components of every field: the wrap, the label, and the element.

Here is an example of how you can apply that to your field:

Wrap Styles: styling space surrounding the Label
Label Styles: styling Label (identification of field) only
Element Styles: styling of a field where you insert text

To customize the look of the repeater button “Add Fieldset” with the Layout & Styles add-on, navigate to the Advanced tab of the form builder > Styles and toggle on Show Advanced CSS Properties.

Once you enable the advanced CSS settings, the additional field “Advanced CSS” will appear.

By entering the following code

.nf-add-fieldset {
background-color: green !important;
}

you can change the color of the “Add Fieldset” button from the default color to green. You can also replace the “green” with the hex color code. E.g.: #33a5ff

To learn more about styling the repeaters, check How to Style Repeater Fields in WordPress. There, we will show you how to style repeatable field descriptions, the name of the field, and the repeater field’s input.

You’ve just become a Repeater field pro!

Virtual high five to you for making it all the way here!🖐🏼 Now that you know everything about the Repeater field in Ninja Forms, take your form-building apprenticeship to the next level and explore the most popular WordPress form fields and their use cases:

• How to Add a Radio Button in WordPress
• Add Image Choices in WordPress Forms
• How to Use a Single Checkbox Field in WordPress
• 5 Ways to Use an HTML Field in Your WordPress Form
• Dropdown Select Field in WordPress Forms (Quick Guide)
• 5 Ways to Use a Single Line Text Field in WordPress
• How to Add a Multi-Select Dropdown Field in WordPress
• How to Add a Call-To-Action Button in WordPress
• How to Create a Date Time Picker Field in WordPress
• How to Add a Checkbox List in WordPress

• How to Add a Paragraph Text Field in WordPress

Venturing into the world of form creation for the first time? Grab the Ninja Forms free core plugin to access a range of free features. Give our contact form plugin a try and see why it’s considered one of the top WordPress form plugins since 2011!