Gravity Forms Numbered Fields

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.

/**
 * 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;
}