「jQuery Steps」で簡単にウィザードフォームを実装する

jQuery StepsというjQueryプラグインを利用することで、簡単にステップ式のウィザードフォームを実装することができます。

ダウンロードはこちら
デモはこちら

利用方法

javascript

jQueryプラグインですので、別途jQueryファイルも必要です。

<script src="/js/jquery.steps.min.js"></script>

<script>
jQuery(function($) {
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
});
</script>

※ WordPressで利用するようにjQuery(function($) {で括っています。

サンプルHTML

    <div id="example-basic">
        <h3>Keyboard</h3>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>
        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>
        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>

スタイルの調整が必要ですが、コードを記述しなくてもナビゲーションリンクが表示されるので、とてもシンプルに実装できます。