• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

Main navigation

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

How to style individual list items / fields in Gravity Forms

By Neil on July 30, 2014

The individual list items and fields in Gravity Forms can be styled using simple CSS formatting. Just add the code below to your CSS stylesheet in WordPress to do the styling:

body #gform_wrapper_**form ID here** .gform_body .gform_fields .gfield
{
**CSS styling here**
}

You can choose to apply the formatting to every single form on your website by removing the _**form ID here** part of the above code and changing #gform_wrapper with .gform wrapper, as shown below:

body .gform_wrapper .gform_body .gform_fields .gfield
{
**CSS styling here**
}

In the example tutorial here our Gravity Form has an ID of 4.

Learn more about Gravity Forms here!

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2018 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */