Gravity Forms Repeater Plugin

๐Ÿ‘‹ Ciprian on Monday, May 10, 2021 in Blog
Last modified on Monday, May 10, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

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.

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);
}

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.

Buy me a coffee to support my work!

๐Ÿ‘‹ Added by Ciprian on Monday, May 10, 2021 in Blog. Last modified on Monday, May 10, 2021.

28 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

  2. 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)

    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.

  3. 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.

    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;
      });
      
      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!

  4. 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?

    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.

  5. 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.

    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.

    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.

  6. 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

  7. 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

    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.

    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

      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

      2. 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.

      3. 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?

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Lighthouse 3.6 has arrived!
Privacy Policy