ワードプレスを使っていく上で長らくContact Form 7プラグインを使っていましたが、ワードプレスのバージョンアップの影響を受けることが多く、そのたびに修正に時間がかかっていたのでMW WP Formプラグインを使ってみることにしました。
フォームのトラブルは、発生しても気が付かないことが多く問い合わせが無いことでテストしてみると使えなかったという状況になるので注意が必要です。
Contact Form 7プラグインで起こったトラブル
フォーム送信ボタンを押しても、送信ボタンがクルクル回る表示のまま送信が完了しない。
完全にエラーとなるわけでも無いため気が付くのが遅くトラブル原因の切り分けにも時間がかかりました。
その際は、最終的にCrome拡張機能のコンソール上でhtaccess内で無限ループが発生していることが確認できました。
htaccessの修正が他機能に影響する可能性がありプラグインの使用を取りやめ、有料フォームを設置しました。
今回、本サイト作成を行うにあたりContact Form 7では別プラグイン(Contact Form 7 Multi-Step Forms)が必要な確認画面をはじめから実装しているMW WP Formプラグインを利用しました。
MW WP Formプラグインの利用
MW WP Formプラグイン導入後のフォームの作成方法は、Contact Form 7とほぼ同じなので乗り換えは簡単と思います。
MW WP Formフォーム作成手順
プラグインをインストールし有効化するとダッシュボードにMW WP Formメニューが現れますので、該当メニュー内で新規作成を選択します。
下記画面が表示されますので、フォームタイトル フォーム内容を作成しフォーム識別子をフォームを表示させたいページに貼り付けるだけでフォームが表示されます。
フォーム項目と項目ごとのチェックルールの作成
メディア追加の下にある選択してくださいと書かれたドロップダウンボタンの下矢印を押すとフォームの選択項目が表示されます。
項目を挿入したい位置にカーソルを持っていきフォームを選択してフォームタグを追加ボタンを押すと項目ごとの情報入力画面が表示されますので、最低限nameに項目名を入力し、画面下のINSERTボタンを押すとショートコードが入力されます。
最後に、戻る 確認・送信ボタンの順で挿入すると戻る機能の付いた確認画面を表示できます。
項目ごとのチェック項目を設定
フォーム画面の一番下にあるバリデーションルールで、項目ごとにバリデーションルールを追加し入力ルール(必須項目など)を設定します。
項目の識別は、項目名で指定した値になります。(ショートコードでname=で指定されているもの)
例えば、メールアドレスを必須にしてメール形式チェックを行う場合は、下記の様になります。
完了メッセージの作成
フォーム送信完了時に表示させるメッセージを入力します。
自動返信メールを作成
サイドバーにある自動返信メール設定で自動返信ができます。
自動返信メール欄に、フォーム項目で設定したmwform_emailショートコードに対応する項目名(今回の場合は、メールアドレス)を設定を設定しておくと入力したメールアドレスへ自動返信が行われます。
[mwform_email name="メールアドレス" size="60"]
自動返信内の本文では、下記の様にフォーム入力された内容を{項目名}の形式で利用できます。
{tracking_number}は、MW WP Formプラグインが自動で割り振ります。
※このメールはシステムからの自動返信です
{お名前}様
お問い合わせありがとうございました。
以下の内容でお問い合わせを受け付けいたしました。
---お問い合わせ内容---
お名前:{お名前}様
E-Mail:{メールアドレス}
お問い合わせ番号:{tracking_number}
お問い合わせ内容:{内容}
管理者宛てメールの作成
最低限送信先(E-mailアドレス)を設定しておくことで、管理者宛てにメール通知を行うことができます。本文では、自動返信メールと同様に{項目名}で、フォーム入力内容を表示できます。
Return-Path ( メールアドレス )と送信元(E-mailアドレス)は、オプション項目なので空白のままでも動きます。