Page Builder Summit Limited Time Offer - 20% OFF! Use coupon PBS20 - View Details

Style Tabs

If you are using the WS Form framework you can use classes to style tabs.

Demos

Regular

Steps

Tabs Wrapper Class: wsf-steps

Steps + Checkmarks

Tabs Wrapper Classes: wsf-steps wsf-steps-checks

Steps + Checkmarks + Green

Tabs Wrapper Classes: wsf-steps wsf-steps-checks wsf-steps-success

Vertical

Any of the tab classes can be used in conjunction with wsf-vertical.
Form Wrapper Class: wsf-vertical
Tabs Wrapper Class: wsf-steps

Classes

The available classes are as follows:

Class Description Where To Use
wsf-steps Changes tabs into numeric steps Tabs Wrapper Class
wsf-steps-checks Show checkmarks on completed steps Tabs Wrapper Class
wsf-steps-success Change steps to green color Tabs Wrapper Class
wsf-vertical Change tabs or steps to a vertical format Form Wrapper Class

How to Add Classes

Classes are added to the Tabs Wrapper or Form Wrapper settings in Form Settings. You can access these setting as follows:

  1. Click the settings icon at the top of the layout editor.
  2. Click the Styling tab at the top of the sidebar.WS Form PRO - Style Tabs - Form Settings - Styling Tab
  3. Enter the class(es) into the Tab Wrapper and/or Form Wrapper class settings according to the table above.WS Form PRO - Style Tabs - Form Settings - Tabs Wrapper Class Setting
  4. Click Save & Close