zendash - Admin Dashboard HTML Template

Form Wizard

Wizard plugin that is extremely flexible, compact and feature-rich. General Form wizard HTML structure in Zendash template. Here is the Folder structure.

	
		
	

	
		
		
	
    
<!-- Internal Jquery-steps js -->
<script src="../../assets/plugins/jquery-steps/jquery.steps.min.js"></script>

<!-- Internal Form-wizard js -->
<script src="../../assets/js/form-wizard.js"></script>

Open form-wizard.js file (assets/js/form-wizard.js) You can see below js 


$('#wizard1').steps({
	headerTag: 'h3',
	bodyTag: 'section',
	autoFocus: true,
	titleTemplate: '#index#<\/span> #title#<\/span>'
});
Type URL
Plugin Link http://www.jquery-steps.com/
Vertical Form Wizard

Wizard plugin that is extremely flexible, compact and feature-rich. General Form wizard HTML structure in Zendash template. Here is the Folder structure.

1. The following HTML,JS, CSS you should have in your page to implement a sidebar..
	

	
	
    
<!-- Internal Jquery-steps js -->
<script src="../../assets/plugins/jquery-steps/jquery.steps.min.js"></script>

<!-- Internal Form-wizard js -->
<script src="../../assets/plugins/formwizard/fromwizard.js"></script>

Open form-wizard.js file (assets/js/form-wizard.js) You can see below js 


$('#wizard3').steps({
	headerTag: 'h3',
	bodyTag: 'section',
	autoFocus: true,
	titleTemplate: '#index#<\/span> #title#<\/span>',
	stepsOrientation: 1
});
Type URL
Plugin Link https://datatables.net/examples/styling/bootstrap4
Accordion Form Wizard

jQuery based form wizard plugin which enables the user to collapse & expand steps by clicking on next/back buttons just like an accordion.Accordion-Wizard HTML structure in Zendash template. Here is the Folder structure.

1. The following HTML,JS, CSS you should have in your page to implement a sidebar..
	
		
	
	
    
<!-- Internal Jquery-steps js -->
<script src="../../assets/js/form-wizard.js"></script>

<!-- Internal Accordion-Wizard-Form js -->
<script src="../../assets/plugins/accordion-Wizard-Form/jquery.accordion-wizard.min.js"></script>

<!-- Internal Form-wizard js -->
<script src="../../assets/js/form-wizard2.js"></script>

Open form-wizard.js file (assets/js/form-wizard.js) You can see below js 


//accordion-wizard
var options = {
	mode: 'wizard',
	autoButtonsNextClass: 'btn btn-primary float-right',
	autoButtonsPrevClass: 'btn btn-secondary',
	stepNumberClass: 'badge badge-primary mr-1',
	onSubmit: function() {
	  alert('Form submitted!');
	  return true;
	}
}
$( "#form" ).accWizard(options);
Type URL
Plugin Link https://www.jqueryscript.net/demo/accordion-form-wizard/