Numbering List Field Rows

Automatically number your Gravity Forms List field rows.

To use the CSS, add the ‘gw-number-rows’ class to the List field’s “Custom CSS Class” property.

Read the Walkthrough

Code

Filename: gw-numbering-list-field-rows.css

/**
 * Gravity Wiz // Gravity Forms // Numbering List Field Rows
 * https://gravitywiz.com/numbering-gravity-forms-list-field-rows/
 *
 * Automatically number your Gravity Forms List field rows.
 *
 * To use the CSS, add the 'gw-number-rows' class to the List field's "Custom CSS Class" property.
 */
.gw-number-rows .gfield_list {
	counter-reset: gflistrowcounter;
	margin-left: -2rem;
}

.gw-number-rows .gfield_list_header {
	margin-left: 2rem;
}

.gw-number-rows .gfield_list_group {
	align-items: center;
}

.gw-number-rows .gfield_list_group:before {
	content: counter(gflistrowcounter);
	counter-increment: gflistrowcounter;
}

.gw-number-rows .gfield_list_group:before {
	text-align: right;
	width: 2rem;
	padding-right: 0.5rem;
}

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.