• かちびと.net

    長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabyStepsのご紹介。古いプラグインですけど便利そうだったのでメモしておきます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps

スポンサーリンク

使いやすそうだったので備忘録。
フォームをステップ式にして、
コンパクトに収められる、という
jQueryプラグイン。シンプルなの
でカスタマイズも割りとしやすく、
クロスブラウザでも動作してく
れます。

高機能なプラグインは沢山ありますけど、既存サイトに組み込む必要がある場合はシンプルでカスタマイズしやすい方が落とし込みやすいのですが、探してみるとなかなか無いので個人的にはこういうプラグインが結構貴重です。

BabySteps


ライセンスはMITとなっています。縦長のフォームを見ただけで離脱するレベルで、フォームの入力はストレスなのでこうして見た目をすっきりさせれば離脱率を防げそう。

店かなんかに出来る行列も直線ではなく、蛇行した列にすると、混んでないような錯覚が生まれる、というのは聞いたことがあるので同じ理由でストレスを軽減できるのではないかなと。

Sample

デモを用意しました。日本語にしただけですけどw右側のResultをクリックすればデモが確認出来ます。

非常にシンプルで、機能だけ、というプラグインなのでデザインなども既存サイトにあわせやすく、主要ブラウザで動作してくれるのもいいですね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js'></script>
<script type='text/javascript' src="babysteps.0.2.2.js"></script>
 <script type='text/javascript'>
  //<![CDATA[
  $(window).load(function(){
  //名前項目のバリデ
            function step1_validator(){
                var firstName = $('#first_name').val();
                var lastName     = $('#last_name').val();
                $('#name_error').remove();

        if( !firstName || !lastName){
                    $('#step1').prepend("<span id='name_error' style='color:red'>名前が未入力ですぞ</span>");
                    return false;
                } else {
                    return true;
                }
      }

            $(function(){
                //入力項目のステップセッティング
                var step1 = $('#step1');
            var step2 = $('#step2');
            var step3 = $('#step3');
            var step4 = $('#step4');

                //進むボタンとか
            $.fn.bindStep.defaults.prevBtn = "http://kachibito.net/wp-content/uploads/2011/09/arrow02.png";
            $.fn.bindStep.defaults.nextBtn = "http://kachibito.net/wp-content/uploads/2011/09/arrow01.png";
            $.fn.bindStep.defaults.generateMarkup = function(id1,id2,img){
              return([
                '<img ',
                  'src="', img, '" ',
                  'id="', id1 , '" ',
                '/>',
              ].join(''));
            }

                step1.bindStep(step2,{
                    nextValidator: step1_validator
                });
            step2.bindStep(step3);
            step3.bindStep('#step4');

                $('#start_over').click(function(){
                    $.goToStep('#step1',function(currStep,nextStep){
                        currStep.slideUp('slow',function(){
                            nextStep.slideDown('slow');
                        });
                    });
                });
            });

            $(function(){
                $('#babyStepsForm').submit(function(){
                    destepify();
                    alert('ありがとう!');
                    return false;
                });
            });

            //ボタン
            function destepify(){
                $('div').show();
        $('#destepify_btn').hide();
        $('#stepify_btn').show();
            }

            //切り替え
      function stepify(){
        $('div').hide();
        $("#step1").show();
        $('#stepify_btn').hide();
        $('#destepify_btn').show();
      }
  });
  //]]>
  </script>

設定部分は一応書き出してますけど別ファイルにしておきたいです。

マークアップ。div区切りなので書きやすいんじゃないですかね。

 <form id="babyStepsForm" method="post">
      <div id="step1">
        <h3>Step 1</h3>
        苗字: <input type="text" id="first_name" />
        <br />
        名前: <input type="text" id="last_name"/>
        <br />
      </div>

      <div id="step2" class="hidden">
        <h3>Step 2</h3>
        好きな動物は?:
        <select>
          <option>犬</option>
          <option>わんこ</option>
          <option>dog</option>
        </select>
        <br />
        なんか教えて><:
        <br />
        <textarea cols="40" rows="10">なんでもいいから><</textarea>
        <br />
      </div>

      <div id="step3" class="hidden">
        <h3>Step 3</h3>
        好きな漫画: <input type="text" />
        <br />
        今まで食べたパンの枚数: <input type="text" />
        <br />
      </div>

      <div id="step4" class="hidden">
        <h3>Step 4</h3>
                <button type="submit">送信する</button> または、
                <a href="#" id="start_over">最初からやり直す</a>
        <br />
      </div>

    </form>

2008年の記事なので古いプラグインですけど、使いやすそうなので普通に使いそうです。高機能なものは使う機会無さそうですし。改良も出来そうならしたいなぁ。

BabySteps – jQuery Step-by-Step Forms

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services