How to Dynamically Duplicate Fields in Repeating Fields

Repeating fields—or the ability to allow users to dynamically duplicate fields—may be Formidable's most valuable, untapped resource. Until now, only a lucky few have discovered this incredible feature and taken advantage of all it has to offer.

Here's what you should know:
The pro version of Formidable Forms includes an easy-to-use Repeatable Section which increases form conversion, decreases form load time, improves flexibility of data, and saves you time.

What are repeating section fields?

A repeating section field is a single field, or group of fields. They can be added any number of times by the end user. Typically, a user will click an 'Add' or + button to make the field group appear an additional time. Here's a little demo so you can see how this works in Formidable Forms:

List your pets

Pet Name *

Type * Dog Cat Bird Fish Horse Pig Goat

  Add Remove

If you are human, leave this field blank.

I've heard repeating fields referenced by several different names, but they're all essentially referring to the same thing:

• Repeating/repeatable/repeater fields
• Repeating/repeatable field groups
• Repeating/repeatable sections

If you see any of these terms come up, don't fret. They're all referring to the same thing, and allow you to dynamically add form fields. In Formidable, we refer to the field group container as the Repeatable Section and the fields inside as repeating fields.

Repeatable Sections are included in the pro version of Formidable Forms. No add-on is needed. That sets us apart as the only WordPress form builder that includes repeating fields in the core code. Even Gravity Forms, bless their heart, doesn't have this built-in to their core plugin.

How can repeating fields help you?

Besides looking spiffy, repeating fields can enhance your forms (and your life) in a few different ways.

Increase form conversion

Repeating fields encourage users to fill out your form. Long forms can be overwhelming and repeating fields help mitigate that. You can collect the same data from your users, while making your form more appealing and less bulky. End users only see the fields they need to see. Check out this example below. Would you rather fill out Form A or Form B? I'm fairly certain that any human who values their time will be drawn to Form B. (Especially job applicants. Form A appears to be four times the work and they don't even have the job yet!)

Form A

Form B

According to research done by Formstack, decreasing the number of fields in a form directly correlates with increased conversion rates. Using Repeatable Sections decreases the number of fields in your form, which helps increase conversions. How awesome is that?!? Just a disclaimer though, the correlation was found in forms with 35 fields and fewer, so if you have a mammoth form this may not apply to you.

Decrease load time

Here's how repeating fields can improve your form's load time. Let's say you need to collect Job History in a form. We'll say there are 8 fields in each Job History section, and you want the user to enter up to 4 previous jobs. If you use a Section Heading with the Job History fields inside of it, you'll be up to 32 fields + 2 fields for the start and end Section Heading. You're up to 34 fields at this point in a standard form.

Now, let's see how many fields we can eliminate using a Repeatable Section. With the 8 Job History fields plus a start and end field for the Repeatable Section, you'll have a total of 10 fields (including the start and end fields for the Repeatable Section). This is just a simple example, but you can see that using a Repeatable Section here decreases the number of fields by more than 70%. Wow. What a nice way to get rid of those unnecessary fields that are bloating your database tables.

More importantly, fewer fields means a faster load time. I created the two hypothetical Job History forms, one with 34 fields, the other with 10. When I loaded a page with 34 fields on it, it took .86 seconds, on average, to load. When I loaded a page with 10 fields on it, it took .71 seconds, on average, to load. That's an 18% improvement in load time. You can get the same data from users and shave off a little of their waiting time. Faster page loads can also boost your page visits and search rankings!

Improve flexibility of data

In the Formidable Forms code, a Repeatable Section is treated as a child of the parent form. Each row in a Repeatable Section is saved as a child entry in the database. This opens up an array of possibilities (pun intended). You can display individual rows from the section, search for specific data entered in one of the repeating fields, and export the entries from a Repeatable Section directly. I love the flexibility of Repeatable Sections and the possibilities they provide.

Save time

We're all a little short on time. I certainly don't like wasting time creating something from scratch when there's an existing solution out there that works well. Using Repeatable Sections saves a considerable amount of time if you're currently creating forms from scratch. You don't have to reinvent the wheel! Based on the amount of time we spent creating these fields, I would venture to say you could save hundreds of hours by using our Repeatable Sections.

Save time while building a form with Repeatable Sections in Formidable. Going back to the Job History example: if you want to change a field label in the form that has 34 fields, this takes several minutes. Finding each instance of a label that repeats several times can be daunting. Plus, you might miss one. If you want to change a field label in the form that has 10 fields, this takes seconds. Adding, reordering, and modifying fields takes much, much less time when you use a Repeatable Section.

Repeatable Sections can also cut down on the time you spend styling forms. They have layout options built-in so you can display the repeating fields inline with no added CSS.

Bonus: it's automatically responsive {so your forms look great on any screen size}!

How I use repeating fields

I recently wanted to set and track monthly activity goals to help me stay motivated. I decided to throw up a website for setting and tracking my goals. I created the following form:

A Repeatable Section was perfect for tracking my goal progress. After a run, I could log it, then see what percentage of my goals I had reached.

The SKT Skill Set plugin helped generate the progress bars. A bit of custom code was needed to calculate the percentage. I would be happy to share it with anyone who is interested in trying this out. Just let me know in the comments.

Thanks to our Repeatable Section, this application was up in no time at all. Repeatable Sections made it easy to set multiple goals, track those goals, and set up the Views that I needed. One View showed my progress and another showed a log of all activity, ordered by date. The awesome thing about this is that it actually helped me stay motivated! I ran more while I was using this goal setting/tracking solution than I ever had previously.

Where to allow users to dynamically duplicate fields in repeating sections

There are virtually unlimited uses for repeating fields. Here are just a few scenarios where I have seen repeating fields come in handy (there are many, many more than the handful listed here):

• Register multiple individuals for an event
• Add details for multiple children
• Enter details for each room in a home
• Create multiple events for a calendar
• Provide job history
• Add assets
• Set and track goals
• Enter rental history

Do repeating fields open up any possibilities for you? I've divulged the secrets of our Repeatable Sections. Now you can try them out and create something beautiful.

If you want to use repeating fields, but aren't sure where to begin, we have some great docs to help you get started.

Not yet using Formidable Forms? Learn more about how we have the most advanced online form builder features or go ahead and get started!