2023/12/26

2023/12/27

2695 views

「Contact Form 7」に、入力内容確認と、送信完了（サンクス）ページを備えられるプラグイン『Contact Form 7 Multi-Step Forms』について、使用する時の注意事項をメモしておきます。

Invisible reCaptchaと併用できない

Invisible reCaptchaを使用したままだと、確認ページへ遷移せずに送信されてしまいます。

対策としては、Contact Form 7のreCAPTCHAインテグレーションを使えば併用することができました。ただしこの方法では、reCaptcha表示がインライン表示ではなく、右下の固定表示となってしまうので、そこは断念するしかないようです。

添付ファイルは確認ページを挟んで送信できない

これは結構致命的でした。

ファイル添付送信は確認ページを挟んではできないようです（公式元の発表です）。

ただし、以下２つの解決方法があります。

対策．１）確認ページにファイルアップロードのフォームを設ける

内容確認ページにファイルアップロードのフォームを設けることで、メール添付で受信することができました。

ただこれは、ユーザーにとっては意味不明な動線となってしまうのがデメリットです。

対策．２）Drag and Drop Multiple File Upload – Contact Form 7を併用する

『Drag and Drop Multiple File Upload – Contact Form 7』というプラグインを併用すれば、実現はできました。

ただこれは、ファイルをサーバーにアップロードして、リンクが送られてくる形式となり、添付受信ではなくなってしまいます。

Please fill out the form on the previous page.という文言表示が出てエラーになる

確認ページを無しにして、サンクスページだけ使おうと思い、何回かフォームからテスト送信をしていたところ、「Please fill out the form on the previous page.」という文言が出てフォームが表示されなくなる状態になりました。

解決策も分からず、『Contact Form 7 Multi-Step Forms』については、使用を断念することにしました。

↓

「multistep」の設定を「Last Step」にするのではなく「First Step」にすることで上記エラーは解決できました。

サンクスページに飛ぶのは最後のステップと解釈してしまいましたが、このプラグインでは最初のステップとして扱うようです。また「Send Email」の設定にも忘れずにチェックしておきましょう。

まとめ

結論としては、『Contact Form 7 Multi-Step Forms』を使えば、Contact Form 7のフォームに比較的簡単に確認ページとサンクスページを実装することができます。
しかしながら、添付ファイルを含むフォームにおいては工夫と手間が必要となるのが残念なところです。

もし、サンクスページだけを設けるのであれば、添付ファイルを含むフォームでも実装できるのですが、ただその場合はわざわざプラグインを使わないでも良いといえるでしょう。