GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

Jurriaan Koops

Using CSS list in Gravity Forms field description

· ·

Do you want to use a CSS list in your Gravity Forms description? That can come in handy, but it doesn’t look very nice if the Gravity Forms CSS is enabled.

Download Gravity Forms
  1. How to add a list to a Gravity Form field description with html
  2. Styling the list in the Gravity Form field description with CSS
DEMO

Example of a nicely styled list in a Gravity Form Field description

Let’s take this list:
  • Check if this is done;
  • Check if that is done;
  • And finally check if everything is done.
This is how it looks after applying this tutorial:

How to add a list to a Gravity Form field description with html

Add the following html code to the field description field in your Gravity Form.
<ul> 
<li>Check if this is done;</li>
<li>Check if that is done;</li> 
<li>And finally check if everything is done.</li> 
</ul>

Styling the list in the Gravity Form field description with CSS

Add the following CSS code to your theme file or to the page where the Gravity Form is loaded:
.gfield_description li:before {
    content: &quot;✓&quot; !important;
    margin-left: -20px !important;
    margin-right: 10px !important;
}
Note that you can change the “✓” symbol for anything you like. Check http://htmlarrows.com/symbols/ for other symbols to use. Just copy the symbol and replace it after ‘content:’. Note that you maybe have to change the margins to reach perfection, especially when you have multiple rows.