Gravity Forms: Targeting specific pages with CSS

Targeting specific pages on a multi-part Gravity Form

If you're trying to target specific pages with CSS in a multi page Gravity Form, this could save you a bunch of time.

There is tons of great info online about Gravity Forms for web developers. A few of my favs are:

1. Targeting Specific Elements in Gravity Forms
2. Gravity Forms CSS Ready Classes
3. Support Forums for Gravity Forms

But none of those tell you how to target a specific multi page form page. Work with any software like Gravity Forms for an extended time and - like anything you dive deeply into - grey areas percolate up. One of those grey areas for me was how to target a specific page on a multipage (aka multistep) form. The GF page about Targeting Specific Elements provides some examples, but none really did what I wanted.

Here's an example of how to target a specific page/step on a two step form:

/* target form steps */
body #gform_wrapper_1 #gform_page_1_1 {color:red !important}
body #gform_wrapper_1 #gform_page_1_2 {color:blue !important}

The example assumes the form ID = 1. Change 1 to the ID of your form. #gform_page_1_2 for example means Form 1, page 2.

Here's the result of the css above:

Gravity Forms Specific Page CSS targeting on a Multi Page form

If this helps you, think about sharing how. Leave a comment below.

2 Responses to “Gravity Forms: Targeting specific pages with CSS”

  1. Harry

    Hey man thanks for the post

    do you know any websites besides gravity forms to have some ready css template so I could use them ?



Leave a Reply