• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

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

How to style the form list container in Gravity Forms

By Neil on July 30, 2014

The form list container is the area of Gravity Forms that contains all of the input fields, and is comparable to the body DIV that is covered in a previous video tutorial. It is common to want to style this area for so it looks good in your website, and to do this simply add the following code to your CSS stylesheet in WordPress.

body #gform_wrapper_**form ID here** .gform_body .gform_fields
{
**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
{
**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 © 2021 · 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 */ /* ----------------------------------------- */