[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]
The Wizards element uses the jQuery Steps plugin and is especially useful for user onboarding, data collection, signups and more.
Explore all of Stack’s modular elements
at the Element Index Page ā[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section css=”.vc_custom_1498221033755{padding-top: 0px !important;}”][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]
The Wizards element in Stack uses the jQuery Steps plugin. This plugin offers advanced wizard functionality and is ideal for developers who require multi-part onboarding, signup, tutorial processes and more.
Included here is a basic example of how to create a Wizard on your page. For more advanced examples, including form validation, see the plugin examples here: jQuery Steps by Rafael Staib
The basic layout for the Wizard requires parent .wizard element which houses h5Ā elements that serve as the title for each panel in the wizard and sectionĀ elements which house the content for each panel. This is demonstrated in the markup snippet below:[/vc_column_text][/stack_boxed_content][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJhbGVydCUyMGJnLS1lcnJvciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYWxlcnRfX2JvZHklMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTNFJTNDc3Ryb25nJTNFTm90ZSUzQSUzQyUyRnN0cm9uZyUzRSUyMFRoZSUyMGVsZW1lbnRzJTIwaW4lMjB0aGlzJTIwcGFnZSUyMGFyZSUyMGN1cnJlbnRseSUyMGF2YWlsYWJsZSUyMHRvJTIwVmlzdWFsJTIwQ29tcG9zZXIlMjBvbmx5JTIwJTI4bm90JTIwVmFyaWFudCUyOSUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmFsZXJ0X19jbG9zZSUyMiUzRSVDMyU5NyUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[/vc_raw_html][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][/vc_section][vc_section][vc_row][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][stack_wizard][stack_wizard_content title=”Intro”]
[/stack_wizard_content][stack_wizard_content title=”Navigation”]
[/stack_wizard_content][stack_wizard_content title=”Finish”]
[/stack_wizard_content][/stack_wizard][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][/vc_section]