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

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

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

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

BabySteps

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

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

Sample

デモを用意しました。日本語にしただけですけどｗ右側の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 = "/wp-content/uploads/2011/09/arrow02.png";
            $.fn.bindStep.defaults.nextBtn = "/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年の記事なので古いプラグインですけど、使いやすそうなので普通に使いそうです。高機能なものは使う機会無さそうですし。改良も出来そうならしたいなぁ。