fooblog

転職と副業と独学を発信する雑記ブログ

WordPressのお問い合わせフォームは「WM MP Form」を使え!よく使うカスタマイズ例もご紹介。

2022.05.29

WordPressでのお問い合わせフォームを作る際にはプラグインの「MW WP Form」がおすすめです。

シンプルな操作で簡単にお問い合わせフォームを構築できるため、WordPressのお問い合わせフォーム構築のプラグインではよく使用されます。

私もWebサイト構築時にすごくお世話になっているプラグインです。

よく使われる理由と、カスタマイズ例について、紹介します。

「MW WP Form」とは?

「MW WP Form」はフォームを構築するためのWordPressプラグインです。

簡単な操作で”入力画面””確認画面””完了画面”を構築することができる人気のプラグインです。

「MW WP Form」公式

「MW WP Form」の公式ドキュメントにはフィルターフックが豊富に用意されています。

フィルターフックを活用し、柔軟にカスタマイズすることができます。

カスタマイズについては、後ほど紹介します。

「MW WP Form」vs 「Contact Form 7」

「MW WP Form」とよく比較されるのが、「Contact Form 7」です。

「Contact Form 7」はシンプルな仕様で、機能を拡張するプラグインも豊富で、カスタムしやすいのが特徴でした。

しかし「Contact Form 7」はjQueryで動いています。Web界隈では、JavaScriptのフレームワークは、VueやReactのシェアが多くなってきています。

それらの影響からか「Contact Form 7」も3年ほど前から、更新がされていません。

「Contact Form 7」に対応しているプラグインも最新のWordPressのバージョンとの互換性がなくなり、今までの方法ではフォーム構築できなくなっています。

もちろん「Contact Form 7」の機能を拡張するプラグインもWordPressのバージョンとの互換性がなくなってきています。

プラグインを使用して、お問い合わせフォームを作る場合は、現在もサポートが行われている「MW WP Form」を使用するのがオススメです。

「MW WP Form」のデメリット

とは言え、「MW WP Form」にもデメリットはあります。

「MW WP Form」のデメリットは、確認画面が必ずついてしまうことです。

「Contact Form 7」では、入力画面→完了画面と、確認画面がないフォームプラグインでした。

確認画面が不要な場合は「Contact Form 7」、必要な場合は「MW WP FORM」と使い分けていた人も多かったと思います。

現段階では、確認画面不要のお問い合わせフォームを作る場合はベタ書きでフォームを作るしかないのかな、と思います。

何かいい方法があれば、随時更新していきます。

カスタマイズ例をご紹介

「MW WP Form」のメリットとして、フィルターフックが豊富に用意されており、プラグインを使用せずにカスタマイズが柔軟にできることです。

フィルターフックは、関数のトリガーのようなもので、「これらが実行された時に、これを実行する。」というように、操作することができます。

フィルターフック

「MW WP Form」でよく行うカスタマイズ例を紹介します。

「MW WP Form」のショートコードをGitで管理したい

WordPressの管理画面でコードを編集すると、インデントはめちゃくちゃになりますし、Gitのように履歴は残らないですし、管理しにくいです。

そこでショートコードを使って、管理画面の内容をコードで管理できるようにしましょう。

編集する箇所は、
functions.php
mw-wp-form.php(ショートコードを管理するファイル)
MW WP Formのエディター
の3つです。

まず初めに、functions.phpに以下を書き込み、ショートコードの使用を有効にします。

// functions.php
function my_php_Include($params = array()) {
    extract(shortcode_atts(array('file' => 'default'), $params));
    ob_start();
    include(STYLESHEETPATH . "/$file");
    return ob_get_clean();
}
add_shortcode('callphp', 'my_php_Include'); 

次に、「MW WPForm」のエディターにて下記を追記します。
” file=” “の中のディレクトリは適宜変更してください。
今回はテーマディレクトリからのパスを入力する仕様になっています。

// MW WP Formのエディター
[callphp file='mw-wp-form.php']

これで、「MW WP Form」のエディタの内容が、mw-wp-form.phpで編集できるようになっています。

それでは、mw-wp-form.phpを編集してみましょう。

// mw-wp-form.php
<?php echo do_shortcode('[ショートコード]'); ?>

phpファイルで、ショートコードを出力する際は、<?php echo do_shortcode(‘[ショートコード]’); ?>と書かないと、出力されません。

エディタでコードを管理すると、インデントが揃っておらず、見にくい上に、履歴も残りません。
そのようなことはなるべく避けたいので、ショートコードを用いた、phpファイルでの管理をおすすめします。

バリデーションルールを追加する

編集するファイルはfunctions.phpのみです。
下記内容をfunctions.phpに追記してください。

// functions.php
function validation_rule( $Validation, $data ) {
    $Validation->set_rule( ‘name’, 'noEmpty', array('message' => 'お名前を入力してください。'));
    $Validation->set_rule( ‘name’, 'mail', array('message' => 'メールアドレスの形式ではありません。'));
    $Validation->set_rule( ‘name’, 'eq', array( 'target' => 'email','message' => "メールアドレスが一致しません。" ));
add_filter( 'mwform_validation_mw-wp-form-xxx', 'validation_rule', 10, 2 );

‘name’にはname属性を入力してください。

‘noEmpty’:値が空白である場合にエラーを返します。
‘mail’:はメール形式でない場合にエラーを返します。
‘eq’:は値が一致しない場合にエラーを返します。

追加のバリデーションルールもありますので、下記をご確認ください。

バリデーションルール

選択項目によって、バリデーションルールを変更する

バリデーションを設定する際には、選択項目に応じて、必須項目を変更したい場合があります。

そんな時は、先程の「バリデーションルールの追加」にif文を追記して条件分岐させます。

// functions.php
function validation_rule( $Validation, $data ) {
    if ($data[‘req’] === 'その他'){
        $Validation->set_rule( ‘req-content', 'noEmpty', array('message' => 'お問い合わせ内容を記入してください。'));
    }
add_filter( 'mwform_validation_mw-wp-form-xxx', 'validation_rule', 10, 2 );

今回はname属性が‘req’のcheckboxでその他を選んだ場合、‘req-cotent’を必須項目にする例です。

お問い合わせフォームによくある形なので、是非活用してみてください。

選択項目によって、メールの内容を変更する

function.phpに、以下の内容を追記してください。

// 自動返信メール
//functions.php
function auto_mail($Mail, $values, $Data) {
    if ($Data->get(‘req’) == 'お問い合わせ') {
        $Mail->body = 
        $Data->get('name')."様"."\n".
        “お問い合わせを受け付けました。”.”\n”.
        "\n";
    }
    if ($Data->get('subjects') == '資料請求') {
        $Mail->body = 
        $Data->get('name')."様"."\n".
        “資料請求を受け付けました。”.”\n”.
        "\n";
    }
    return $Mail;
add_filter('mwform_auto_mail_mw-wp-form-xxx', 'auto_mail', 10, 3);
// 管理者宛メール
// functions.php
function admin_mail($Mail, $values, $Data) {
    if ($Data->get(‘req’) == 'お問い合わせ') {
        $Mail->body = 
        $Data->get('name')."様"."\n".
        “お問い合わせを受け付けました。”.”\n”.
        "\n";
    }
    if ($Data->get('subjects') == '資料請求') {
        $Mail->body = 
        $Data->get('name')."様"."\n".
        “資料請求を受け付けました。”.”\n”.
        "\n";
    }
    return $Mail;
add_filter('mwform_admin_mail_mw-wp-form-xxx', 'admin_mail', 10, 3);

name属性が‘req’のradioをの内容によって、自動返信メールと管理者宛メールの内容を変更する例です。

上記では’お問い合わせ’が選択された場合と、’資料請求’が選択された場合で、メールの内容が異なるようになっています。

フォームの内容をメールに記載したい場合は$Data->get(‘name’)を使用してください。

$Mail->bodyを用いると、メールの内容を変更できますが、下記を追記するとメールの詳細も変更することができます。

$Mail->to:送信先を変更
$Mail->from:送信元を変更
$Mail->sender:送信者を変更
$Mail->subject:件名を変更

是非ご活用ください。

Recommend

もっと見る