| /** | |
| * Numbering List Field Rows | |
| * http://demos.gravitywiz.com/numbering-gravity-forms-list-field-rows/ | |
| */ | |
| body .gw-number-rows table.gfield_list { | |
| counter-reset: gflistrowcounter; | |
| margin-left: -24px; | |
| } | |
| .gw-number-rows .gfield_list thead tr:before { | |
| content:''; | |
| } | |
| .gw-number-rows .gfield_list tbody tr:before { | |
| content: counter(gflistrowcounter); | |
| counter-increment: gflistrowcounter; | |
| } | |
| .gw-number-rows .gfield_list thead tr:before, .gw-number-rows .gfield_list tbody tr:before { | |
| display: table-cell; | |
| width: 18px; | |
| text-align: right; | |
| padding-right: 6px; | |
| } |
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.
Getting Started
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.
Notes
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!
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.
Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 29+ essential add-ons for Gravity Forms with support you can count on.
Moorey says
July 12, 2018 at 3:30 amWould this work with PDF output?
David Smith says
July 13, 2018 at 11:32 pmUnlikely. You would probably need to include the styles in the PDF generator (assuming it provides a setting for custom CSS).
alper karaman says
November 13, 2017 at 10:43 amHello David, is there any way numbering the entries in gravity view like 1. David (first approved entry) 2. Alper (second) 3. …. (third) 4. ….
David Smith says
November 13, 2017 at 11:51 amHi Alper, this solution does not apply to Gravity View. I’d ping their support to see if there’s an existing solution.
alper says
November 9, 2017 at 4:09 amhello david,
is there any way to add numbering the table rows field 1 to end 1. asd 2. dfd 3. fdf 4. fgdf …
David Smith says
November 13, 2017 at 8:53 amI’m not sure I understand?
Andy Daum says
April 7, 2016 at 3:07 amDear David,
Thank you so much for all the material you create.
I’m having a small issue with this snippet. Namely, I can’t get the numbers to increase sequentially. It’s just 1,1,1,1,1,1.
I thought might be to do with the fact I have this plugin https://wordpress.org/plugins/gravity-forms-list-field-select-drop-down/ installed and was using in the relevant list field. However, I removed the dropdown, deactivated the plugin, and got the same result.
I’ve put images of all this in this public Doc: https://docs.google.com/document/d/10f25t9NHRMq5pgawN_u9iOfX0hCkh0UXKOnefDCVCns/pub
I hope I’ve not made any silly errors here, and apologies if so. I would really appreciate your advice!
Thank you very much. Best, A.
David Smith says
April 7, 2016 at 10:20 amDo you have a URL where I could view the form?
Daniel Bishop says
October 9, 2015 at 7:14 pmThanks so much for this snippet! It adds a nice bit of polish to a form I’m building.
David Smith says
October 10, 2015 at 8:44 amOur pleasure, Daniel. Glad you enjoyed it.
flo says
April 20, 2015 at 10:08 amHi, can I display the total number of rows with a merge tag in another field?
David Smith says
April 20, 2015 at 7:10 pmHey Flo, I don’t have a solution for this right now. :/
Lars says
April 7, 2015 at 4:23 pmHi David,
Would it be possible to have a list field with two columns and then populate the first column with numbers same way as the above snippet does, but inside the input field instead?
I’m new to GF and what a great ressource this site is!
David Smith says
April 7, 2015 at 7:41 pmHi Lars, glad you’re finding the site useful. Unfortunately, I don’t have a ready solution for populating the number into one of the columns of the List field.
Lars says
April 8, 2015 at 2:48 amHi David,
Thanks for the prompt response. I actually thought that it was a pretty simple thing to do using “dynamic population” one way or the other, and that the solution above was of the more advanced type.
As an alternative, using the above solution, are the numbers for each row then included in any submission of the form?
David Smith says
April 8, 2015 at 7:25 amHi Lars, it is possible to dynamically populate the List field inputs. If you ping Gravity Forms Support they’ll be able to provide instructions on how you might do that.
The issue, I suspect, is that when you dynamically populate a List field, it adds the rows automatically. If you want the number to be dynamically generated when a new list field is added, dynamic population probably won’t work.
Lars says
April 10, 2015 at 11:34 amRight ok, well I managed to get a slution working with a little help from a developer and jQuery.
It’s perhaps not perfect, but gets the job done.
http://wpquestions.com/question/showChrono/id/10751
Thanks for the help.
David Smith says
April 11, 2015 at 11:33 amMy pleasure, Lars, and thank you for sharing back! :)
Adlan Khalidi says
March 10, 2015 at 11:34 pmHi. I’m doing a list of item using Gravity Form.
In the end of the list or after the list, I want to display the number of rows that user has created.
E.g. – item A – item B – item C – –
(the last 2 has no item, so don’t need to calculate)
Total number :[ 3 ] <- a text field with specific class but user cannot change/disabled)
Do you know how I can achieve this?
Thanks
David Smith says
March 11, 2015 at 11:17 pmHi Adlan, do you have a visual of what you’re trying to achieve?
Catharine says
February 26, 2015 at 11:01 amThanks for the link David! Do you still do commissions for features? If so, I was wondering how much you would quote for the list field conditional logic thing.
Regards, Catharine
David Smith says
March 11, 2015 at 11:14 pmHi Catherine, I sent you an email on Feb 26. Let me know if you did not receive it.
Catharine says
March 12, 2015 at 6:05 amHi David,
I sent you a reply to your email on the 26 Feb, at 16:37 – just assumed you were catching up on a backlog or something! Let me know if you can’t find it and I’ll resend it.
Thanks, Catharine
David Smith says
March 12, 2015 at 9:32 amHi Catharine, yeah, not seeing your reply. I just replied again in the same thread. If you’d like to reply again and confirm here, I’ll make sure I got it.
Catharine says
March 12, 2015 at 10:18 amHi David, I just sent you the email again (to your david@gravitywiz.com account).
Thanks, Catharine
Catharine says
February 25, 2015 at 12:35 pmHi David,
Cool snippet! As an aside though, how did you configure that list field so that only the first two columns were required? And also, I understand that at present, you can’t use the inputs within a list field in conditional logic for other fields. Do you have or are you planning to bring out a perk to get around this?
Thanks, Catharine
David Smith says
February 25, 2015 at 10:39 pmHi Catharine, here is an article which provides a method for requiring all or specific columns of a List field:
https://gravitywiz.com/require-all-columns-of-list-field/
I do not currently have plans for List-field-based conditional logic.