• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

WordPressのお問合せフォームをステップ式にする方法

ステップ式のフォームイメージ

WordPressのお問合せフォームからユーザーが離脱するのを最小限に防ぐために、
入力しやすいステップ式のフォームにするカスタマイズのご紹介です。

お問合せフォームは定番のプラグインであるContact Form7をベースにし、
ステップ式にするためにJavaScriptライブラリであるSwiper.jsを利用しています。

なお、サンプルのコードは最低限の仕組みだけにしていますので
適宜CSSなどカスタマイズを加えていただければ幸いです。

実際のコード

<?php

/* 利用しているテーマの functions.php へ追加 */
 
/* swiper.jsファイルの読み込み
-----------------------------------------*/
wp_enqueue_script( "swiper-js", "https://cdn.jsdelivr.net/npm/swiper@5.2.1/js/swiper.min.js", "", "", false );

/* swiper.cssファイルの読み込み
-----------------------------------------*/
wp_enqueue_style( "swiper-css", "https://cdn.jsdelivr.net/npm/swiper@5.2.1/css/swiper.min.css", array(), "" );
<!-- WordPres管理画面 Contact Form7 コンタクトフォーム編集 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide step1">
      <label> お名前 (必須)
      [text* your-name] </label>
      <label> メールアドレス (必須)
      [email* your-email] </label>
      <input type="button" class="next-step" value="次へ">
    </div>

    <div class="swiper-slide step2">
      <label> 題名
      [text your-subject] </label>
      <label> メッセージ本文
      [textarea your-message] </label>
      <input type="button" class="prev-step" value="戻る">
      [submit "送信"]
    </div>
  </div>
</div>
/* Contact Form7 Enterで送信しないようにする処理
-----------------------------------------*/
function submitStop(e){

  if (!e) var e = window.event;
  if(e.keyCode == 13)
    return false;
}
window.onload = function (){
  var list = document.getElementsByTagName("input");
  for(var i=0; i<list.length; i++){
    if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
      list[i].onkeypress = function (event){
        return submitStop(event);
      };
    }
  }
}

/* Tabキーを無効に
-----------------------------------------*/
window.onkeydown = function(e) {
  if (e.keyCode == 9)
    return false;
}

/* Swiperでステップ式
-----------------------------------------*/
const nextBtn = document.querySelector(".next-step");
const prevBtn = document.querySelector(".prev-step");
const swiperDemo = new Swiper('.swiper-container', {
  allowTouchMove: false
});
nextBtn.addEventListener("click", () => {
  swiperDemo.slideNext();
});
prevBtn.addEventListener("click", () => {
  swiperDemo.slidePrev();
});

実装についての補足と解説

ご紹介したコードの内容について解説します。

functions.phpでSwiperを追加する

まずはSwiper.jsを利用するために、テーマの中で関連ファイルを読み込みます。

今回はWordPressでの利用が前提であったため、テーマ内にあるfunction.phpで、
wp_enqueue_scriptおよびwp_enqueue_styleを使って呼び出しをしています。

もし、WordPress以外の環境で追加する場合はHTMLファイル内で以下のように記述することになります。

<!-- headタグの中に追加 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.2.1/css/swiper.min.css">

<!-- body閉じタグの直前に追加-->
<script src='https://cdn.jsdelivr.net/npm/swiper@5.2.1/js/swiper.min.js'></script>

なお、サンプルではCDNから読み込みを行っていますが、
もちろんローカルファイルに追加しても同じことは可能です。

Contact Form7 コンタクト編集画面

WordPressの管理画面 > お問い合わせ > コンタクトフォーム の順で進み、
該当のお問い合わせ編集画面にてフォーム内容を作成します。

フォーム内容は任意ですが、Swiper.jsを利用する前提だと、
以下のような構成になっていることが必須です。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      ここにステップ式フォーム1
    </div>
    <div class="swiper-slide">
      ここにステップ式フォーム2
    </div>
    <div class="swiper-slide">
      ここにステップ式フォーム3
    </div>
    <div class="swiper-slide">
      ここにステップ式フォーム4
    </div>
  </div>
</div>

サンプルでは2つのステップにしていますが、swiper-slideクラスを増やせば、
それだけ分割したフォームにすることが可能です。

Swiper.jsの初期化とステップフォームのための追加仕様を加える

実際にスライドが反映されるようにするために、以下のようにSwiper.jsの初期化を行います。

const swiperDemo = new Swiper('.swiper-container', {
  allowTouchMove: false
});

サンプルの仕様は、ボタンでのみスライドを進められるように設定しました。

なので、allowTouchMove(スワイプによるスライド操作を許可するか)というオプションを追加し、
ボタン操作でしか進めないようにするためにfalse(allowTouchMoveを許可しない)にしています。

また、ステップフォームにおいてはEnterでの入力およびTabキーでのフィールド移動は予期せぬ挙動になるため、
どちらも禁止するためのJavaScriptを以下のように追加しています。

/* Contact Form7 におけるEnterでの送信を禁止するスクリプト
-----------------------------------------*/
function submitStop(e){

  if (!e) var e = window.event;
  if(e.keyCode == 13)
    return false;
}
window.onload = function (){
  var list = document.getElementsByTagName("input");
  for(var i=0; i<list.length; i++){
    if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
      list[i].onkeypress = function (event){
        return submitStop(event);
      };
    }
  }
}

/* Tabキーは9
-----------------------------------------*/
window.onkeydown = function(e) {
  if (e.keyCode == 9)
    return false;
}

最後に

Contact Form7はカスタマイズプラグインも多数配信されておりMulti Step Formなど、
ステップフォーム系のプラグインも用意されています。

なるべく自分で軽量化して実装したいという場合には、
今回のコードが参考になると思いますので活用してみてください。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND