May 16, 2023: Improved styling and removed support for versions less than GF 2.5.
Here’s a quick bit of CSS that will automatically number your Gravity Forms List field rows. It does this using CSS psuedo elements within each row to add a “number” column.
To install this snippet, copy and paste the CSS code to your theme’s style.css file. Then on any List field for which you would like to number the rows, just add the
gw-number-rows class to the field’s “CSS Class Name” setting.
This will work in all modern browsers and IE9+. Depending on your site’s styles, you may need to adjust the margin and width set in the CSS snippet. Experiment!
Gravity Forms Auto List Field auto-syncs the number of rows in a List field with a Number or Quantity field value. It can also count the number of List field rows and use that value in Gravity Forms List field calculations!
For example, selling tickets to an event? As you input the number of people attending, corresponding List field rows will automatically appear on your form as the number of people entered increases, allowing you to easily add ticket holders’ names and emails.
Was this helpful?
If this helped you, let us know in comments! If you use this in the wild, share a link so we can see what you’ve done with it.