How to Make a Form with a Repeater Field

How to Make a Form With a Repeater Field in WPForms

Wondering how to incorporate a WPForms repeater field in your online forms to capture more data for each form submission?

Repeater fields in forms allow users to input multiple sets of similar data while making the forms more intuitive and user-friendly.

In this article, we’ll show you the easiest way to design a repeater field for WPForms to boost your website’s functionality and user experience.

Why Use a WPForms Repeater Field?

The beauty of the WPForms repeater field lies in its ability to streamline data collection while offering several other benefits, such as:

  • User-Centric Design: By introducing repeater fields, you empower users to dictate the extent of their input. It’s a subtle nod to user autonomy and enhances the overall user experience.
  • Flexibility in Form Design: Every form isn’t one-size-fits-all. With repeater fields, you can cater to various scenarios—be it a single entry or multiple entries, ensuring your form adapts to diverse requirements.
  • Consistent Data Structuring: One of the challenges with multiple fields is inconsistent data. The data remains structured and uniform with repeater fields, simplifying backend processing and analysis.
  • Reduced Form Length: Instead of having a long, intimidating form with numerous fields, repeater fields provide a cleaner look, ensuring users aren’t overwhelmed at first glance.

Whether you’re an entrepreneur aiming for streamlined client onboarding or a blogger keen on efficient data collection, the WPForms repeater field is invaluable. Let’s dive into the steps to set it up!

How to Make a Form With a Repeater Field in WPForms

Creating a form with a repeater field in WPForms is quite easy and requires just a basic understanding of conditional logic. Follow the steps below to get started:

1. Subscribe and Install WPForms Pro

When it comes to creating unique forms, WPForms is the best option. You can use it to make and publish any type of form in WordPress. The form plugin comes with over 1,000 form templates, which can be used to create repeater field forms.

Since we’ll use conditional logic to set up the repeater fields in your form for this guide, you must subscribe to WPForms Pro, which also provides you access to premium integrations, addons, and a ton of useful features.

WPForms homepage

After purchasing a subscription to WPForms Pro, you must install and activate the plugin on your WordPress site.

Now, let’s create your form!

2. Create a New Blank Form

Go to WPForms from your WordPress admin dashboard and choose Add New from the list of options.

Add new form WPForms

Next, give your form a name and choose an existing WPForms template or just set up a new form based on your needs.

In this tutorial, we’ll make a new form to show you all the essential steps for setting up the repeat field. So, we’ll choose the Create Blank Form option.

Create a blank form for repeater field

You will now be directed to the Fields screen, where available fields appear on the left panel. The ones you have access to will depend on your license level.

WPForms fields menu

You will see an editable preview of your form in the right panel. Since we selected a Blank Form, this section will appear empty.

Add fields to your repeater form

Use WPForms’ intuitive form builder to easily add, modify, and arrange custom fields to tailor the form to your liking.

For this tutorial, we’ll add primary field types like Name, Email, and Phone to get the information for a single user, i.e., Registrant 1.

Registration fields for repeater form

Next, we’ll walk you through the easy steps to create a repeater component through a dropdown field and conditional logic.

3. Add a Dropdown Field with Yes/No Choices

To add the Dropdown field to your form, you can either click on it in the left-hand panel or drag and drop it directly into the form preview.

WPForms select dropdown field

After that, give the dropdown field Label a name like “Add Another?” and then you can add simple Yes/No options for Choices.

Configure dropdown options

Next, we’ll repeat the same steps to add Name, Email, and Phone number fields beneath the Dropdown field for Registrant 2.

Fields below dropdown repeater form

After that, we’re going to add another dropdown field with the same Label and Yes/No options in Choices to create the repeater effect.

Configure dropdown options

This allows you to create an effect where each subsequent set of registrant fields uses conditional logic only to display if the user answered Yes to “Add another?”

Dropdown field below repeater fields

Now, we need to apply Conditional Logic to your form fields so that only when the user selects Yes in your dropdown will additional registrant fields appear.

4. Apply Conditional Logic to Your Form Fields

You can do this easily by clicking on any field from the right form preview and navigating to the Smart Logic tab under its Field Options.

Smart Logic tab in field options

In the Smart Logic menu, check the Enable Conditional Logic option for all form fields below the “Add Another?” Dropdown field we created earlier.

Enable conditional logic for repeater field

Next, use conditional logic to Show the field only if the Dropdown field i.e., “Add Another?” is “Yes.” Repeat this for all other fields below it.

Conditional logic show field if yes

5. Enable Conditional Logic for the Dropdown Fields

To prevent the person filling out the form from adding a third registrant unless they’ve entered the information for Registrant 2, you’ll need to set up conditional logic for the dropdown field below it.

To do this, check the Enable Conditional Logic option for the Dropdown field below the Registrant 2 – Name, Email, and Phone fields.

Enable conditional logic for dropdown field

Next, use conditional logic to Show the field only if the Registrant 2 – Email field is not empty. This will create the repeater field effect.

Dropdown field is not empty

You can repeat the above steps as many times as you want to get numerous registrant information, which will only display if the user answers Yes to “Add another?”.

Next, click the Save button at the top right corner of the form builder before moving on to ensure that none of your changes are lost.

Save the form

We’re almost there! Now, we need to enable the form notifications and confirmations that appear after a form submission is made.

6. Enable Form Notifications and Confirmations

Setting up the messages and notifications that will appear after a user fills out and submits their registration form is crucial.

This process is simple. Select Notifications under the Settings tab on the Form Builder screen.

Form notification settings

Alerts will be sent automatically to administrators. However, you can configure the subject, body, and recipients list, if necessary.

Enable form notifications for repeater field form

The message your consumers will see after submitting the form may then be changed by choosing Confirmations under the Settings page.

Form confirmation

You can also use the Confirmation Type setting in WPForms to display a message, link to another page, or redirect the user.

Customize confirmation message for repeater field form

Great job! All that’s left to do now is to publish your form on an existing or new page to make it public and ready to collect submissions.

8. Publish Your Form with Repeater Fields

Create a new web page or post, or modify an existing one. After that, select the WPForms icon by clicking the Add Block button.

Add form widget WPForms

Next, choose your repeater field form design from the dropdown menu in the WPForms block to add it to your page or post.

If you want to customize the appearance of your form, now may be a good time to style it using the block editor.

Repeater field form

If everything looks like it’s going in the right direction, you can make your form public by clicking the Update or Publish button.

When you have finished publishing the form, the only thing left to do is test the embedded form to ensure it functions as expected on the frontend.

WPForms repeater field

More Questions about WPForms’ Repeater Field

Creating repeater field forms is a popular topic of interest among our readers. Here are some quick answers to a few of the most commonly asked questions:

What is a repeater field?

A repeater field is a versatile tool, letting users dynamically add multiple sets of identical fields in a form. Picture it as a “copy” button for a group of fields. It enhances flexibility when inputting repeatable data, like multiple registrations.

How do I add a repeater field in WordPress?

You’d typically need a reliable WordPress plugin to incorporate a repeater field. WPForms, a top-tier WordPress form builder, can be an ideal choice if you want to add a repeater field to your forms, without any CSS or coding knowledge.

What is a repeater field in WordPress?

Within the WordPress ecosystem, a repeater field allows you to create a set of sub-fields that can be duplicated by the user while filling out the form. This is especially useful when the number of repeatable data sets isn’t predefined.

Next, Learn How to Create an Accordion Form in WordPress

Are you looking for a simple way to add an accordion form design to your WordPress website? Check out our post on the simplest method for creating an accordion form using WPForms to boost your website’s usability and user experience.

Create Your WordPress Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.