【MW WP Form】ひとつのフォームを複数のページで利用する
WordPressのお問い合わせフォームのプラグインMW WP Form。
最近はもっぱらお世話になっています。
基本的にはMW WP Formはひとつのページ、ひとつのフォームのようですが、カスタマイズをすることで「ひとつのフォームを複数のページ」で利用することができました。
公式で公開されているフックを利用するので、安心してカスタマイズできると思います。
1. フォームを作る
初めにフォームをひとつ作成します。MW WP Form > 新規作成から作成可能です。
ここでのポイントは、
- URL設定は空にする
という点です。
その他、バリデーションや自動返信メール設定はいつも通りおこないます。
2. 確認画面、完了画面が必要な場合は固定ページで作成
それぞれ遷移するページが必要であれば、これらも先に作成しておきます。
固定ページ > 新規作成で作成します。
ここでのポイントは２つ。
- スラッグは半角英数がいい
- 本文には1で作成したフォームのショートコードを入れる
※完了ページは入れなくてもOK
スラッグはいつでもどこでも半角英数字が好ましいです。
本文にMW WP Formで作成したフォームのショートコードを入れることで、確認内容などが表示されます。
3. 複数のページにフォームを設置
1で作成したフォームを、複数のページに入れます。これもショートコードを使って入れることになるでしょう。
4. ページの遷移をカスタマイズする
最後に、ページ遷移のカスタマイズです。
MW WP Formのデフォルトでは以下の仕様になっています。
- URL設定に入力しない場合は、フォームを設置したページのURLにリダイレクト
つまり、URL設定に何も入力しなかった場合は、フォームを設置したページだけで完結するようになっています。
確認画面も、完了画面もフォームと同じURLです。
それで問題ない場合は良いですが、例えばそれぞれ独立させたい、CVタグをページに入れたい場合などはURLを変えたくなります。
※ちなみに同じURLで完結してもGoogle タグマネージャーを使えばCVタグはいけるとのこと。
また、
- URL設定にひとつでも入力すると「このページには直接アクセスできません。」とエラーが出る
という仕様のようで、URL設定にひとつのURLだけというのが設定ができません。
特に問題になるのが「戻るボタン」です。
それぞれ複数のページにフォームを設置しているので、「戻るボタン」ではそれぞれのページに戻りたいのです。
これを解決するためにfunctions.phpでフックを利用して、それぞれ遷移するページを設定します。
function my_mwform_redirect_url($url, $Data) {
//戻るボタンをクリックした時に、前のページに戻るようにする
if ($Data->get('submitBack') != '') {
//例えば前のページのURLが/contact/の場合
if (preg_match('/\/contact\/$/', $Data->get('_wp_http_referer') )) {
return home_url('/contact/');
}
//例えば前のページのURLが/contact-recruit/の場合
if (preg_match('/\/contact-recruit\/$/', $Data->get('_wp_http_referer') )) {
return home_url('/contact-recruit/');
}
}
//送信完了ページはURL/contact-transmit/へ遷移させる
if ($Data->get('mwform_submitButton') != '') {
return home_url('/contact-transmit/');
}
return $url;
}
add_action( 'mwform_redirect_url_mw-wp-form-XXXX', 'my_mwform_redirect_url', 10, 2 );mwform_redirect_url_mw-wp-form-XXXXというフィルターフックを利用します。
XXXXにはフォームのkeyが入ります。keyはショートコードのです。
formのデータは引数$Dataに入ってくるので、その中身によって分岐をしてきます。
$Data->get('formのnameが入る')ブラウザでMW WP Formを見ると分かるのですが、hidden name=”_wp_http_referer”で前のページのURLを持っていることがわかります。
それを利用して、戻るボタンをクリックした場合は前のページのURLをreturnしてあげるという流れです。
完了ページに遷移させたかったので、$Data->get(‘mwform_submitButton’)に値が入っている場合は、完了ページのURLをreturnしてあげます。
これでひとつのフォームだけで複数のページにフォームを設置できました。
フックを使って色々カスタマイズができそう
フックは色々あるようで、ぐっと使い方が広がります。詳しくは公式を。
さらに、アクションに対してもフックがあり、便利そうでした。
