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}