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など、
ステップフォーム系のプラグインも用意されています。
なるべく自分で軽量化して実装したいという場合には、
今回のコードが参考になると思いますので活用してみてください。
