Contact Form 7で送信完了メッセージが表示されない(WPtouchでSafari, iPad, iPhone限定？）
WordPress定番中の定番プラグイン「Contact Form 7」。
コンタクトフォームの名が示す通り、ウェブサイトに送信可能なフォームを設置することができるプラグインです。
さて、フォーム設置が完了し、テスト送信もOK、裏で送られるメールも届いていざ公開！という段になると、不可解な現象が度々起こります。
1 分 ご と に 繰 り 返 さ れ る 送 信
そう、なぜだか何回も同じ内容でフォーム送信が繰り返されるようなのです。
Contact Form 7 から複数回送信される理由
なぜ、送信者は同じメッセージを複数回送りつけてくるのか。しかも、異なる送信者がやはり何度か送ってくることが続くのは何なのか。何かの嫌がらせなのか。
いや、恐らくは違うのでしょう。
送信完了メッセージが出ず、処理進行中のクルクルと回る表示がずっと続くという状況が、送信者の不安をあおり、複数回送信という“至極もっともな”行動に駆り立てるのだろうと思われます。
原因推定
もちろん、テストケースにおいては送信完了メッセージがちゃんと出てくることを確認しています。
JavaScriptやjQueryが働かない状況というのは、自らそうしたブラウザ設定にしているのでなければ考えられず、そう頻繁に起こるものとは思えません。
というわけで、2回以上フォーム送信を繰り返している方の行動や特徴を洗い出してみます。
推定の方法
方法はいたって簡単…ですが、ここで詳しくは述べません。
- Googleアナリティクスを導入する
- Googleアナリティクスでフォーム送信イベントを記録する
- フォーム送信イベントについて、Googleアナリティクスで得られる情報を精査する
こんな感じですね。Googleアナリティクス＋Contact Form 7の設定でイベントを記録するのか、はたまたGoogleタグマネージャでそうした設定をするのかで方法は若干異なりますが、とにかく「送信」ボタンを押した人についての情報が得られれば問題ありません。
推定の結果
さて、フォーム送信ボタンを押した人、特に数分内に複数回押した人はどんな人か？調べてみました。
かなり、特徴的な人たちでした。
- ブラウザ：「Safari」もしくは「Safari(in app)」
- デバイス：「iPhone」もしくは「iPad」
それほど母数は多くないのですが、原因を推定するには十分な特徴を持っています。そして、複数回送信が度々起こる理由もわかります。
日本国内では圧倒的なシェアを誇る「iPhone」が関わっているからだ、と。
原因を分析はChromeで
さて、原因が推定できたところで、さらに精細に原因を分析します。
しかし、手元にはiPhoneもiPadもない（Androidユーザーにはありがち）。
そんな時に使うのはこれ。Google Chrome（グーグル・クローム）。
Chromeがもつエミュレーター機能で、「サイトをiPhone6で見た時の状況」を再現することができます（その方法についてはCtrl + Shift + iを押すか、ググってみてください）。
さぁ、エミュりましょう。
「サイトをiPhone6で見た時の状況」をつくり、実際にフォーム入力とフォーム送信を実施します。
おぉ！やはりクルクルが鳴りやまない！
現象の再現ができました。すばらすばら。
原因の精査もChromeで
さて、Chromeの威力はエミュレーションに留まりません。開発者ツールは、特にJavaScriptのエラーについての詳細を教えてくれます（方法については他所をご参照のこと。）
フォーム送信ボタンの押下に伴ってバツが付けば、エラーが出て処理が進行していないことを示します。
開発者ツールの「Console」を確認してみれば、やはりエラーが。
関係ありそうなところを抜き出してみると、
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
ググったりしてちょっと調べてみましたがよく分からなかった*1ので、別の表示を見てみます。
Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('email') does not support selection.
こんな表示がなされています*2。
やはり、よぅわからん。
エラー表示でググってみる
ようわからん時の最強の対処法、それは「ググる」ことです。ここまでグーグルに頼りっぱなしですが仕方ない。
海外の技術フォーラムに似通った質問がありました。
「iPad不可」とか「不幸なことに、Safariでは解決ムリ」といった記載も。仕様みたいですね。
まぁ、原因が特定されただけでも儲けものでしょうか。
対処法の検討
さて、上記エラーはどこ（どのJavaScriptファイル）由来のものかもハッキリしています。優秀なるChrome君の手に係れば、たちどころに原因は究明されてしまうのです（一部改編）。
WPtouchという、これまたワードプレスの定番プラグイン、今ではレスポンシブテーマが当たり前になっておりその重要性自体は減じているのかもしれませんが、スマホ向けの表示を簡単に（デスクトップ向けとは別テンプレートで実行）してくれるというプラグインです。
どうやら、ここで使われているJavaScriptのライブラリ「fastclick」とのコンフリクトが原因のようで。「FastClick」については以下のサイトをご参照のこと。
うーん、これをWPtouch側で外す処理か、それとも上記英語フォーラムで示唆されていたinput要素の「number」入力を「text」入力に改めれば？に倣い、「email」を「text」に改めるか…。
校正をあきらめるのもなぁということで、悩み深い。いっそのことWPtouchをはずしたいけれど、大掛かりな作業が待っていると思うと尻込みしてしまう…といったところで、笑点はお開きです。
