お問い合わせフォームの構築 -- MW WP Form -- #2/2

はじめに

概要

今回は、前回の内容に続いてMW WP Formの作成を行います。具体的には、バリデーションの設定、エラーメッセージの設定、そして自動返信メールの設定を行います。これらの設定は、クライアントからの要望も多いので、ぜひ実装してください。前回のリンクはこちらから。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

お問い合わせフォームの構築 — MW WP Form —は、最初にどこを理解するとよいですか？

木村

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

バリデーションの設定

バリデーションの設定では、お問い合わせフォームの構築 — MW WP Form — #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

nameとの紐づけ

バリデーションルールにおいて重要なのは、ショートコードに書かれたnameです。こちらのkeyが紐づいています。

さまざまな設定オプションが存在しますが、特に重要事項は必須にするかどうかです。それによってエラーメッセージが表示されます。

バリデーションの設定で押さえたいポイント

バリデーションの設定は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

エラーメッセージの設定

エラーメッセージの設定では、お問い合わせフォームの構築 — MW WP Form — #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

エラーメッセージはデフォルト状態では”未入力”と表示されます。このメッセージを自分の望む内容にカスタマイズするためには、functions.php ファイルに特定のコードを追記する必要があります。

functions.php

// MW WP Form エラーメッセージ
function my_error_message($error, $key, $rule)
{

    if ($key === 'お名前' && $rule === 'noempty') {
        return 'お名前が入力されていません';
    }
    if ($key === 'メールアドレス' && $rule === 'noempty') {
        return 'メールアドレスが入力されていません';
    }
    if ($key === '件名' && $rule === 'noempty') {
        return '件名が入力されていません';
    }
    if ($key === 'お問い合わせ内容' && $rule === 'noempty') {
        return 'お問い合わせ内容が入力されていません';
    }
    if ($key === 'チェック' && $rule === 'required') {
        return 'プライバシポリシーをご確認のうえチェックしてください';
    }

    return $error;
}
add_filter('mwform_error_message_mw-wp-form-◯', 'my_error_message', 10, 3);

これは設定内容の一例です。’mwform_error_message_mw-wp-form-◯’の部分は自身の設定番号を記述する必要がありますので注意ください。

エラーメッセージの設定で押さえたいポイント

エラーメッセージの設定は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

自動返信メールの設定

自動返信メールの設定では、お問い合わせフォームの構築 — MW WP Form — #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

こちらのプラグインでは自動返信メールのカスタムフィールドが設定されていますので非常に便利です。こちらにテキストを記述していきます。

注意事項

自動返信メールにクライアントが記述した内容を添付する際は、その内容のnameを{}で囲んで記述する必要があります。一方、自動返信メールのカスタムフィールドは、nameに{}を使用する必要はありません。したがって、この二つの違いに注意を払ってください。ローカル環境では自動返信メールの確認は残念ながら行うことができません。しかし、レンタルサーバーなどにファイルをアップロードすることで、自動返信メールのテストが可能になります。ぜひ、その方法でテストを行い、動作確認をしてみてください。以上です。設定はできましたでしょうか？もしわからないことやご質問がありましたら、お気軽にお問い合わせください。お問い合わせフォームはこちらです。

自動返信メールの設定で押さえたいポイント

自動返信メールの設定は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

実装前に確認しておきたいこと

ここでは、お問い合わせフォームの構築 — MW WP Form —を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

お問い合わせフォームの構築 — MW WP Form —が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

未入力・誤入力・正常入力の三つを試し、確認画面、完了画面、通知メール、管理側の記録まで確認します。スパム対策は表示の有無だけでなく、サーバー側で検証されているかも確認してください。

まとめ

エラーメッセージをカスタムすることができる
バリデーションルールが豊富に準備されている
自動返信メールが容易に設定できる
nameの設定が重要になる
ローカル環境では自動返信メールの送受信は確認できない
レンタルサーバーなどのサーバーにアップすることで確認ができる

お問い合わせフォームの構築 — MW WP Form — #2/3

目次