Multi-Page Forms CSS Selectors

Progress Bar

Container

• example: multi-page form progress bar container (div) – applies to all forms

  body .gform_wrapper .gf_progressbar_wrapper {border: 1px solid red}
  

• example: multi-page form progress bar container (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_progressbar_wrapper {border: 1px solid red}
  

Progress Bar Title

The progress bar title contains the “Step x of y” text.

• example: multi-page form progress bar title (h3) – applies to all forms

  body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {color: red}
  

• example: multi-page form progress bar title (h3) – applies just to form ID #1

  body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar_title {color: red}
  

Progress Bar

This is the percentage progress bar shown below the above title.

• example: multi-page form progress bar (div) – applies to all forms

  body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}
  

• example: multi-page form progress bar (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}
  

Percentage Bar

• example: multi-page form progress bar – percentage bar – applies to all forms

  body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}
  

• example: multi-page form progress bar – percentage bar – applies just to form ID #1

  body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}
  

Percentage Completed Number

• example: multi-page form progress bar – percentage completed number (span) – applies to all forms

  body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span {border: 1px solid red}
  

• example: multi-page form progress bar – percentage completed number (span) – applies just to form ID #1

  body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span {border: 1px solid red}
  

Steps

Container

Contains the user-defined steps text

• example: multi-page form steps container (div) – applies to all forms

  body .gform_wrapper .gf_page_steps {border: 1px solid red}
  

• example: multi-page form steps container (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_page_steps {border: 1px solid red}
  

All Steps

• example: multi-page form step (div) – applies to all forms

  body .gform_wrapper .gf_page_steps .gf_step {color: red}
  

• example: multi-page form step (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_page_steps .gf_step {color: red}
  

Active Step

• example: multi-page form active step (div) – applies to all forms

  body .gform_wrapper .gf_page_steps .gf_step_active {color: red}
  

• example: multi-page form active step (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_page_steps .gf_step_active {color: red}
  

Inactive Step

• example: multi-page form inactive step (div) – applies to all forms

  body .gform_wrapper .gf_page_steps .gf_step_pending {color: red}
  

• example: multi-page form inactive step (div) – applies just to form ID #1

  body #gform_wrapper_1 .gf_page_steps .gf_step_pending {color: red}
  

Page

Wraps each “paged” set of fields

• example: multi-page form page (div) – applies to all forms

  body .gform_wrapper .gform_page {border: 1px solid red}
  

• example: multi-page form page (div) – applies just to form ID #1

  body #gform_wrapper_1 .gform_page {border: 1px solid red}
  

• example: multi-page form page (div) – applies just to page 2 in form ID #1

  body #gform_wrapper_1 #gform_page_1_2 {border: 1px solid red}
  

Footer

Contains previous and next paging buttons

• example: multi-page form footer (div) – applies to all forms

  body .gform_wrapper .gform_body .gform_page_footer {border: 1px solid red}
  

• example: multi-page form footer (div) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer {border: 1px solid red}
  

Buttons

Next Button

• example: multi-page form – next button (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}
  

• example: multi-page form – next button (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}
  

• example: multi-page form – next button (input) – applies just to button with ID #1 in form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer #gform_next_button_1_1 {border: 1px solid red}
  

Previous Button

• example: multi-page form – previous button (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}
  

• example: multi-page form – previous button (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}
  

• example: multi-page form – next button (input) – applies just to button with ID #2 in form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer #gform_previous_button_1_2 {border: 1px solid red}
  

Submit Button

• example: multi-page form – submit button (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_page_footer .gform_button {border: 1px solid red}
  

• example: multi-page form – submit button (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_page_footer .gform_button {border: 1px solid red}