Gravity Forms Repeater Plugin

on in Blog
Last modified on

If there is one feature missing from Gravity Forms, that is a field repeater section. A way to set a starting and ending point and adding fields inside a repeater. Turns out this functionality exists in Gravity Forms, but in a beta state.

If you search for existing plugins, you’ll probably find not more than a handful of plugins, all either paid or part of a larger/bundle plugin, probably not worth investing in.

👋 Hey! Did you see my Gravity Forms Date/Time Picker plugin?

I needed a repeater for a client project, and I needed it to work with the latest release of Gravity Forms, 2.5. A great release with an overhauled UI. Still, the repeater functionality is not there.

As I had one week to implement his functionality, I started my coding adventure. Based on several tutorials, some code snippets and an old WordPress plugin, I cobbled together a fully working* plugin.

* For my specific scenario.

Gravity Forms Repeater Plugin
Gravity Forms Repeater Plugin
Gravity Forms Repeater Plugin

As seen in the screenshots above, I have styled the repeater fields differently, in order to make them stand out. For a long and complex form, it might get confusing pretty quickly.

.gform_wrapper.gravity-theme div.gf_repeater2_child_field,
.gform_wrapper.gravity-theme fieldset.gf_repeater2_child_field {
    margin: 0 64px;
    padding: 16px 64px;
    border-left: 3px solid #ff002b;
    background-color: rgba(0, 0, 0, 0.05);
}
Get it on GitHub!

Supported Repeater Fields

  • Address
  • Checkboxes
  • Date
  • Drop Down
  • Email
  • Hidden
  • HTML
  • MultiSelect
  • Name
  • Number
  • Paragraph Text
  • Phone
  • Radio
  • Section
  • Single Line Text
  • Time
  • Website

Repeater Features

  • Repeat groups of fields multiple times
  • Use multiple repeaters on the same form
  • Use shortcodes to display data to the user
  • Use JavaScript to manipulate the repeater
  • Customize the add and remove button’s HTML
  • Use Gravity Forms pre-populate hooks and filters like normal
  • Supports conditional logic

All contributions are welcome, especially for testing for conflicts with other plugins.

Related posts

FX Builder

October 14, 2024

How to Build an Awesome Page with FX Builder for ClassicPress

October 17, 2024

ClassicPress vs. WordPress

How to enable JavaScript in your browser

October 18, 2023

How to Enable JavaScript

51 comments on “Gravity Forms Repeater Plugin”

  1. I just want to say that after so much searching and finding this plugin is just great!
    I have gravitywiz perks and even have the full suite with the nested forms plugin.
    It does not do the basic thing which is to just repeat the the fields.I imagine you know that their plugin brings up a modal and a lot of un-needed css. I like my form, I just wanted the ability to repeat the most simple fields.

    Thank you and I look forward to buying a pro version of your plugin when you get it published for sale

    DeLoy Wilkins

    Reply

  3. Hello,
    This looks great, and is a perfect fit for my use case, but I can’t seem to get it to work. When I put the repeater in, the buttons don’t function, and I get this error in the console on page load:

    gf-repeater2.js?ver=2.0.2:145 Uncaught TypeError: Cannot read property ‘7’ of undefined
    at HTMLFieldSetElement. (gf-repeater2.js?ver=2.0.2:145)
    at Function.each (jquery.min.js?ver=3.5.1:2)
    at s.fn.init.each (jquery.min.js?ver=3.5.1:2)
    at HTMLDivElement. (gf-repeater2.js?ver=2.0.2:30)
    at Function.each (jquery.min.js?ver=3.5.1:2)
    at s.fn.init.each (jquery.min.js?ver=3.5.1:2)
    at gfRepeater_getRepeaters (gf-repeater2.js?ver=2.0.2:10)
    at HTMLDocument. (gf-repeater2.js?ver=2.0.2:970)
    at HTMLDocument.dispatch (jquery.min.js?ver=3.5.1:2)
    at HTMLDocument.v.handle (jquery.min.js?ver=3.5.1:2)

    Reply

    1. This might happen with certain types of fields, such as dates. The validation is messed up inside the repeater. If you have any validation fields, such as dates or phone numbers, try to remove them, just to identify the issue. If it’s an option, replace them with regular fields (this is how I fixed a phone number issue).

      I am also open to patches on GitHub.

      Reply

  4. Ciprian – you will be regarded as a hero in the Gravity Forms community for this. It’s really great work! Can I ask – I have a number field that I need to get a total from in a form. Is there a shortcode defined for that or do I need to get a skilled JS person to put one together?

    Thanks again for your help on behalf of all of us.

    Reply

    1. Thank you!

      Regarding the number field, I’m sure it’s possible using some simple JavaScript. For example, you can add an event listener for the original form (if it’s on the same page) and on blur (as in when the field loses focus, check if the value is not empty and is a number and then do the calculations and then populate your total field:

      For example, here is a simplified version:

      document.querySelector('.myFormField1').addEventListener('blur', () => {
    let totalValue = document.querySelector('.myFormField1').value + document.querySelector('.myFormField2').value;

    document.querySelector('.totalField').value = totalValue;
});
      Reply

      1. I’ll try that and if I can’t get it to work, I’ll ask a grown up for help! ?

        Thank you so much! You’ve done a lot for UX with this!

  5. Hey, i am just starting to use this plugin, it is great, but i have a question, does it work on mult page forms also,

    i managed to make it work on a single page form. but on my long mutli step form it doesnt save the values is that my problem?

    could there be anything else you can recommend to check, in order to trace the problem?

    Reply

    1. It does not work on multi-page forms. This has been an issue for a long time. I don’t know why. I am open to contributions if you manage to fix it.

      Reply

  6. Hey, thanks for the plug-in! It’s been very helpful. I noticed it says it supports conditional in the features, but I can’t seem to get it to work. Is there a trick to it? My repeater fields are displaying always, despite the conditional logic.

    Reply

    1. I guess I need to remove that line from the features :) It doesn’t seem to work and I’ve been working to find out why. Gravity Forms is updating their API to expose the repeaters, so I might use that code. But it’s still in development now.

      Reply

    1. I’m working to improve the back-end UI for the latest version of Gravity Forms (as it’s moving very fast). If I see anything obvious in there, I’ll fix it.

      Reply

  9. Hello, Love this solution, is there a way to set a dynamic value in the min and max repeater fields.

    I have a participants field before the repeater, and it should pick the value from this field. So example 4 participants, the repeater should go 4 times.

    Thanks

    Reply

  10. Hi there, I have another issue:

    caught TypeError: repeater2Info.children is undefined
    repeater2Data https://url.be/wp-content/plugins/repeater2-for-gravity-forms-master/js/gf-repeater2.js?ver=2.0.2:145
    jQuery 2
    repeater2Data https://url.be/wp-content/plugins/repeater2-for-gravity-forms-master/js/gf-repeater2.js?ver=2.0.2:30
    jQuery 2
    gfRepeater_getRepeaters https://url.be/wp-content/plugins/repeater2-for-gravity-forms-master/js/gf-repeater2.js?ver=2.0.2:10
    https://url.be/wp-content/plugins/repeater2-for-gravity-forms-master/js/gf-repeater2.js?ver=2.0.2:970
    jQuery 7
    https://url.be/tickets/:509
    trigger https://url.be/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.5.7:1
    https://url.be/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.5.7:1
    jQuery 2
    e
    t

    Reply

    1. You should report these issues in the GitHub repo – https://github.com/wolffe/repeater2-for-gravity-forms/issues – as it’s easier to keep track there.

      Reply

    1. It is still working for me without phone or date fields. Anything that uses a mask does not work. I am open to any contributions or PRs –

      https://github.com/wolffe/repeater2-for-gravity-forms/pulls

      Reply

      1. Notice: Constant GF_REPEATER_VERSION already defined in/public_html/wp-content/plugins/repeater-add-on-for-gravity-forms/repeater.php on line 13

        Notice: Constant GF_REPEATER_PATH already defined in/public_html/wp-content/plugins/repeater-add-on-for-gravity-forms/repeater.php on line 14

        Fatal error: Cannot declare class GFRepeater, because the name is already in use in/public_html/wp-content/plugins/repeater-add-on-for-gravity-forms/repeater.php on line 31

      3. Sorry, the last error message was coming from another plugin I tested before yours. In facts, there’s no error message from your plugin, only nothing happening anymore and the form doesn’t have any fields of the types you mentionned.

      4. I know it’s broken, and some fields don’t work. Maybe some other fields than the ones I mentioned are breaking the plugin. I know there is no error, but the JavaScript is not selecting certain fields.

        What fields to you have in your form? Or could I see a link?

  13. Great addon!
    It’s possible to use with Product field formula to get total price based on how many repeater field exist in a form?

    Reply

  14. Hello!

    We’ve installed this and it’s working on the frontend. However, when we receive email notifications it doesn’t show the text fields a user fills in that are between the repeater start/end. I do have a dropdown in the repeater and that text will show. Any suggestions?

    Thanks!

    Reply

    1. No suggestions here.

      The plugin needs a bit of work and I’ll do it at some point, but Gravity Forms added a lot of new code recently and it’s going to be a while until I catch up.

      Reply

  15. I used your plugin for gravity form but the reapeater field with in another repeater field is not working, it halts the parent repeater add or remove functionality, can you tell me why ??

    Reply

    1. I can’t tell you why. Note that the repeater field might not work with conditional fields. If you want to contribute with a fix, check out the GitHub repository.

      Reply

  16. repeater field not working + and – button not clickable and both are visible its means javascript not working

    Uncaught TypeError: repeater2Info.children is undefined

    Reply

    2. Can you also give me the line where this variable is undefined? It appears in several places and I need to know where it’s undefined.

      Reply

  17. Hi,
    I enabled the “Rich Text Editor” on Paragraph field but it seems that it is not working yet on the frontend. I hope this works on next update. Or can I request on making this work as I am currently hoping for this?
    Thanks!

    Reply

    1. I would appreciate a code contribution, :) otherwise this might not happen. I don’t have the time to work on these features. I’ll add it to the list, but I can’t promise anything.

      Reply

  18. Hello, thank you for this nice plugin.

    just a quick one, is there a way this will work with save and continue? currently its not saving.

    Again thank you for this one. Hopefully the phone mask issue will get fixed. :)

    Reply

    1. You are welcome!

      I’m not actively maintaining this, as Gravity Forms made some giant leaps recently, and the JavaScript code (mainly jQuery) is a bit old. I’m open to contributions, though.

      Reply

  19. Well.. I just left a fairly lengthy comment in an attempt to be useful, but when I submitted, a Server 500 error was returned and I lost what I wrote.. Testing now so I don’t waste my thoughts again..

    Reply

  20. I’ve been attempting to help with this. I’m a fairly-decent PHP developer, but not so great with Javascript.

    Anyway, the plugin works if I don’t put ANY fields in between the opening and closing repeater fields. But if I add ANY field in between, then I get this error:

    “Uncaught TypeError: Cannot read properties of undefined (reading ‘1’) -> the (reading ‘#’) returns different numbers depending on where the repeater fields are in the form.

    The first link in the console error stack points to gf-repeater2.js, line 146 which reads:
    “var childInfo = repeater2Info[‘children’][childIdNum];”

    So, it seems to be a problem with the ‘children’ object not being instantiated?

    Reply

    1. Actually, I found out what the issue is. I had a contributor look at the plugin, and they discovered that if you refresh the form (back-end) and then save again, everything works. Tested with the latest version, as of today.

      So, it’s the same as your issue, the children are not there when you first save the form.

      It must be the way Gravity Forms inserts the fields. There must be some proprietary caching involved. We’ll get there.

      Reply

      1. Thank you so much for this reply, this solved my issue! Thanks for the plugin in general, so easy to use and very helpful :)

  21. We have a form with 7 steps. On 6th step, we have certain form elements that repeats multiple times. Aftet that there is a static text. When we are pushing the static text to 7th step, data of step 6 (repeater) does not get submitted. Is there any solution for this?

    Reply

    1. I tested your form, and it is working for me, it is adding new form sections.

      I do see another JavaScript error in the console, related to some countdown timer. That might prevent the form working on your side.

      Reply

  23. Hi,

    Love you plugin. I am getting the following error at the top of my site upon submission

    screenshot
    https://ibb.co/XDbj3tt

    Any idea how I can fix this?
    Thanks in advance

    Reply

    1. Those are not errors, just warning. And if the plugin is working properly for you, you can ignore them. You should have error reporting turned off anyway.

      I might have a look at the plugin at some point and see if I can fix anything or suppress any errors.

      Reply

  24. Hi Ive been using this plugin for sometime but it no longer seems to work and get this error in console:

    Uncaught TypeError: Cannot read properties of undefined (reading ’11’)
    at HTMLDivElement. (gf-repeater2.js?ver=2.1.1:137:47)
    at Function.each (jquery.min.js?ver=3.7.1:2:3129)
    at e..each (jquery.min.js?ver=3.7.1:2:1594)
    at HTMLDivElement. (gf-repeater2.js?ver=2.1.1:29:32)
    at Function.each (jquery.min.js?ver=3.7.1:2:3129)
    at e..each (jquery.min.js?ver=3.7.1:2:1594)
    at gfRepeater_getRepeaters (gf-repeater2.js?ver=2.1.1:10:47)
    at HTMLDocument. (gf-repeater2.js?ver=2.1.1:961:7)
    at HTMLDocument.dispatch (jquery.min.js?ver=3.7.1:2:40035)
    at v.handle (jquery.min.js?ver=3.7.1:2:38006)

    Reply

    1. It seems like the latest version of Gravity Forms changed something.

      I will try to find some time and fix it, but no promises. The source code is on GitHub, so I’ll take any contributions or PRs.

      Reply

Leave a Reply

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