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.

Hire the best developers for Gravity Forms

If you’re looking for good and experienced Gravity Forms developers to help you with your questions about Gravity Forms (like Using CSS list in Gravity Forms field description) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.

Click here to visit Codeable