Multi-Page Forms CSS Selectors

Progress Bar

example: multi-page form progress bar container (div) – applies to all forms
```
1 body .gform_wrapper .gf_progressbar_wrapper {border: 1px solid red}
```
example: multi-page form progress bar container (div) – applies just to form ID #1
```
1 body #gform_wrapper_1 .gf_progressbar_wrapper {border: 1px solid red}
```

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

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

1 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

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

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

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

1 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

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

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

1 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

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

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

1 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

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

Contains the user-defined steps text

example: multi-page form steps container (div) – applies to all forms
```
1 body .gform_wrapper .gf_page_steps {border: 1px solid red}
```
example: multi-page form steps container (div) – applies just to form ID #1
```
1 body #gform_wrapper_1 .gf_page_steps {border: 1px solid red}
```

example: multi-page form step (div) – applies to all forms
```
1 body .gform_wrapper .gf_page_steps .gf_step {color: red}
```
example: multi-page form step (div) – applies just to form ID #1
```
1 body #gform_wrapper_1 .gf_page_steps .gf_step {color: red}
```

example: multi-page form active step (div) – applies to all forms
```
1 body .gform_wrapper .gf_page_steps .gf_step_active {color: red}
```
example: multi-page form active step (div) – applies just to form ID #1
```
1 body #gform_wrapper_1 .gf_page_steps .gf_step_active {color: red}
```

example: multi-page form inactive step (div) – applies to all forms
```
1 body .gform_wrapper .gf_page_steps .gf_step_pending {color: red}
```
example: multi-page form inactive step (div) – applies just to form ID #1
```
1 body #gform_wrapper_1 .gf_page_steps .gf_step_pending {color: red}
```

Wraps each “paged” set of fields

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

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

example: multi-page form page (div) – applies just to form ID #1
```
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
```
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

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

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

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

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

1 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

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

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

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

1 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

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

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

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

1 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

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