Dot Net Nuke + Onyaktech Forms + Some Custom Script = Multi-Step Form

At work, we are looking to redesign a giant form that is suppose to be “brief” for our users. However, because of how big this form has grown, and since it was in OWS. It needed a lot of fleshing out before hand.

After figuring out which sections would go where, I decided I wanted the form to be set up like an installation wizard. Multiple steps, that are easy to go through and simple to submit upon completion of all the steps.

Unfortunately I didn’t have time to implement everything I wanted. Yet I did get a step by step type of process working with a tad bit of jquery.

<div id="step1" class="targetDiv">
	Step 1
	<a class="show" target="2">Next</a>
</div>

<div id="step2" class="targetDiv">
	Step 2
    <a class="show" target="1">Previous</a> - <a class="show" target="3">Next</a>
</div>
<div id="step3" class="targetDiv">
	Finished!
</div>

<script type="text/javascript">
	$('.targetDiv').hide();
	$('#step1').show();
	$('.show').click(function () {
	    $('.targetDiv').hide();
	    $('#step' + $(this).attr('target')).show();
	});
	
	$('.hide').click(function () {
	    $('.targetDiv').hide();
	  
	});
</script>

Note: Make sure you have the “Allow Source Editor (Allow Javascript)” checkbox ticked under your “Other Options” tab in the “Display Setup” tab.

Adding Quick Links For Each Step:

Say you want the user to be able to swap between the tabs instead of having to press the previous and next buttons continuously. Just add this div above all the other HTML.

<div style="display:inline">
	<a class="show" target="1">1</a>
	<a class="show" target="2">2</a>
	<a class="show" target="3">3</a>
</div>

To see a live example, head over to JSFiddle.