ステップ分けできるJavaScript「Smart Wizard」

申込フォームなどが長くなるとき、ステップごとにわけることで離脱率を下げられる場合があります。
jQueryプラグインの「SmartWizard」を使用することで、これを実現可能です。

使用方法

SmartWizardからSmartWizard.jsとstyle_wizard.cssをjQueryからjquery.jsをダウンロードします。


<link href="style_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="SmartWizard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.wiz-container').smartWizard();
});
</script>

次にhtmlを以下のようなルールに基づき記述すれば完成です。


<div id="smartwizard" class="wiz-container">
		<!-- ここからステップ表示 -->
		<ul id="wizard-anchor">
			<li><a href="#wizard-1"><h2>Step 1</h2></a></li>
			<li><a href="#wizard-2"><h2>Step 2</h2></a></li>
          <!-- 以下、ステップ分 -->
		</ul>
	<-- ここから　ステップ1詳細 -->
	<div id="wizard-body" class="wiz-body">
		<-- 下記のidはステップ表示で使用したid名と同一に -->
  		<div id="wizard-1" > 
  		   <div class="wiz-content">
               <h2>Step 1 タイトル</h2>	
               <p>コンテンツ</p>  
	        </div>
       	<!-- ここからナビ -->
        <div class="wiz-nav">
           <input class="next btn" id="next" type="button" value="Next >" />
        </div>          
    </div>
	<-- ここから　ステップ2詳細 -->
	<div id="wizard-body" class="wiz-body">
		<-- 下記のidはステップ表示で使用したid名と同一に -->
  		<div id="wizard-2" > 
  		   <div class="wiz-content">
               <h2>Step 2 タイトル</h2>	
               <p>コンテンツ</p>  
	        </div>
       	<!-- ここからナビ -->
        <div class="wiz-nav">
           <input class="back btn" id="back" type="button" value="< Back" />
           <input class="next btn" id="next" type="button" value="Next >" />
        </div>          
    </div>
    <!-- 以下ステップ分 -->
</div>

サンプル

Step 1
Description for step 1
Step 2
Description for step 2
Step 3
Description for step 3
Step 4
Description for step 4

Step 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 4 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Javascriptサンプルページ一覧

skuare.net