jQueryでタブの切り替えをやろうと思います

2014.12.07
トラスト株式会社のホームページを作り、今になってこうすれば良かったなと思うことがあります。
ホームページ制作のお仕事をしていても、制作前にしっかりと考えても、制作した後・途中段階で改善案というのはどうしても出てきてしまうのですね。

そのひとつが、お問い合わせと見積もりのフォーム・ページの役割。

現状はお問い合わせページとお見積もりページと2つ独自のページがあり、 それぞれの役割によってどちらのページからお問い合わせを行うか選んで頂いております。


採用や広告のご提案は「お問い合わせページ」
ホームページ制作のお見積もりなどは「お見積もりページ」


ただ、逆にこれ面倒くさいのでは?と思ったり。

同一ページ内でタブの切り替えにより項目選択を

ただ、お問い合わせとお見積もりで必須項目や入力項目はしっかりと分けたい。
であれば、同一ページ内でタブの切り替えで分けてしまおうと考えております。

どういうことかというと、


  • お問い合わせ用
  • お見積もり用
お問い合わせ用のフォームを
表示させる予定
お見積もり用のフォームを
表示させる予定


こういうことです。

つまり上部のタブ(ul id=”tab” liの部分)をクリックすることにより、表示するコンテンツ(div class=”content_wrap”)を切り替えて表示させてしまおうという考え。

フォームは確かに2種類のままですが、ページ内での切り替えになるんで、離脱率は若干下がるのではないかなと思っております。
フォームの途中でチェックボックスの選択で表示項目の切り替えも考えましたが、入力途中で画面が変わるは避けた方が良いかなと考え、この方法がベストという判断に。

設置が無事に完了しましたら、詳しい設置方法も記載していこうと考えております。