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

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

使用方法
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>

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

sponsors

「ステップ分けできるJavaScript「Smart Wizard」」をシェアする

記事作成:
記事URL:

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