Search

How to Add Dynamic Field Duplication in Gravity Forms

Listen to this article

duplicate-fields-gravity-formsUsually, 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:

gravity-forms-field-duplication
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.

[space]

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!

[space]

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.

advanced-list-field-gravity-forms
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.

[space]

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.

[space]

Praveen Chauhan

Praveen Chauhan

14 Responses

  1. Thaaaannnk yoooooooouuuu!!! This is exactly what I was looking for!

    I was worried I was going to have to delve deep into the GF code to achieve this sort of functionality, but this is perfect!

    A thousand blessings upon you and your home, kind sir.

    1. Hi Neha,

      Are you referring to the code mentioned in the link? It has to be added in functions.php of your theme (preferably child theme)

  2. Is it possible to insert these columns into multiple custom fields? I have added First, Last and Email custom fields to my post, but using Gravity Forms + Custom Post Types, I can only seem to dump all three fields into a single custom field, with the comumns separated by pipes (|).

    Thanks

    1. I’ve tried the repeater-add-on-for-gravity-forms and its very limited and not very useful.

  3. I’m not clear – are you recommending this in lieu of Gravity Forms, or as a means of altering the functionality of Gravity Forms?

    1. Nevermind – I found the link you were talking about. Works perfectly – adds dropdown functionality to the List field type.

  4. Is it possible to have a row auto repeat like 31 times and the first column be auto populated with say a date?

  5. Hello there,

    Can I copy entire from fields multiple times dynamically on requirement through gravity forms.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

How to Make Responsive Tables using CSS without Tag
WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads