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}
    

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}