Contact Form 7 Multi-Step Formsを使用した時のIE対応

はじめに

WordPressのContact Form7を使って、Googleフォームにみたいなステップ型のアンケートフォームを作りたいとクライアントから要望があったため、サクッと作りたかったので、ステップ分割が出来るContact Form 7のアドオンContact Form 7 Multi-Step Formsを使用して実装しました。

このアドオンの使用方法は以下のサイトが一番詳しく書かれていると思います。
https://www.itti.jp/web-design/contact-form-7-multi-step-forms/

ところが、このアドオンはIEに対応していなかったのです。（Macばかり触ってるとIEのことはよく忘れがち）

Windowsを利用するユーザーのブラウザはほとんどEdgeになりますが、日本国内のブラウザシェア率を見ると、しぶとくもIE11が第5位にいらっしゃいますね。
https://webrage.jp/techblog/pc_browser_share/

今回は時間が無かったためIEを利用した際は、ステップ型を諦めて通常のフォームを表示するようにしました。

手順

1.ステップ型フォームの固定ページとは別にIE専用の固定ページを作成する。

2.IE専用のフォームページに表示させるフォームをContact Form7で作成する。

3.IE専用の固定ページに2で作成したフォームのショートコードを入力する。

4.ステップ型フォームの固定ページ、IE専用固定ページで使用する共通のテンプレート（formtemplate.php）を作成する。

固定ページのテンプレート作成については以下を参考
https://wordpressmatome.com/%E5%90%84%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%81%B8/

5.formtemplate.phpにIEの条件分岐を記入して、IEでアクセスした時はIE専用のフォームが表示させる。

formtemplate.php

<?php

global $is_IE;

if ( $is_IE ) {
  $page_id = 1234  //IE専用の固定ページのidを入れる;
  $page = get_post($page_id, 'OBJECT', 'raw'); 
  $page_include = apply_filters( 'the_content',$page->post_content); 
  echo $page_include;
}else{
  the_content();  
}

?>

$is_IEはブラウザ判定が出来るグローバル変数になります。
詳しくはこちらに書かれていました。
https://wp-kyoto.net/wordpress-global-vars/

最後に

文章で書くとややこしいですが、単純にIEでアクセスした時は別のIE専用ページの内容を表示させているだけですね。

もっと分かりやすく書けるように頑張ります。。