Demo Form

How to use

Create markup for form as you like, to create form steps just wrap the steps in a div with data attribute step. Example: <div data-step=1 >... </div>

<form role="form" id="myForm">
	<div data-step="1">
	  <div class="form-group" >
		<label>Delivery Type</label>
		<div class="radio">
			<label>
			  <input type="radio" name="deliverytype" id="deliverytypeh" value="H" checked>
			  Home Delivery
			</label>
		</div>
		<div class="radio">
			<label>
			  <input type="radio" name="deliverytype" id="deliverytypet" value="T" >
			  Take Away
			</label>
		</div>
	  </div>
	  
	</div>
	<div data-step="2" data-depends="deliverytype" data-depends-value="H">
	  ...
	</div>
	<div data-step="3">
	  ...
	</div>
	<div class="checkbox" data-step="4">
	...
	</div>
	<button type="submit" class="btn btn-default" >Submit</button>
</form>

Step dependent on previous step

To make a step depends on previous step set the data-depends="input control name from previous step" & data-depends-value="the value for which the step will be shown" on the dependent step. Example:<div data-step="2" data-depends="deliverytype" data-depends-value="H">

Thanks to Daniel Eden for creating Animate.css