Wordpress

【MW WP Form】注意点&カスタマイズまとめ

WordPressのお問い合わせフォームプラグインは「MW WP Form」を使用することが多いです。

お問い合わせ系プラグインは「Contact Form 7」が断トツ有名ですが、
このプラグインでは入力した内容をページ遷移して確認することができないため、
確認画面を入れたいクライアントの場合は「MW WP Form」を使用しています。

Contact Fomm 7の確認画面について

「Contact Form 7」でも確認画面的なものを表示させることは可能。
ただページ遷移ができず、全て同じ画面で入力&確認を表示させる対応になってしまう。
page-contact.phpで入力画面
page-contact-confirm.phpで確認画面
とかはできない。
入力画面と確認画面が同じフォーマットとなり、ユーザにとっては微妙な操作感な気がします。

ただ、そもそも確認画面というのは日本独自の文化、という記事も目にするので、
個人的には入れなくていいんじゃないかなとは思いますが。

確認画面いらない場合→「Contact Form 7」
確認画面いれる場合→「MW WP Form」
という使い分けでいいと思います。

前置き長くなりました。

以下、「MW WP Form」を使う際の注意点&カスタマイズまとめです。

URL設定

下記の固定ページを作成している前提で進めます。
・お問い合わせページ
 - page-contact.php
・お問い合わせ確認ページ
 - page-contact-confirm.php
・お問い合わせ完了ページ
 - page-contact-thanks.php

まず、パーマリンクの設定を確認します。

確認する部分は赤枠で囲んでいる部分。
最後にスラッシュがついているかどうかを確認しておきます。

※キャプチャは"カスタム構造"を選択していますが、他のパーマリンクを設定していたとしても確認する観点は同じ。最後にスラッシュがあるかないか。

次にプラグインのURL設定画面。

先ほどパーマリンク設定画面で、末尾にスラッシュがついている場合、
この画面のURL設定でも末尾にスラッシュをつける必要があります。

この部分を合わせずに設定してしまうと、永遠にリダイレクトループが発生してしまいます。

原因はわかりませんが、このプラグインの仕様のようです。
注意しましょう。

エラーメッセージ変更

エラーメッセージを変更したい時の処理。

MW WP Formには「バリデーションルール」から簡単にフォームチェックの設定ができます。

必須項目にチェックをつけたバリデーションルールの場合、
デフォルトのエラーメッセージは「未入力です。」と出力されます。

このエラーメッセージは画面からは変更できないので、
functions.phpにコードを追加し変更する必要があります。

上記バリデーションルールで、エラーメッセージを「入力してください。」に変更する場合。

下記をfunctions.phpに追加。

function my_validation_rule( $Validation ) {
    $Validation->set_rule( 'name', 'noEmpty', array(
        'message' => '入力してください。'
    ) );
    return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule' );

add_filterの引数にあるxxx部分は、フォーム識別子の番号に変更してください。
[mwform_formkey key="31"]だったら、xxxを31に変更。

set_ruleの第二引数について。
必須項目」は「noEmpty」に対応していますが、その他の項目の場合は公式を参考にしてください。
バリデーションルール
(というか、ここに書いてあることは公式そのまんまです。。)

設定が複数ある場合は、こちらの書き方がスマートかと思います。

function my_exam_validation_rule( $Validation, $data, $Data ) {
	$Validation->set_rule( 'name', 'noEmpty', array( 'message' => '入力してください。' ) );
	$Validation->set_rule( 'check', 'required', array( 'message' => 'チェックを入れてください。' ) );
	return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_exam_validation_rule', 10, 3 );

セレクトボックス初期値を「選択してください」に変更

セレクトボックスは何も設定しないと、一番初めの選択肢が初期値で表示される状態になります。
これを「選択してください」に変更します。

上記画面の通り、下記2点を変更
childrenに「:選択して下さい,」を追加。
post_raw="true"」を追加。

-Wordpress

© 2022 EgTips Powered by AFFINGER5