Set Number of List Field Rows by Field Value

Increase or decrease the number of rows in a List field by the value of another field. Ordering three tickets? Show three list field rows for ticket information.

December 11, 2023: Fixed compatibility issue with Gravity Forms 2.8.

June 21, 2021: Fixed an issue where List field icons were not hidden.

June 3, 2021: Updated snippet documentation to reflect GF 2.5 changes and fixed an issue where rows were not counted correctly.

March 31, 2021: Migrated snippet to the Snippet Library.

July 27, 2020: Fixed issue where script could be run before jQuery was loaded.

April 25, 2020: Added compatibility for the GravityView Edit Entry screen.

August 22, 2019: Fixed intermittent issue where loading script in Gravity Forms Gutenberg block caused Parent Selector to disappear.

October 5, 2013: Updated snippet to use a class format for easier instantiation which also adds support for applying to multiple forms and multiple fields on the same form.

January 26, 2013: Updated to better select the current list field table rows.

Stop! There's a better way.

This snippet is available as a plugin with Gravity Perks, a suite of over 46 premium Gravity Forms plugins!

View Plugin Buy Gravity Perks

Found this interesting question on the Gravity Forms forum:

I’m selling tickets. So each ticket needs to be associated with a name/email/etc…

Basically, the user needs a way to gather a set of data per ordered product/ticket. My first instinct was to simply recommend using the List field. The user could specify the number of tickets and then add/remove however many rows they need.

I kept thinking on it and realized it would be really nice if the number of List field rows increased/decreased automatically based on the number of selected tickets. Here’s a snippet to do just that!

How do I install this snippet?

Just copy and paste the snippet above into your theme’s functions.php file.

Do I need to modify this snippet to work with my form?

You just need to create your own instance of the GWAutoListFieldRows class. You’ll find two examples at the bottom of the snippet. Comment them out and then add your own! All you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property.

Looking to make all the rows required? Just use our Require All Columns of List Field Snippet and you should be all set!

Comments

    1. John K
      John K April 25, 2022 at 10:44 pm

      This is at the end of the column label row and needs to be deleted to align the labels and inputs.

       

    2. John K
      John K April 25, 2022 at 10:47 pm

      I didn’t see a Reply link so I entered a new “Reply” (yes, I was mislead by the name of your Comment form).

      I tried to paste HTM – div element – but when I submitted the comment, it wasn’t there. So I’m putting it in double quotes and hoping that makes a difference.

      This is at the end of the column label row and needs to be deleted to align the labels and inputs. “

       

    3. John K
      John K April 25, 2022 at 10:52 pm

      div class=”gfield_header_item gfield_header_item–icons”>& nbsp; /div

      I take it you can’t post HTML in these comments? I’m trying to trick it.

    4. Samuel Bassah
      Samuel Bassah Staff April 26, 2022 at 7:01 am

      Hi John,

      As you may have seen on the documentation, there is a better way to get this functionality in our GP Auto List Field Perk. Snippet support is also only available to active Gravity Perks license holders and even with that instead of using this snippet, we would recommend using our GP Auto List Field Perk.

      Best,

    5. John K
      John K April 26, 2022 at 10:44 am

      I fixed it. $(“#field_{0}_{1} .gfield_header_item–icons”.format(this.formId, this.listFieldId)).css(‘display’, ‘none’);

    6. John K
      John K April 26, 2022 at 10:51 am

      But Samuel, you still provide the fee snippets, for which I am grateful. And this is a bug. Don’t you want to fix bugs in both the free and paid versions?

      It’s not “support”. I’m helping you out by reporting a bug. I would hope you’d fix a bug in anything you produce for the public.

  1. Jennifer
    Jennifer May 31, 2021 at 5:24 pm

    Hi, This snippet was working great for us until the GF update to 2.5 and then suddenly it stopped working.

    Luckily for me (since I’m not a programmer), it looks like it was a simple fix. GF changed the ID for the quantity field so instead of using:

    ‘input_html_id’ => ‘#ginput_quantity_240_5’

    The ID name is now:

    ‘input_html_id’ => ‘#input_240_5_1’

    Hopefully this helps someone else. Please let me know if there’s anything else that need to change to keep this snippet working with the new version of GF!

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff June 1, 2021 at 10:11 am

      Hi Jennifer,

      Thanks for bringing this to our attention. I am forwarding this to our developers to work on a fix. I will update my reply when the issue has been resolved.

      Best,

  2. Si
    Si April 29, 2021 at 2:19 am

    Hi guys, this looks like a great solution to something I’ve been asked to achieve on a company website. We’re a logistics company looking to create a booking form using GF and we wanted a way for the customer to select a number of pallets to be collected and then for the rows below this to ‘open up’ based on the value selected ie 5 pallets would open up 5 rows to be filled in.

    Is there a way to append a text field before the first input field on a row and then have that text field increase in value as the form becomes longer? Probably not explaining this very well!

    ie someone wants 5 pallets collected, 5 rows are ‘created’ below with each pallet number listed as a pre-filled text field followed by the input fields for that row:

    PLT1 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’

    PLT2 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’

    PLT3 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’

    PLT4 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’

    PLT5 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’

    Thanks for your time Si

    Reply
    1. Ryan Donovan
      Ryan Donovan September 27, 2020 at 11:33 pm

      Hello Zoheir, To make this snippet work, all you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property. These will be within your personal form. So you forms ID will be the form_id. The field id that contains the list will be the list_field_id and the HTML Field ID on your form will be marked as the input_html_id_property;. Hopefully that clears things up.

  3. rajab
    rajab August 14, 2020 at 1:13 am

    I have created a woo-commerce frontend product submission form by gravity form plugin. When I uploaded everything is working fine except product gallery images not showing on the product page. I have used _product_image_gallery filed to upload the product images and uploading without any error but not showing on the product page can anyone help me to sort out this advance thanks.

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff August 10, 2020 at 9:35 am

      Hi Sarmad,

      We don’t have an exact solution to add a product field into List fields, but a workaround would be to use the Nested Forms to handle this. Basically, you’d create a child form that includes your Drop Down Product field in it, and users can add as many entries to that child form. You may want to check out our documentation on Nested Form and how it works.

      Best,

  4. Claire
    Claire July 4, 2020 at 2:22 pm

    Unfortunately this doesn’t validate if all fields are filled out, let alone if the email field is in fact an email address. I had so much hope for this snippet. :(

    Reply
    1. Ryan Donovan
      Ryan Donovan July 28, 2020 at 12:42 pm

      Hello Claire, we are sorry that this did not resolve your issue. You could set all fields to Required to validate that all fields are filled out and for email address, are you currently using an Email Field? Let us know about your setup so we can help you out with this one. 😃

  5. Nicholas Woollard
    Nicholas Woollard April 26, 2020 at 5:09 pm

    I used your “download code” button. The beginning now looks like this:

    class GWAutoListFieldRows {

    private static $_is_script_output;
    
    function __construct( $args ) {
    
        if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
            return;
        }
    
        $this->_args = wp_parse_args( $args, array(
            'form_id'       => 18,
            'list_field_id' => 32,
            'input_html_id' => '#input_18_63'
        ) );
    

    etc…(nothing else changed)

    Reply
    1. Ryan Donovan
      Ryan Donovan April 27, 2020 at 10:00 am

      Hello Nicholas, thank you for that information. When using the snippet, You just need to create your own instance of the GWAutoListFieldRows class. You’ll find two examples at the bottom of the snippet. Comment them out and then add your own! All you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property. // EXAMPLE #1: Number field for the "input_html_id" new GWAutoListFieldRows( array( 'form_id' => 240, 'list_field_id' => 3, 'input_html_id' => '#input_240_4' ) );

      // EXAMPLE #2: Single Product Field's Quantity input as the "input_html_id" new GWAutoListFieldRows( array( 'form_id' => 240, 'list_field_id' => 6, 'input_html_id' => '#ginput_quantity_240_5' ) );

      No need to change the code at the top. If you have a Gravity Perks license we would be more than happy to take a deeper dive into your forms. You could drop us a line through our support channel here. Thanks! 😃

  6. Nicholas Woollard
    Nicholas Woollard April 25, 2020 at 7:54 pm

    Reading all the comments about how easy this was to implement, I am feeling a right twit because nothing seems to happen.

    1) I copied the code snippet to my child functions.php file. 2) I removed the leading <!PHP 3) I configured the inputs:

            'form_id'       => 18,
            'input_html_id' => '#input_18_63',
            'list_field_id' => 32
        ) );
    

    Where 32 is the ID of my list field and 63 the ID of my source number field. The source field appears just above the list field.

    The changes to functions.php saved without errors.

    It seems to have exactly NO effect on my form: the list field still displays the +/- buttons and the value entered in the source number field doesn’t change the number of list field rows.

    I’m probably doing or overlooking something very obvious and stupid. I would appreciate any thoughts/help.

    Reply
    1. Ryan Donovan
      Ryan Donovan April 26, 2020 at 12:21 pm

      Hello Nicholas, I am sorry that you are having this issue. I see that you have done things correctly. Are you keeping the whole configuration? new GWAutoListFieldRows( array( 'form_id' => 18, 'list_field_id' => 32, 'input_html_id' => '#input_18_63' ) ); I just tested the code and everything seems to be working correctly on my end. Could you ensure that you have included the function at the top of the configuration as well as matched the formating? Thank you! 😃

  7. lalit pendhare
    lalit pendhare April 3, 2020 at 5:42 pm

    Hello Gravitywiz Team,

    I’m looking for your solution(https://gravitywiz.com/set-number-of-list-field-rows-by-field-value/) for showing row from passing value in a text field.

    But I’m used ajax gravity form so that js code added in above the Html start so it is pushing the jquery error and then my custom js not work on that form.

    output_script() js function called in above the html after clicking next.

    We are used save and continue form with ajax.

    Without ajax is working fine but we need to use ajax form as our client requirement.

    Looking for your help.

    Reply
    1. Ryan Donovan
      Ryan Donovan April 5, 2020 at 2:54 pm

      Hello Lalit, could you please try our Custom JavaScript plugin and see if you are still experiencing this issue. This plugin allows you to easily add custom JavaScript to your Gravity Forms that loads in the appropriate context and doesn’t interfere with other AJAX-enabled forms. Thanks!

  8. Eduard Coumans
    Eduard Coumans March 4, 2020 at 7:30 am

    How do I make all additional fields required. If I now fill in 1 field (it doesn’t matter which field), the visitor does not have to fill in the rest of the fields. How can I add this requirement. The visitor must complete all fields.

    Reply
  9. Nick
    Nick October 21, 2019 at 8:42 am

    Hi there,

    I noticed there is a dangerous issue with running this using a vanilla quantity field. If a user accidentally (or on purpose for that matter) enters a huge quantity (2000) it will crash the browser as it tries to render 2000 input boxes. The solution is to enable drop down selection on the quantity field or use a JavaScript input mask to limit the input. It might be worth warning people about that.

    I was also trying to use this snippet with https://gravitywiz.com/better-inventory-with-gravity-forms/ but the stock validation doesn’t seem to work when you combine the two snippets. When combined it still lets you select inputs when there isn’t enough stock and you are using two products on one form. When there is no stock the field disables but a user can still use the submission button. When there is no stock you get the out of stock message displayed correctly and the list input is disabled but the total price acts as if you have one item selected and it allows you to continue to submission. I can’t disable the form because there are other products with stock that need to be sold. I’ve tried setting the default value in the quantity field as 0, I’ve tried setting the default selection as zero. I’ve tried to also set the default value of the product field as zero with a php function rather than gravity forms form GUI. But every time it runs out of stock it defaults the value to 1 unit and allows you to submit.

    I don’t know enough about php coding on WordPress to build this from the ground up. My guess is it is something to do with how the list item is first being called. It defaults to one item when the solution to this issue is to set the starting default as zero. I believe there needs to be an amendment to the “Set Number of List Field Rows by Field Value” snippet.

    Reply
    1. David Smith
      David Smith Staff October 24, 2019 at 10:36 am

      Hey Nick, that’s a good call. I’ve added this to the bug list for this snippet. We’ll get it in the queue to be addressed in the code.

      Do you have an example of your Better-Inventory-enabled form? Also, if you could include your configuration of the Better Inventory snippet via a snippi, that’d be very helpful.

      Also, if you’re a Gravity Perks customer, feel free to submit a support ticket for faster response times.

    1. David Smith
      David Smith Staff October 18, 2019 at 11:44 am

      The code-based approach is not for everyone. You might be interested in the plugin version that requires no code interaction. It’s called GP Auto List Field and is available by request to Gravity Perks license holders.

  10. Jennifer
    Jennifer August 9, 2019 at 4:56 pm

    Hi, I have just discovered that when I include this code in my functions.php, the Parent Page selector disappears in under Page Attributes when editing a Page. It makes no sense since the snippet should only impact the form, not the page editor. The form itself works fine with the snippet.

    I’m wondering if it has anything to do with the (jQuery) call in the function because there was a second snippet that also causes this error and it also included Javascript.

    https://docs.gravityforms.com/making-a-field-read-only/

    I created a pared down site using just this code snippet in the Twentynineteen theme to confirm that it’s not a problem with my theme. The site is password protected but I can send the login info if you are interested in taking a look at this unusual error.

    Reply
    1. Jennifer
      Jennifer August 9, 2019 at 4:59 pm

      Forgot to mention that the site is up to date with the latest WP and plugins. PHP 7.2.9 MySQL 5.7.23 WP v5.2.2

  11. Sarah
    Sarah June 11, 2019 at 2:52 pm

    Hello, I’m trying to get this to work, but it shows a 404 error. I’m confused about the input_html_id… If my form id is 63 and my number field is 29, should it be:

    ‘input_html_id’ => ‘#input_63_29’

    Or am I missing something? Do I need to add anything to the field itself?

    I’m trying to use this to count the number of rows in my list field so that I can use conditional logic to show file upload fields. I’m using Slim Image Cropper, which doesn’t allow multiple file uploads, so I need to dynamically show these fields based on how many rows there are in a list field. Unfortunately I can’t say “if there are 4 rows, show 4 file upload fields”, so this is my more complicated workaround.

    Thank you!

    Reply
    1. David Smith
      David Smith Staff June 11, 2019 at 3:04 pm

      Hi Sarah, this doesn’t count the rows, it sets the rows. If you enter 4 in the number field, it adds 4 rows to the corresponding List field. The demo has a good example.

    2. Sarah
      Sarah June 11, 2019 at 3:44 pm

      Sorry, I couldn’t reply to my previous comment… I’m aware it sets the rows, I just have further plans for it once I get it to work.

      Problem is, I can’t get this to work. I suspect it’s the $input_html_id…

      Using Example 1, if my form id is 63, my list field id is 16, and my number field is 27, should it be:

      new GWAutoListFieldRows( array( ‘form_id’ => 63, ‘list_field_id’ => 16, ‘input_html_id’ => ‘#input_63_27’ ) );

      Using this gives me a 503 Service Unavailable error…

      Thank you!

    3. David Smith
      David Smith Staff June 11, 2019 at 4:13 pm

      Hey Sarah, your config looks right based on the field IDs. The red highlight is just the syntax highlighter getting a little confused. The syntax is valid.

      I also confirmed that the demo is still working. If you’re still having trouble getting this working on your end, we do have a plugin version of this functionality available for our Gravity Perks customers.

  12. Fredrik Sundlöf
    Fredrik Sundlöf April 9, 2019 at 10:46 am

    Hi, Right now I am using this function as you have describe here and it works perfect. The user enters a number in a field and the same number of rows is shown. But how about this. Before number of rows the user select between 4 different settings as radio buttons and this will then create the number of columns the list field will generate.

    Like this: Order shirts for the team!

    Printing: – None – Name – Number – Name and Number

    Number of shirts:

    If the customer choose “Name” and 8 shirts, the list filed shows 2 columns (Name and size (Dropdown) and 8 rows. If the customer choose “Name and Number” and 4 shorts the list field shows 3 columns (Name, number and size (Dropdown) and 4 rows.

    The Dropdown and number of rows is already in place and is working. Any idea about the conditional columns function?

    Thanks! Fredrik Sundlöf

    Reply
    1. David Smith
      David Smith Staff April 9, 2019 at 11:26 am

      Hi Fredrik, this is a cool idea. We don’t have a ready solution for this but definitely something we’ll consider for a future version of this snippet.

    2. Fredrik Sundlöf
      Fredrik Sundlöf April 10, 2019 at 12:47 am

      I did solve this by creating multiply list fields with the different columns that I wanted and then show each at a time with conditional logic from the radio buttons.

      :)

  13. Adam Cates
    Adam Cates December 21, 2018 at 6:10 pm

    I’m trying to run two instances of the code in one form. The first instance is running fine. But the second is not working. I double checked the field Id’s and everything seems to be correct. Any ideas??

    new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 22, ‘input_html_id’ => ‘#ginput_quantity_8_16’ ) );

    new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 20, ‘input_html_id’ => ‘#ginput_quantity_8_24’ ) );

    Reply
    1. David Smith
      David Smith Staff December 22, 2018 at 9:09 am

      Hi Adam, I tested this configuration locally and it works as expected. Just FYI, if you’re a Gravity Perks customer, you may be interested in our early-access GF Auto List Field perk available by request. It provides this same functionality but without the need to touch code.

  14. christian manaoat
    christian manaoat November 18, 2018 at 9:29 pm

    hello there,

    i don;t know if this forum is active, but im confused about $input_html_id where to find it? sorry im non dev guy.

    Reply
    1. David Smith
      David Smith Staff November 18, 2018 at 9:53 pm

      THere’s not a great way to fetch the input’s HTML ID without viewing the source of the form. It’ll look something like this: https://gwiz.io/2Be3HvJ If you’d prefer to not touch any code, we do have a plugin version of this available to Gravity Perks users by request.

    2. Nick
      Nick October 18, 2019 at 5:01 am

      David, I would be interested in this as a perk. It’s a neat snippet with some scope for improvement. Please keep up work on this one.

  15. Alex
    Alex June 25, 2018 at 8:00 am

    Hello! How do I put a value in the fields of this listing мф JS? For example, this does not work

    $jq(‘.gfield_list_2_cell0 :input’).val(start);

    Reply
  16. sandy
    sandy February 27, 2018 at 6:12 pm

    How can I enable the “add” and “remove” buttons to show in the same form for another list field that is not using this script to function?

    Reply
  17. Will
    Will February 22, 2018 at 11:39 am

    Is there a way to just indicate the number of list field rows that should be shown upon page load? My form will not have another field to indicate the number of rows required… I just need to show a minimum number of them for aesthetic purposes.

    I don’t need/ wouldn’t want them to be required fields.

    Just need say five rows to be shown on page-load, and allow the user to add more using the add another row icon.

    Reply
    1. KO
      KO October 8, 2020 at 7:40 pm

      Out looking for this again…anyone have a snippet that will target a list field and allow me to set the number of rows?

      I could use the snippet above, or a perk, but having a hidden field in a form with a default value just to set the number of rows seems a bit bloated.

      Any help is appreciated!

    2. Samuel Bassah
      Samuel Bassah Staff October 9, 2020 at 7:40 am

      Hi KO,

      Unfortunately, we do not have a solution for this, aside from using a hidden field with a default value. However, I would think with some customization of the snippet above you should be able to achieve what you want.

      Best,

    3. Kevin ONeill
      Kevin ONeill October 9, 2020 at 3:24 pm

      This seems to work. If anyone has a better solution, please share! Hope it can help someone else.

      Add the snippet in the link below to the theme’s function.php:

      http://snippi.com/s/uofoa8a

      NOTE: Be sure to add the class “GWListFixedRows” to the field.

      TO REMOVE “+” “-“ buttons add the following CSS:


      field_X_XXX .gfield_list_icons { display: none; }

    4. Kevin ONeill
      Kevin ONeill October 9, 2020 at 3:27 pm

      EDIT: Left the hash off of the CSS ID. It should be:

      field_X_XXX .gfield_list_icons { display: none; }

  18. Fabio Carraro
    Fabio Carraro January 15, 2018 at 2:06 am

    Hello! amazing snippet! Is it possible to add a droplist field int the list? An example: I sell sportwear Jersey. I’d like let the user set the quantity and generate the following list field rows: [Player number] [Player Name] [Size*]

    • I’d like to have the Size a droplist field.

    Thank you!

    Reply
  19. Mellisa Hattingh
    Mellisa Hattingh December 1, 2017 at 4:21 am

    This is really great. I want to however have the first 4 items as one price and then once u get to quantity 5 or more, it starts adding in increments. Would you know how?

    Reply
  20. Sandy Katch
    Sandy Katch November 28, 2017 at 1:23 pm

    This is an awesome snippet. I want to apply this to more than one list field in my form. How can I include multiple list field ids for this?

    Reply
  21. Vlad
    Vlad October 8, 2017 at 7:05 am

    Hi David,

    Awesome snippet you have here!

    It works well for me, but the problem is that even if I set the min/max for the number input, people are still able to type in any number they went before submission, and if they add 5000 let’s say, the form will then automatically produce 5000 lines… this would take 30-50 sec for my pc to process, on other computers it could take longer or even freeze the browser…

    So is there anyway I could limit the number of rows? For instance, the list would only create 400 rows, no more, even if people type 5000 in the number field…

    Let me know what you think. Thank you!!

    Reply
    1. David Smith
      David Smith Staff October 28, 2017 at 9:23 am

      This is a good point. We don’t have any plans for adding support for this to this snippet version but we’ll definitely get it added to the plugin version (which is available by request to our Gravity Perks users.

  22. ian
    ian May 17, 2017 at 7:42 am

    Hi David,

    First off, this is a great snippet and one that’s really helped me out – so thank you!

    However, I have an issue :-(

    When I implement the script, I get the dreaded: Warning: Cannot modify header information – headers already sent by

    Looking at the line in the error, it seems to be from the styles. If I remove that, it then errors again on the closing script tag (line 123)

    I’ve tried two methods to implement this: 1) Directly in the function file and removing the opening <?php tag as per your trouble shooting 2) Setting it as a stand alone file and called in via the functions file

    Any help to fix this would be ace!

    Thanks in advanced

    Reply
    1. David Smith
      David Smith Staff May 17, 2017 at 10:22 am

      Hi Ian, this might be a theme/plugin conflict. Are you using WC GF Product Add-ons? If so, it calls the gform_pre_render filter much earlier than expected which is probably what is causing this issue.

      I recommend picking up a copy of Gravity Perks and getting early access to the GP Auto List Field perk. It is a nicer version of this snippet with a super clean UI.

    2. ian
      ian May 17, 2017 at 10:36 am

      Thanks David

      We are indeed using that plugin :-/

      Not to sound cheeky but is there another workaround without purchasing the Gravity Perks plugin?

      Thanks again

    3. David Smith
      David Smith Staff May 17, 2017 at 12:43 pm

      There are a couple options, both of which are designed to make sure the output_scripts() function is not called before the page is being rendered. The first is to make sure the wp_head action has already been called before outputting the script. The second is to call on the output_script() on a different filter that WC GF Product Add-ons isn’t calling early.

    4. ian
      ian May 17, 2017 at 2:04 pm

      Thanks again David

      I guess calling before wp_head would be the better/easier option?

      Would you happen to know the best approach for this? Appreciate it’s probably above and beyond but any help is much appreciated!

    5. David Smith
      David Smith Staff May 17, 2017 at 5:01 pm

      Hey Ian, if enough people experience this issue, we’ll definitely consider updating the snippet to work with newer versions of WC GF Product Add-ons. In the meantime, our plugin version of this snippet is the way to go. :)

    6. Simon Groves
      Simon Groves May 23, 2017 at 7:45 am

      Hi David,

      I’ve purchased the Gravity Perks plugin but can’t see the GP Auto List Field add-on listed?

      Thanks

  23. Jonathan Dolan
    Jonathan Dolan March 2, 2017 at 12:54 am

    Two questions. 1. Is it possible to make this work with the Drop-Down field type of the Quantity field? Seems to only work if I use the Number field type. 2. If I can only use the Number field type how do I get the up and down arrows to show up like in your example?

    Reply
    1. David Smith
      David Smith Staff March 2, 2017 at 8:04 am

      Hi Jonathan, are you setting numeric values in your Drop Down field? I’m not sure if it would work with this snippet but I can confirm that it works in the GP Auto List Field perk which is available by request to Gravity Perks license holders. If you’d like to take it for a spin, pick up a copy of Gravity Perks and drop us a line via support.

    2. David Smith
      David Smith Staff March 2, 2017 at 6:05 pm

      I believe that is just a matter of enabling HTML5 output on the Gravity Forms settings page.

  24. Vayu
    Vayu October 20, 2016 at 6:31 am

    Hi, thanks for this great script! I was just wondering if there is news about the updated script, regarding the jQuery error, Syrehn also mentioned in a previous comment? Thanks

    Reply
    1. David Smith
      David Smith Staff October 30, 2016 at 11:16 pm

      Hi Vayu, we decided to convert this into a perk instead. It’s now available by request for Gravity Perks license holders. If you’d prefer to use the snippet, you can bypass this error by disabling AJAX.

  25. Joe
    Joe September 9, 2016 at 10:20 am

    This is a great option. Similarly though it would be useful to have a merge field option that would offer a count of the rows. This eliminates the need for a user qty field. Instead qty is calculated based on the number of rows.

    To add more complexity and offer the solution I am trying to accomplish I would like to get counts based on the values entered into a column. As your example notes I am gathering information for an activity reservation. Part of the refined data I need is the total number of attendees and the number of attendees under 13 years old.

    Reply
    1. David Smith
      David Smith Staff September 10, 2016 at 9:04 am

      Thanks for the feedback, Joe. This has been a common request. We’re going to tackle it one of these days. :)

  26. CJ
    CJ August 14, 2016 at 7:37 am

    I am trying to limit form entries based on values entered into a number field in each form. For example, this form is used for event registrations and we need to limit entries based on the numbers attending (each school registration is one entry form). If school A is bringing 8 people and school B is bringing 2 people, we need the form to stop allowing entries once it gets to 300.

    This code is not working correctly. The main/only different between the two forms is the entry field is a quantity and the one I would like to use is a number field.

    Reply
  27. Hamza
    Hamza August 2, 2016 at 8:55 pm

    Hello there,

    I have used this snippet in the passed and it worked like a champ. I updated my Theme and forgot to make a backup of my code that I used. I have been trying for the past hour to figure this out but I dont seem to be coming right. Not sure what I am doing wrong.

    Is it possible to help me out?

    My Form:

    http://ciistores.com/qurbani-2016-south-africa/

    My Class:

    // EXAMPLE #2: Single Product Field’s Quantity input as the “input_html_id” new GWAutoListFieldRows( array( ‘form_id’ => 4, ‘list_field_id’ => 13, ‘input_html_id’ => ‘#ginput_quantity_4_12’ ) );

    When I save it, my whole site throws a “internal error message”.

    Thanks in advance.

    Reply
  28. Schott
    Schott July 30, 2016 at 11:05 pm

    Hi, thanks for the code. Is it possible to export this gravity form settings and post a link here to download? I can’t seems to get input_quantity value, thanks.

    Reply
  29. Joe Mallion
    Joe Mallion June 2, 2016 at 6:02 am

    Hi David,

    Great bit of code here as always.

    Is there a way to simply display a minimum number of rows on page load. e.g. 3 rows on page load. User can of course add additional rows if required.

    Thanks for any help you can offer, Joe

    Reply
    1. David Smith
      David Smith Staff June 2, 2016 at 9:02 am

      Hi Joe, with the current snippet the only way to do this is to specify a hidden field as the “input_html_id” parameter and set the default value of this field to “3”.

      The only issue is that this snippet automatically disables the add/remove buttons for each row. To disable this you can remove line 37.

  30. Syrehn
    Syrehn June 1, 2016 at 8:13 pm

    Hey David,

    Thanks for posting this snippet. All I needed was the ability to set a minimum number of rows in the list field so I added a number field and hid it with CSS; works better than nothing. :)

    One thing I did notice is that once activated the snippet is throwing the following error:

    Uncaught ReferenceError: jQuery is not defined

    Removing the snippet removes the error.

    Any suggestions on getting that cleared up. Or maybe… just maybe… you’d post a snippet on how to set minimum rows without having to use a number field. Sort of like the option we have already for “Maximum Fields” (wishful thinking).

    Reply
    1. Syrehn
      Syrehn June 6, 2016 at 5:06 pm

      Hey David,

      Sorry had another question. In theory shouldn’t we be able to comment out line 37 and use css for nth-child to selectively show/hide the + or – for certain rows? Something like :nth-child(-n+4) {display:none;} to hide the selectors for the first 4 rows (assuming we have 5 set rows)?

      I tried testing this and it doesn’t actually work, it hides everything. Is this something to do with how the list field works or how the snippet makes rows load?

      Just curious because it would be awesome to be able to disable the “remove this row” icon on all rows that we are using the snippet to generate (i.e. 5), as well as disable the “add another row” on all rows except the last row we use the snippet to add.

      If we could get something like this to work it would mean that users could add more rows and remove rows those rose but never remove more than we initially set with the hidden field.

    2. David Smith
      David Smith Staff June 6, 2016 at 5:28 pm

      I see the issue with the jQuery is caused by the code not taking AJAX-enabled forms into consideration. This snippet is going to receive a rewrite at some point so I am going to hold off on addressing this until that time.

      You should be able to hide specific rows with CSS. Here’s an example for hiding the 3rd row: .gfield_list_group:nth-child(3) td.gfield_list_icons { display: none }

    3. Syrehn
      Syrehn June 9, 2016 at 3:20 pm

      Hi David,

      Awesome to hear that the snippet will be getting an update at some point. It’s incredibly useful!

      Thanks for posting your CSS, I went back and looked and discovered that I had written it wrong (put the :nth-child in the wrong spot, derp). Working like a charm now. Users can effectively add more rows and remove them but they can’t remove more than the 5 I pre-defined with the snippet. :)

  31. Damian
    Damian March 13, 2016 at 11:45 am

    Hey,

    Thank you very much for the code, works great! I have one issue, I am trying to dynamically pull all product fields from the gravity form and list the fields inside a foreach loop. For the most part this works but it seems to instantiate the listfield ids depending on how many there are on the page. Im assuming this is because the class is being declared inside a foreach loop and it outputs the javascript each time? Below is the code I am using, any help would be great!

    http://pastie.org/private/z6cgaiamfipnmfrw2epq

    Damian

    Reply
  32. James Dunn
    James Dunn February 25, 2016 at 10:06 pm

    Thanks David for this outstandingly useful snippet of code. I’m coding a golf registration site for a local non-profit radio station and this was perfect for use in numerous areas. I had one form where the team leader could register their team and then choose to send an email out to the other team members telling them to register themselves with their team. Last year, I just used some logic to show up from one to three email fields and then used those to send a form email.

    This year, the new radio station manager wanted to make those emails a little more personal, so I needed to gather the people’s names as well as their email address. So, I figured a list field. But, I needed to have one less than the number of people in their team – they can register a team with less than four and accept others from our registrants. So, if they had three people registering with their team, the leader needed to send out two emails.

    That would have worked great with your previously mentioned modification, but that wouldn’t work here because I was also using the snippet in six or seven other list fields.

    So what did I do? I created a hidden calculated field that took one away from the number in their team and used that field to feed the snippet rather than the actual dropdown. Worked like a charm.

    BTW, thanks David for your help on this tournament last year. That code you wrote that allowed them to choose their team name from a dynamically populated dropdown is working great again this year.

    Cheers mate.

    James

    Reply
    1. David Smith
      David Smith Staff March 8, 2016 at 10:35 pm

      Awesome, James! Glad I could help. The easiest way to do this is to create to “versions” of the class. You can give the class a different name for your modified version that will handle subtracting one from the count. And then keep the original version for other list fields.

  33. Tom Whitaker
    Tom Whitaker February 24, 2016 at 12:25 pm

    Hey David,

    Thank you for this snippet and the whole perks offering. I use them a lot. I had a question….Is there a (relatively) easy way to dynamically populate one column of a list field with some values from checkboxes earlier selected. For example, if I select 4 checkboxes, 4 rows in the list field are created and the checkbox values inserted into column 1?

    Reply
    1. James Dunn
      James Dunn March 8, 2016 at 10:57 pm

      Tom, take it from me – it’s worth EVERY penny you will pay David. I hired him last you to help me solve something specific that I needed. He already had a variant of the code that he was sharing, but I just couldn’t get it through my head how to make it work in my situation. I paid him gladly and in a matter of hours, he had it working for me, he had me a video explaining how I could modify it for future use, and I’ve now reused it on several other forms for the same client. Paying him to help was a super smart move that made me look good to my client. :)

  34. Lawrence
    Lawrence January 5, 2016 at 9:08 pm

    Hi, is it possible to use two instances of the array on one form

    new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_22’ ) );

    new GWAutoListFieldRows ( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_24’ ) );

    Tried doing this, but the second does not seem to work

    URL in website link

    Reply
    1. Lawrence
      Lawrence January 6, 2016 at 3:11 am

      Current config options are:

      new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_22’ ) );

      new GWAutoListFieldRows ( array( ‘form_id’ => 8, ‘list_field_id’ => 28, ‘input_html_id’ => ‘#input_8_27’ ) );

      Need both to work on one form – no dice.

      Btw, thank you for your work on this.

    2. David Smith
      David Smith Staff March 14, 2016 at 8:34 pm

      Hi Lawrence, you can use two stances but the list fields would need to be different. You can use GP Copy Cat to copy the quantity from both fields to a single field so that both fields can effectively update the same list field. Whichever field is modified last will take precedence.

  35. Harry
    Harry December 22, 2015 at 1:51 pm

    Does this work with latest versions? I installed into child theme functions.php and when 2, 3, or 4 is entered into the Gforms qty box the additional list items do not drop down. Am I required to have an html input field? Please advise?

    Reply
    1. David Smith
      David Smith Staff December 23, 2015 at 7:33 am

      Hi Harry, the demo is running the latest version of Gravity Forms and appears to be working fine. Yes, you will need the “input_html_id” parameter. It will be the HTML id of whatever input should trigger the row count to change. In the example above it is the ID of the Quantity input.

  36. Martin
    Martin October 27, 2015 at 11:25 am

    After numerous google searches and trawling the eventual results for a solution to my problem, this snippet seems to do pretty much exactly what i want, which is great!

    What I’m trying to achieve is to have dynamic entry fields so users can personalise their desired product, as the idea is for them to be able to order any number of any given product and be able to personalise each of them with something different.

    Therefore is there a way to make the list fields required and also to limit the number of characters a user can enter into these fields?

    Thanks for the great snippet, and any help would greatly appreciated!

    Reply
  37. Ryan
    Ryan October 21, 2015 at 8:58 pm

    Hi David, me again!

    So, the last time I posted I was having problems with a jQuery conflict. I fixed that and all was right with the world.

    Recently my client decided they would rather the purchase order I’m using Gravity Forms for to be able to be added to a shopping cart, so I’ve got the Gravity Forms addon for WooCommerce. I read a comment here about this snippet not working with the WooCommerce quantity field – not sure if that was the only issue with this snippet. I’m not using the WooCommerce quantity field, I’m using the GF quantity field. I actually just installed the WooCommerce addon, and chose the previous form that was working properly as the WooCommerce product. Now, the form displays fine but the list rows do not auto-populate. Looks like the functions are not being called any longer. Do I need to place this script somewhere other than functions.php or modify it in some way?

    Working without WooCommerce: http://andersonscustard.com/testing/

    Not working as a WooCommerce product: http://andersonscustard.com/product/boxed-bagged-lunches/

    Any tips are appreciated!

    Thanks,

    Ryan

    Reply
    1. Ryan
      Ryan October 21, 2015 at 9:14 pm

      I’m an idiot… nevermind. I duplicated the form for testing and forgot to add a new class!!! :) thanks for a great snippet

  38. Jennifer
    Jennifer September 27, 2015 at 5:14 pm

    Hi David,

    Thanks so much for this post! It’s exactly what I’ve been searching for as I am selling tickets/subscriptions that require usernames similar to your original test case.

    However, in my case having an email entered in EACH list row is mandatory so I need each row to be required. You mentioned in your post that you might be able to come up with a way to do this… would you be willing to post that code to require each row?

    Thanks so much!

    Reply
  39. Ryan
    Ryan September 19, 2015 at 4:11 pm

    Doesn’t appear to be working for me, but I may have something wrong. I replaced the proper fields for the list ID, #ginput ID, and form ID. The option to add new rows for the user disappears as it should, but entering a value into the Single Product Name Quantity field does not auto-populate any rows.

    The code was added from the downloaded code snippet, after watching the video on installation – all done correctly.

    http://andersonscustard.com/824-2/

    password: Coner52

    any ideas? if this would work, it would be PERFECT for what I’m building! thanks!

    Reply
    1. Ryan
      Ryan September 19, 2015 at 7:35 pm

      Thank you David! I noticed that as well – I am inheriting this website from a developer that stopped work. Any hints as to what you think may be causing this conflict? I’ve deactivated all plugins installed and am not finding a solution.

      I did notice that Gravity Forms is referencing a newer version of JQuery than my theme. Think an update to the theme JQuery may do it?

      Cheers!

    2. David Smith
      David Smith Staff September 19, 2015 at 7:39 pm

      If you’ve already deactivated all other plugins it is most likely a theme issue. You can step through the files of the theme and try disabling them until the error goes away to help pinpoint which file is generating the error. As a first step though, I would just set the theme to a WP default theme to confirm the issue is originating in the current theme.

    3. Ryan
      Ryan September 19, 2015 at 8:06 pm

      I found it! There was some sticky nav script being called in the functions.php file, yet the site doesn’t even use it. I just commented it out for now, but the site is exactly as it was before with the added bonus that my plan works now!

      And it also fixed a problem where the Product Total was not calculating at all, it was always at $0. 2 birds, one stone! I appreciate the help.

  40. Tell
    Tell September 2, 2015 at 3:09 pm

    I have this snippet installed and I thought everything was working perfectly. You change the quantity of the product and it changes the list number. The issue that I’m having is that when I enter the address fields at the top it hides my list fields completely. Did I do something wrong installing the snippet or is this something I need to contact gravity forms about trouble shooting?

    Reply
    1. Tell
      Tell September 2, 2015 at 3:12 pm

      So sorry. Disregard all of this. I had conditional logic enabled for some reason.

      Thanks for the awesome snippet.

  41. Ramy
    Ramy August 17, 2015 at 3:54 pm

    Hi David, I have two list fields, can this snippet be configured to update the number of rows for both fields? I currently have it setup for one field.

    Ramy

    Reply
  42. Rodney Stauffer
    Rodney Stauffer August 13, 2015 at 5:08 pm

    I have a form on this site http://cmhigh.com/pullorder/ that automatically has 10 rows created from a hidden field. My problem is if a user forgets to enter one of the required fields when clicking submit, it will revert back to the first 10 rows, even if the user had manually added more rows.

    Reply
    1. David Smith
      David Smith Staff August 20, 2015 at 8:46 am

      By default, this snippet hides the plus/minus buttons so the use case you’ve described is not addressed. If you’d like to commission support for this, get in touch.

  43. Valérie
    Valérie July 22, 2015 at 8:12 am

    Hi David,

    First, many thanks for this website, I had several forms to do and it has been really useful for me. This morning, I find this snippet and I succeeded to do what I want, I have associated with Gravity Forms – List Field Select Drop Down in my list field.

    It seems to work well but when I receive the administrator notification, there is no data with the shortcode {all_fields}.

    I’ve tried using the specific shortcode of my field but it’s the same.

    Have you got an idea of what happens ?

    I’m testing the form at this url : http://comitedesfetesdesmanoreys.fr/fete-du-pays/formulaire-dinscription-fete-du-pays/

    Thanks for your help.

    Valérie

    Reply
    1. David Smith
      David Smith Staff July 23, 2015 at 9:15 am

      Hi Valerie, I’m not able to recreate the issue. Here is the notification with the {all_fields} merge tag from the demo (screenshot). Try disabling all other plugins and see if there is something conflicting.

    2. Valérie
      Valérie July 23, 2015 at 12:50 pm

      Hi David,

      Thanks for your help. I’ve tried to disable all my plugins and it’s always the same.

      So to try to understand what was happening, I’ve made a new installation of wordpress and I’ve tested just list field and it works normally. After, I’ve installed my snippets in functions.php and the problem appeared again, so I’ve reinstalled only what I need really and it works.

      Valérie

  44. Masoud Ahmadzada
    Masoud Ahmadzada July 8, 2015 at 5:37 pm

    Hello, I was wondering if you could help me underatand PHP better from the code above. There is a call to output_script, which is done inside of the prerender function, and the prerender is attached to the add_filter for gform_pre_render.

    The output_script function contains javascript code without being echoed or placed inside of a string.

    I ran a test script to see what this would do:

    Hello World

    with and without the function call to HelloWorld(); The html is only output if HelloWorld is called.

    Why is that not a PHP error? It looks like the html code is ignored, but when wrapped in a function is output only when the function is called. It looks like it is ignoring the text placed outside of the template tags.

    So now that I know that it just outputs the javascript code inline whereever the function is called in the PHP code, it is not obvious to me why that would be executed within a gform_pre_render. How do you know that the gform_pre_render code (output_script javascript code) will output at all in the body of the html document without looking at the context, ie. the gravity forms source code. and what the source intends to do with the raw vanilla javascript. Couldn’t the script be output with the register_init_script hook as well?

    In looking at the register_init_script hook, it seems that it uses the script placed inside of the string and passed off to the GFFormDisplay::add_init_script call.

    Thanks for your help, Masoud

    Reply
    1. David Smith
      David Smith Staff July 8, 2015 at 8:16 pm

      Hi Masoud,

      Where the script is output is at least in some part personal preference. By using the gform_pre_render as the hook that then triggers the output_script() method, I know the script will always be output immediately before the form content.

      The gform_pre_render filter will always be called before the form is output because Gravity Forms calls this filter before outputting any form.

      The reason I am about to output the script directly to the page without echoing it or capturing it in a string is because in the function, I exit PHP with a closing PHP tag: ?>. Anything after this tag will be interpreted as raw output and be output to the page immediately.

      At the end of the function, I re-enter PHP with an opening <?php tag.

      Does this help? Happy to expound on any point. :)

    1. Soso
      Soso July 6, 2015 at 1:11 pm

      Thank you David for your time and support, it was really useful.

      One more thing, do you know or can you provide any information about age calculation, is it possible to calculate age using data picker?

      Thank you in advance

    2. David Smith
      David Smith Staff July 6, 2015 at 8:32 pm

      Hi Soso, I have a perk that handles this very well. It’s called GP Date Time Calculator. If you pick up a copy of Gravity Perks, just ping me on support for a copy.

  45. Pete Johnston
    Pete Johnston June 10, 2015 at 12:57 am

    Hi David,

    Almost the snippet I’m looking for. I’d like to keep the field repeatable, but set it up so that it initially displays \maybe 10-12 rows. (That should be enough for most of my customers.) I see that I can use a hidden field to set the number of initial rows, but how do I modify so that the + and – buttons stay and the user can add more fields if necessary?

    Reply
    1. Pete Johnston
      Pete Johnston June 10, 2015 at 5:51 pm

      Thanks, David. I managed to figure that out this morning when I got around to looking at page 2 of the comments!

  46. Ken Kramer
    Ken Kramer April 29, 2015 at 10:26 am

    Just found out about your site for Gravity Forms Support…you have exactly what I am looking for!! One thing I don’t know what to setup is the $input_html_id properly.

    I understand everything else so far.

    Ken

    Reply
    1. Ken Kramer
      Ken Kramer April 29, 2015 at 10:47 am

      Okay, I used my brain a little more and was able to understand what you were referring to and got the code snippet working PERFECTLY!!!

      Great Piece of code!!!

  47. Tony Klein
    Tony Klein March 31, 2015 at 6:21 pm

    Is it possible to modify this snippet or create a list field and have the default amount of list fields be like 3, without relying on another field?

    Reply
    1. David Smith
      David Smith Staff March 31, 2015 at 8:15 pm

      Hi Tony, one thing that might work is to simply use a hidden field with a default value of 3 for ‘input_html_id’ property.

  48. Tony Klein
    Tony Klein March 16, 2015 at 10:03 am

    Hey this is awesome! One question: is there a way to do this without relying on another field for the input.

    So I just want to set a minimum of 3 list fields without relying on someone selecting 3, or inputting 3 into another box I want the form to start with 3 list fields. I’ve looked around the web and this is the closest thing I can find to something similar. Unfortunately I’m not good enough with php to hack together what I need from your snippet!

    Reply
    1. David Smith
      David Smith Staff August 4, 2015 at 7:35 pm

      Hi Tony, your comment got lost. Sorry about that. You can try adding a Hidden input to the form with the number of rows you want. It still relies on another field; however, this fact is obfuscated from the user.

  49. Grace
    Grace March 13, 2015 at 10:57 am

    Hi David,

    Thanks for this great snippet. I would love to use it but my situation is slightly different from the examples and I’m not sure how to change it (or if I can).

    On my website the “list row” only appears if there is a quantity set to at least 2 (explanation : if the quantity is set to 1, then it’s a simple contact form. when it’s set to 2 or more, an “additional guest(s) info” list row appears). I would like the number of rows to increase automatically, but it means that for a quantity set to 3, I would only need 2 rows, for 4 : 3 rows, and so on…

    Can I do this with your snippet, and what exactly should I edit in it in order to achieve that ?

    My second question : I would like to add this snippet on all my forms (about 20 of them). Is there a quick and easy way to do that (‘form_id’ => all ??) or do I have to add a snippet for each form with a different form_id each time?

    Thanks in advance, Grace

    Reply
  50. Kuldeep Singh
    Kuldeep Singh January 28, 2015 at 1:43 am

    I am a newby. Could you please explain where to add the bottom part (example part) of the snippet? I am having hard time to figure out the the $list_field_id, and the HTML id of your input as the $input_html_id property. Thanks.

    Reply
    1. David Smith
      David Smith Staff January 28, 2015 at 9:15 am

      Sure think, Kuldeep. You’ll see the “EXAMPLE #1” and “EXAMPLE #2” at the bottom. You only need one of these. Remove the other. On the remaining example, you will…

      1. Update the form_id to the ID of the form that contains your List field.
      2. Update the list_field_id to the ID of the List field on your form. You can find this by hovering over the List field in the form editor (example).
      3. Update the input_html_id to the HTML ID of the field whose value should control how many List field rows are added. The HTML ID will follow this template: #input_{form_id}_{field_id}.

      Does this help?

  51. Laura Hartwig
    Laura Hartwig December 22, 2014 at 5:38 pm

    Hi David, First, thanks for all the great info on this site. I’m wondering if you have an idea on how to fix my problem. I have an event form, very much like the one used in this demo, but instead of just name and email, I need to gather a lot of other data about the extra attendees too, like job title, phone, etc. The problem is that I can’t get GF to wrap this info onto the next line and all the fields are getting squished together in that one line. Any idea how I can get them to wrap, or a better way to handle these fields? Thanks so much for any advice you can give me!

    Reply
    1. David Smith
      David Smith Staff December 22, 2014 at 8:14 pm

      Hi Laura, glad you’re finding Gravity Wiz to be a useful resource. It is possible to customize the output of the List field inputs; however, it isn’t super straightforward. There is the gform_column_input_content hook that will allow you to modify the markup of the individual inputs but they’d still be output in the table-based markup which makes styling the List field with CSS very difficult.

      The more comprehensive (and more laborious) hook is the gform_field_content filter. This will allow you to basically rewrite ALL of the markup of the list field.

      Unfortunately, this isn’t a simple solution and will require some trial and error to get right.

  52. Michael Murphy
    Michael Murphy December 8, 2014 at 2:21 pm

    Is it possible to see the which example was used for the demo? I’m not the best sleuth, but it seems like neither of the two included examples were used in constructing the demo.

    If I could align the examples with the demo page, I could work backward and figure out where I’m going wrong. Thanks!

    Reply
  53. Simon Guilliard
    Simon Guilliard October 3, 2014 at 9:39 am

    Is there any way of changing the format of one of the columns to a date field?

    For example, if in example shown a date of birth were required, what would be best way of changing this?

    Reply
  54. John
    John September 3, 2014 at 7:30 pm

    Thanks David.

    Looking at the screencast again. Yeah it isn’t exactly embedding the child form’s fields directly to the parent form. Some queries: 1. Is it possible to tweak your nested forms plugin so that the inputs are directly embedded? Looks like it allows child form to be filled on pop up after clicking a button. Clearly, the entries are then shown in a table within the parent form.

    1. Say one of the child forms had 30-40 quantity input fields then the parent form will show 30-40 columns based entries right?

    2. Any possibility of rearranging the child form entries within the parent form in a grid format. Would like a grid format of child form entries before the parent form submission stage and after in the final parent form entry view.

    Reply
  55. John
    John August 30, 2014 at 6:18 am

    Hi David,

    Great thanks for this, fantastic feature. I was wondering how one can remove the default add and remove icon button from the list field? The field and column headings are not aligned as this does not need the icons.

    The demo does not seem to have the icons and columns and input fields are aligned. How did you achieve this?

    Thanks.

    Reply
    1. David Smith
      David Smith Staff August 31, 2014 at 1:14 pm

      Hi John, this should be automatically handled by the snippet. Do you have a URL where I could view your implementation of this snippet? I can pinpoint why it isn’t working.

    2. John
      John August 31, 2014 at 5:52 pm

      Hi David,

      Ah yes sorry saw the CSS display: none line after posting my comment.

      More specifically I wanted to get this solved with the Gravity Forms list field: http://stackoverflow.com/questions/25591645/duplicate-nested-form-or-fields-based-on-a-number-with-gravity-forms

      Please let me know how that is possible. I do not have a published URL for the form yet. I believe the the nested form field/feature can do this better instead of the list field? But would need to replicate the nested form based on a number entered, like your demo here. Probably need some clever JS and your handy nested form feature. Please let me know if you still have this. I’m willing to purchase the feature and would greatly appreciate your support on implementing the above.

    3. David Smith
      David Smith Staff September 2, 2014 at 12:31 pm

      It sounds like what you’re wanting to do is “embed” the nested form into the “parent” form. This is not currently possible and presents a number of complications. Gravity Forms will eventually release a field group repeater but until then, the modal nested form approach is the only solution I have.

    4. John
      John September 2, 2014 at 7:51 pm

      Hi David,

      Yeah but your “GP Nested Form” plugin seems to do that right, that is if nesting = embedding? http://www.screencast.com/t/p7sAHutMVfG

      If I replicate a nested form (in the parent form) for the times specified in a number field then I can achieve what I want right? Please let me know if you can provide this. Is the GP Nested Form ready for public now? I could try to use that. Appreciate your helpful responses.

    5. David Smith
      David Smith Staff September 3, 2014 at 12:01 pm

      Yes, the “modal nested forms approach” is the GP Nested Forms plugin. It is available by request for Gravity Perks license-holders. If you’d like to give it a shot, pick up a copy of Gravity Perks and use the support form to request a copy of the latest GP Nested Forms beta.

    6. John
      John September 3, 2014 at 7:31 pm

      Sorry please delete my earlier comment. Thanks David.

      Looking at the screencast again. Yeah it isn’t exactly embedding the child form’s fields directly to the parent form. Some queries:

      1. Is it possible to tweak your nested forms plugin so that the inputs are directly embedded? Looks like it allows child form to be filled on pop up after clicking a button. Clearly, the entries are then shown in a table within the parent form.

      2. Say one of the child forms had 30-40 quantity input fields then the parent form will show 30-40 columns based entries right?

      3. Any possibility of rearranging the child form entries within the parent form in a grid format. Would like a grid format of child form entries before the parent form submission stage and after in the final parent form entry view.

    7. David Smith
      David Smith Staff September 4, 2014 at 11:41 am

      Hi John,

      In regards to embedding the form directly into the parent form, this is not currently possible and presents a number of complications. Gravity Forms will eventually release a field group repeater but until then, the modal nested form approach is the only solution I have.

      The parent form will only show the field data that have been configured to display in the field settings for the Nested Form field. You can opt to show all the fields from the Nested Form; however, this will not look great. Also to be clear, the field input is not shown on the parent form, only the data submitted for that field from the child entry.

      I do have plans to make the Nested Form field output templatable so you could configure how everything displays. For the time being, this is not possible.

      The best way for you to get familiar with what this plugin can do for you is to give it a shot. I’m happy to offer you a 30 day refund so you can give it a try and see if it will work for you. :)

  56. eaglejohn
    eaglejohn July 4, 2014 at 9:14 am

    Suddenly there are some weird things happening to my form and I think it has something to do with this snippet. All the output of the fields before the field using this snippet do not appear in the confirmation e-mail.

    I’m also using this plugin (http://wordpress.org/support/topic/not-all-fields-show-up-in-conformation-mail?replies=1#post-5756259) to add placeholders to my fields. It think that a combination of this snippet and the plugin is causing problems, but I’m not sure.

    The form is located here: http://www.klassenverhaal.nl/bestellen/

    Any suggestions?

    Reply
  57. Jay
    Jay June 9, 2014 at 4:58 pm

    Hello,

    I followed the instructions for everything, like removing the extra <?php and changing the form_id along with the list_field_id, yet nothing new seems to have appeared. Or no new feature anyways.

    Am I forgetting something?

    Reply
    1. Jay
      Jay June 9, 2014 at 5:29 pm

      Hi,

      I don’t quite understand what the html_id is. I got the other 2 but I’m clueless on the html_id. Is that the id of the field that is providing amount of rows we want?

      Thanks!

    2. David Smith
      David Smith Staff June 14, 2014 at 8:30 am

      Hi Jay, if you use Firebug or Chrome’s developer tools, you can actually target the quantity/number input and view the “id” attribute. You can then copy and paste that attribute as the value for the “html_id” parameter for this snippet.

    1. David Smith
      David Smith Staff April 10, 2014 at 8:49 am

      Hi Steven, if the max limit were 10 would both list fields be able to have 10 each or do you mean that between the two list fields there could only be a total of 10 rows, so if one list field had four rows the other list field could only have six?

  58. Stephen Barrett
    Stephen Barrett April 7, 2014 at 11:16 am

    Is there a way to set a row limit without using the backend of the form? I want to set the row limit dynamically.

    Reply
    1. Stephen Barrett
      Stephen Barrett April 7, 2014 at 4:35 pm

      So I have two List fields that I want to display to share a max row limit. I got the first one to do it dynamically. The second one (named a different class) is not being registered and both list fields are running from the same class even though I named them two separate classes. Do I also need to change the name of the function?

    2. David Smith
      David Smith Staff April 7, 2014 at 10:07 pm

      Hi Stephen, what do you mean you named them two separate classes? You should just be able to create two instances of the same class. If you look at the bottom of the snippet code, you will see how I’ve created two instances of the class and just pass different parameters for each instance.

  59. Corbin
    Corbin January 22, 2014 at 11:26 am

    I’m just playing around with this solution a bit more, and noticed that if the Quantity field is left empty or set to 0, the List field still shows up. In a scenario where you’re selling different ticket types, I think it would make sense to hide those fields until the user inputs 1 or more inside the Quantity field.

    Any ideas on where to start with that? Unfortunately the default conditional logic doesn’t appear to work with Single Products set to Quantity.

    Thanks again!

    Reply
    1. Corbin
      Corbin January 22, 2014 at 11:39 am

      Looks like I solved the issue. I spoke to Gravity Forms helpdesk and they said that conditional logic is available for separate quantity fields.

      So if you require the List fields to be hidden until something is input, just setup your product field and inside that product field settings set the quantity field to hidden, then add a separate Quantity field (in Pricing Fields), then set the List field to conditional show if Quantity is not null (ie leave value empty). Then just a matter of changing the ‘input_html_id’ in GWAutoListFieldRows().

      Thanks again for this, combined with https://demos.gravitywiz.com/better-pre-submission-confirmation/ this thing purrs like a kitten. Such a great alternative to having to setup a clunky ecommerce plugin.

    1. David Smith
      David Smith Staff January 20, 2014 at 5:50 pm

      Thanks for kind words and pointing out the issue with demo URL. I’ve fixed it to point to the new address.

  60. Peter
    Peter November 19, 2013 at 5:36 am

    Can anyone suggest a way to set a maximum number of rows to display? I’ve twiddled with the code but can’t quite get the desired functionality. If someone enters 100 in my list count field, I would like it to just limit the number of actual rows to be 20.

    Reply
  61. NAQIBULLAH DANISHJO
    NAQIBULLAH DANISHJO October 28, 2013 at 10:03 am

    Hi David, I couldn’t install the code. Do you have a plugin version of this so that I can install easily. Thanks.

    Reply
    1. David Smith
      David Smith Staff November 6, 2013 at 8:37 pm

      Hi Naquibullah, most of these snippets would only require that you add a plugin header and add them to your plugins folder to be run as plugins. You can find an example of a plugin header here: http://codex.wordpress.org/Writing_a_Plugin

      I do have plans to make snippets auto-packable as plugins in the future.

    1. David Smith
      David Smith Staff October 4, 2013 at 11:57 am

      Hi Tanya, try duplicating the code, changing the function name and reference to that function in the filter for the duplicated code, and let me know if/how it breaks. A URL would be awesome. :)

    2. Tanya
      Tanya October 5, 2013 at 5:08 am

      Having read the comments above, I can’t figure out how to get this working for multiple list fields in one form. I have two different list fields in the same form and they are effected by different quantity fields.

    3. David Smith
      David Smith Staff October 5, 2013 at 8:34 am

      Hi Tanya, I’ve completely revamped the snippet to better support applying to multiple forms and multiple fields on multiple forms. Just create a new instance of the class new GWAutoListFieldRows() for each input/list field combo.

  62. Sarah
    Sarah August 21, 2013 at 2:16 am

    This is really awesome, thank you so much for the hard work.

    I’m wondering if it’s possible to adjust this so that I could keep the +/- buttons visible and increase/decrease the quantity field if those are clicked as well?

    Basically so that with the +/- visible the number of list fields still matches the quantity field value at all times.

    Reply
  63. Jared
    Jared August 6, 2013 at 4:37 pm

    Sweet script. Can you think of any reason why the formatting of the email notification for the list field would be inconsistent….seemingly random font and font size changes and different indents in the cells?

    Reply
  64. Yasza
    Yasza August 4, 2013 at 11:41 pm

    Hi Dave,

    I have follow the step but the field didn’t appear in the form. I s there something I should add in the form editor?

    Reply
  65. Ryan
    Ryan July 25, 2013 at 3:26 pm

    Hi Dave,

    Great script. I’m really wondering if you could use this to globally run the update function to any list field in a form? I have a client who wants to ditch Survey Monkey and I figured it’d be no sweat to make their standard survey in GF. However they LOVE having multiple inputs for a question. What I need to do is default the list field to 6 rows.

    Reply
    1. Ryan
      Ryan July 25, 2013 at 3:28 pm

      Actually as a follow up, because I need this form to be able to be duplicated I’d run the pre_render hook to all forms and look for any list field with a specific class. I think that bit of logic would help distinguish which fields I want to be 6 deep. I just can’t seem to get right ID’s or something…

    2. Ryan
      Ryan July 26, 2013 at 2:02 am

      I got it! using this little bit of code to find all the list fields, grab the parent li id and fire the function.

      ** $add_num is the number of rows I want

              $( ".ginput_list" ).each(function( index ) {
                  var par_id = '#'+$(this).closest("li").attr("id");
                  updateListItems($('<?php echo $add_num; ?>'), par_id);
              });
      
    1. David Smith
      David Smith Staff May 11, 2013 at 6:16 pm

      Hi Marc, this snippet only works for List fields. List fields are the only Gravity Form field that are setup to handle multiple “rows” of data from a single field. This means implementing this snippet for other field types will not work.

  66. Cihat
    Cihat January 25, 2013 at 3:47 am

    Great snippet. Thanks.

    I have a strange thing. I give 4 it adds 3, I give 6 it adds 5, always one missing. I’m sure it’s because of my settings because I have something similar with directory addon. It doesn’t list my last entry, so again always one missing. Do you have an idea about that case?

    Reply
  67. Trevor Robertson
    Trevor Robertson December 10, 2012 at 5:44 pm

    Not sure if this is a snippet bug or my bug. Everything works great for me until I submit the form and there are validation errors. If that occurs, the dynamic list field seems to default to 1, no matter what I then change the quantity to.

    http://hearts.creativelogic.biz/tickets/

    Note: “Gala Tickets – Individual” is the field that changes the list field.

    Reply
    1. David Smith
      David Smith Staff December 10, 2012 at 8:47 pm

      Hi Trevor, it doesn’t look like this script is ajax-proof. I will add this to the queue based on how often it is requested.

      If you’d like to see ajax support implemented immediately, get in touch: david@gravitywiz.com

  68. Skye Moroney
    Skye Moroney October 15, 2012 at 3:23 am

    I tried this out using a combo box to make the number of fields dynamic and it worked a treat.

    Added the require-all-columns as well =D now is perfect.

    only trouble I ran into was putting the # in e.g.#input_30_1

    Just wanted to say thanks for an awesome post!

    Reply
    1. David Smith
      David Smith Staff September 18, 2012 at 6:35 pm

      Hi Allan, I don’t believe the list field integrates with the Mail Chimp add-on in such a way. If you give it a shot, let me know.

  69. Chris K
    Chris K August 3, 2012 at 5:57 pm

    This is awesome, and is getting pretty close to something I need badly, which is to allow a user to create an undetermined number of posts from a front end form.  I often use custom post types to customize client sites, and basically I want a way to make each row of of the list field into a custom post type, and potentially make each column cell within the row into a post meta field.

    So as an example, if a user came to a form that let them enter things they had that they wanted to sell, and there were a list field for “phones” that they had to sell, then they could 1) enter the number 3 for how many phones they had to sell, and using this code they would get 3 list field rows, 2) then they enter all the required info in the list field columns (model number, manufacturer, condition, color, etc) and 3) upon submitting the form 3 new posts of the the custom post type “Phones for Sale” would be created (using the custom post type add-on).   I have never quite figured out a good way to do this yet, but I have wanted to do so on at least 4 different projects.  Please let me know if you move in the direction of connecting the list field to post fields or else hacking together repeating groups of post fields.

    Reply
  70. Mark Dayley
    Mark Dayley July 31, 2012 at 12:42 am

    Great Code Snippet David, This was very useful.

    Let me know when you modify the code to make list items required.

    Thanks.

    Reply
  71. Kristin
    Kristin July 2, 2012 at 11:14 am

    I’m trying to use this with WooCommerce (I have the Gravity Forms extension for it). However the Quantity field doesn’t appear to have an id, just a name attribute.

    Reply
    1. David Smith
      David Smith Staff July 31, 2012 at 7:11 am

      Hi Kristin, unfortunately, the WooCommerce quantity field is part of WooCommerce and not part of Gravity Forms. This snippet will not work for that purpose.

  72. Nate
    Nate June 18, 2012 at 2:11 pm

    Can this function be done MULTIPLE times for the same form? or MULTIPLE times for the same site but for different forms with different variables?

    ie. There are two different list fields in the same form and they are effected by different conditional logic fields?

    OR

    There are two different forms on the site and each has it’s own list fields with variables.

    Thanks. Hope this makes sense. (And for some reason I’m not getting notifications when the post is replied to even though I have subscribed…)

    Reply
    1. David Smith
      David Smith Staff June 6, 2012 at 4:06 pm

      Hi Nate, you’ll want to update $input_html_id to this:

      $input_html_id = '#input_6_10';

  73. Nate
    Nate June 5, 2012 at 1:34 pm

    This is very useful. Ideally I’d like to make each input field required. Let me know when that’s possible.

    Thanks David!

    Reply
    1. David Smith
      David Smith Staff June 6, 2012 at 3:09 pm

      Yeah, I figured that would be the next logical direction for this snippet. I will work on a solution and update the snippet. :)

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Download Snippet

Set Number of List Field Rows by Field Value

This field is for validation purposes and should be left unchanged.