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:
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.
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.
Vikram Singh :
Can I copy entire from fields multiple times dynamically on requirement through gravity forms.
Christopher Norris :
Is it possible to have a row auto repeat like 31 times and the first column be auto populated with say a date?
David Smith :
Hey guys, I wrote a plugin that is good for this in situations that require something a little more complex than the List field:
John Callanan :
I’m not clear – are you recommending this in lieu of Gravity Forms, or as a means of altering the functionality of Gravity Forms?
John Callanan :
Nevermind – I found the link you were talking about. Works perfectly – adds dropdown functionality to the List field type.
How can we set the gravity form Skip this step for now button.
Josh McCoy :
Can you believe it, there’s FINALLY a complete plugin for this! https://wordpress.org/plugins/repeater-add-on-for-gravity-forms
@josh McCoy but further development on it looks iffy – see https://github.com/kodie/gravityforms-repeater/issues/75
John Callanan :
I’ve tried the repeater-add-on-for-gravity-forms and its very limited and not very useful.
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 (|).
Neha Grover :
Where’s the code to be added. ?
Praveen Chauhan :
Are you referring to the code mentioned in the link? It has to be added in functions.php of your theme (preferably child theme)
Mikey Beck :
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.
Praveen Chauhan :
Thanks for reading our blog Mikey. Glad the article helped you 🙂