How to Add Dynamic Field Duplication in Gravity Forms

Usually, when requirements come my way, I recommend a plugin that fits the solution. Either as it is or with some customization. For example, for form automation solutions, I recommend Gravity Forms. I’m a little biased as you might have heard. But Gravity Forms does seem to fit into a lot of solutions. An interesting requirement I remember, was a client who needed field duplication in his form.

The client had an e-Commerce site and needed a buddy referral form to be added. The usual form, nothing special. The form had to contain the name and email of the sender (which would be auto-filled if the user was logged in), a custom message field, and fields for referral name and email address. However, his requirement was that the user had an option to add as many referrals into a single form as needed. To explain, the section would be something of the sorts I’ve shown below:

Field Duplication Using ‘Add’ Option

So the ‘Add’ option, would dynamically add more form fields to the referral form. The requirement was a possibility to duplicate fields dynamically in the front-end. The solution I proposed involved using the Gravity Forms plugin to create the form, and using a custom field for the ‘Add’ functionality. Even though, the solution was not implemented, because of a change in the client’s requirements, it could work for those of you who were in a need for the same.

But…. before I continue, let’s talk about Dynamic Field Duplication for a while.

What is Dynamic Field Duplication?

The Dynamic Field Duplication functionality should not be confused with the Conditional Logic functionality provided by Gravity Forms. There is a difference. Using conditional logic, (and based on user input) you can dynamically decide whether you want a particular field to be displayed or not. But the field was always part of the form to begin with. You only control the display of the field.

When it comes to dynamic field duplication, the field (or fieldset) has to be created on the fly. (Just like we would have to in the buddy referral example). These fields would not be inherently present in the form but, would have to be added to the user input.

So for those of you looking to display fields conditionally, (even though they would be duplicate fields), you’re looking to use conditional logic, and this article might not help you much. But for those looking to duplicate fields on the fly, read on!

How to add the Dynamic Field Duplication Functionality?

Since this requirement, is quite ordinary, this has been discussed a lot in forums. And I’m sure based on popular demand, a ‘List’ Field was added into the Gravity Forms plugin. This field has been there for a while, and does what is needed, well sort of. It needs a helping hand.

The ‘List’ Field

The List field is a special field (which you would find under the ‘Advanced Fields’ section), provides field duplication functionality. Or so it claims. With the list field, you have your basic functionality in place. You can create a set of fields, which have an ‘add’ option towards the end, using which you can duplicate the entire set.

The List Field

However, there is a major drawback.

The list field accepts only ‘Single Line Text’ fields. So it will work fine if your fields are ‘first name’ and ‘last name’. But what when you want to accept an email address. While you might say an email address is inherently a text field, there isn’t a possibility to validate the email address. Think about it, if it was okay to add a single line text field for email address, Gravity Forms would not have provided an ‘Email’ field. The same goes for any other type of field you want to add. There isn’t an option, so you will have to take care of this by adding some code and customizing it.

Another problem is the styling of these fields. Gravity Forms assumes that you want the fields to be placed in a single line. Which might not be the case in every scenario. Some might want to duplicate a section. In such a scenario, you would need additional customization. But if you have a few fields, you could survive with the default styling.

So, there you have it! A way to dynamically duplicate form fields, using a ‘List’ field, with some customization of course. Oh, and while I was investigating different options, I came across the ACF The Repeater Field. A great option if you’re not looking specifically for a solution with Gravity Forms. But haven’t tried it, so for those who have, do leave your comments.

• WordPress Tips & Tricks
• With tags: Advanced Fields, Gravity Forms

Share:

• Praveen C

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!