今までに「フォーム」タブと「メッセージ」タブで設定した内容がきちんと反映されているかを確認するために、少なくとも１回はデモモードでチェックしましょう！
参考 Contact Form 7インストールしてないや…という方は、こちらの記事をご覧ください。
参考 「フォーム」タブや「メール」タブ、「メッセージ」タブでの設定は以下の記事で詳しく解説してあります。
- 「フォーム」タブの設定：[Contact Form 7]お問い合わせフォームに好きな項目を追加しよう
- 「メール」タブの設定：[Contact Form 7]受信したお問い合わせに自動返信しよう
- 「メッセージ」タブの設定：[Contact Form 7]ユーザーへのメッセージを工夫しよう
Contact Form 7の管理画面
まずはWordPressにログインし、左のサイドメニュー「 お問い合わせ」から「コンタクトフォーム」を開きましょう。
初めてこの画面を開いた場合、「コンタクトフォーム1」というフォームが１つ用意されているのでクリックしましょう。
「新規追加」をクリックすれば「コンタクトフォーム1」とまったく同じものが作られるのでご安心ください。
［Contact Form 7］お問い合わせフォームを設置しようの記事から来た方や、すでに自分でお問い合わせフォームを作っているという方は、そちらを開きましょう。
フォームの編集画面は次のようになっています。
フォームの名前を変更
どこかに表示されるわけではないので「コンタクトフォーム1」という名前のままでも問題はありませんが、気になる方はわかりやすいように「お問い合わせフォーム」などに名前を変更しておきましょう。
４つのタブ
Contact Form 7では、「フォーム」、「メール」、「メッセージ」、「その他の設定」の４つのタブでそれぞれ異なる設定をしていきます。
各タブで設定できることは、以下の通りです。
- フォーム：ユーザー名、メールアドレスなどユーザーがフォームに入力する情報の設定
- メール：フォームが届いたときに自動送信するメールの設定
- メッセージ：フォームの入力不備や送信完了をユーザーに伝えるためのメッセージ設定
- その他の設定：様々なカスタマイズのためのコードの設定（中級者向け）
今回扱うのは、「その他の設定」タブの操作です。
「その他の設定」タブ
その他の設定タブでは、お問い合せフォームを
- 実際に送信することなく動作の確認ができるようにしたり
- ログインしたユーザーしか送信できないようにしたり
することができます。
ご覧の通り初期状態では何も入力されていないため、特別な動作は何も設定されていません。
順番に見ていきましょう。
デモモード
みなさんはこの記事を読んでいる段階で、「フォーム」タグや「メッセージ」タグで色々なカスタマイズを行ってきたと思います。
もしかしたらどこか設定を間違えて、思った通りに動かないようになっているかもしれません。
自分でカスタマイズしたときは、それが何であってもしっかり動作するかを確認することが大切です。
もちろん作成したお問い合わせフォームを開いて、自分のメールアドレスを入力して実際にお問い合わせを送って確認しても構わないのですが、余計なメールが増えてしまうのでもう少し手軽にチェックできたら嬉しいですよね。
そんなときに使うのがデモモードです。
デモモードとは
デモモードにすると、通常と同じようにお問い合わせフォームに入力し送信できますが、送信ボタンをクリックしても実際にメールが送られることはありません。
お問い合わせフォームを入力している側からすると
ありがとうございます。メッセージは送信されました。
や
入力内容に問題があります。確認して再度お試しください。
といったメッセージは通常と同じように表示されるため、間違った内容を入力したときにきちんとエラーだと判定してくれているかなどをチェックするのに便利です。
デモモードの設定方法
お問い合わせフォームをデモモードにするには、「その他の設定」のところに
demo_mode: on
と入力しましょう。
入力が済んだら忘れずに保存しましょう。
デモモードで確認すべきもの
デモモードで確認すべきものは、以下の３種類です。
- 正しい入力をしたときにエラーが出ないか
- 間違った入力をしたときにきちんとエラーが出るか
- 自分で設定したメッセージがきちんと表示されているか
カスタマイズがうまくいっているかを確認するためには、設定した項目１つ１つにこの検証を行なっていく必要があります。
時間はかかりますが、すべての項目に対して確認を行うのが理想的です。
1つずつ見ていきましょう。
正しい入力をしたときにエラーが出ないか
これはそのままの意味です。例えば、
- 1以上10以下の数値を選択させる入力欄に
- 「5」を入力
して送信ボタンを押したときに、通常であれば何もエラーは表示されず、送信ボタンの下に送信完了メッセージが表示されるはずです。
ありがとうございます。メッセージは送信されました。
しかし、
入力された数値が小さすぎます。
入力内容に問題があります。確認して再度お試しください。
のようなエラーが出た場合は、どこかの設定が間違っており正しく動作していないことが確認できます。カスタマイズの内容によってどこが間違っているかは異なるため、この場合の解決策を断定することはできませんが、
- 入力の範囲（日付や数値、テキストの文字数）
- 入力の種類（URLの入力欄なのに「電話番号」のタグを使っている、など）
- アップロードできるファイルのサイズ・形式
など、フォームタグに関係する設定ミスが多いです。
間違った入力をしたときにきちんとエラーが出るか
こちらは先ほどの逆のケースです。例えば、
- メールアドレスの入力欄に
- 「とみー」を入力
して送信ボタンを押したときに、通常であればメールアドレスの形式になっていないというエラーが表示され、送信ボタンの下には入力に不備があることを伝えるメッセージが表示されるはずです。
入力されたメールアドレスに間違いがあります。
入力内容に問題があります。確認して再度お試しください。
しかし、
ありがとうございます。メッセージは送信されました。
のようにエラーが出なかった場合は、やはりどこかの設定が間違っており正しく動作していないことが確認できます。こちらも先ほど同様に、多くの場合フォームタグの設定ミスが考えられます。次の設定をよく見直してみましょう。
- 入力の範囲（日付や数値、テキストの文字数）
- 入力の種類（メールアドレスの入力欄なのに「テキスト」のタグを使っている、など）
- アップロードできるファイルのサイズ・形式
自分で設定したメッセージがきちんと表示されているか
これは、「メッセージ」タグで設定したメッセージがちゃんと反映されているかを確認しましょう、ということです。例えば、
- メッセージが正常に送信された：
お問い合わせありがとうございます。お問い合わせ内容を確認の上、管理人よりご連絡差し上げます。
としている場合、（正常な）送信後にはこのメッセージが現れるはずです。
お問い合わせありがとうございます。お問い合わせ内容を確認の上、管理人よりご連絡差し上げます。
しかし、
ありがとうございます。メッセージは送信されました。
となってしまった場合は、おそらく「メッセージ」タブでの設定が保存されていないことなどが予想されます。
デモモード解除
デモモードでのテストが終わったら、通常のモードに戻すのを忘れないようにしましょう。
このままではユーザーがお問い合わせを送ってもメールが届かないため、せっかくのお問い合わせを無視して捨ててしまうことになります！
戻し方は簡単です。「demo_mode:on」の部分を削除するだけです。
保存も忘れずにしましょう。
検証としての承諾確認
承認確認に関するエラーメッセージ
Contact Form 7で設置した入力欄では、入力に不備があった場合は基本的に入力欄のすぐ下にエラーメッセージが表示されるようになっています。
入力されたメールアドレスに間違いがあります。
しかし、承認確認のチェック欄だけ例外的に、送信ボタンの下にエラーメッセージが表示されるようになっています。
—ここには何も表示されません—
メッセージを送信する前に承諾確認が必要です。
また、他に入力不備がある場合、承認確認に関するエラーメッセージは表示されないようになっています。
入力されたメールアドレスに間違いがあります。
入力内容に問題があります。確認して再度お試しください。
つまり、まとめると次のような設定になっています。
他のすべての入力欄に不備がなく、承認確認へのチェックがないときのみ、送信ボタンの下にエラーメッセージが表示される。
他の入力欄と同じ設定にしたい場合
状況によっては、この承認確認に関するエラーメッセージの仕組みが煩わしく感じることがあります。
次のお問い合わせフォームの例を考えてみましょう。
ユーザーはメールアドレス欄に「example@emailcom」と入力し、「規約に同意する」にチェックを入れるのを忘れて送信ボタンを押してしまいました。すると、次のようなエラーが出ます。
入力されたメールアドレスに間違いがあります。
入力内容に問題があります。確認して再度お試しください。
このエラーを見て、メールアドレスにドット（.）を入力するのを忘れていたことにユーザーは気付きます。「example@email.com」に直して再び送信ボタンを押すと、、、
メッセージを送信する前に承諾確認が必要です。
更なるエラーが現れました。もちろんここで「規約に同意する」にチェックを入れ忘れたことに気づけるのですが、この「エラーを解決したのにまた別のエラー」というのが人によって嫌な印象を与えてしまう場合があります。
だったら最初のエラーのときに教えてよ…
また、承認確認のチェック欄と送信ボタンが離れている場合には、「どこをチェックすればいいの？」とユーザーを迷わせてしまう原因にもなります。
このような場合が、承認確認も他の項目と同じように、チェックがなければすぐにチェック欄の下にエラーを表示したい場合です。
設定方法
お問い合わせフォームで他の入力欄と同じ設定にするには、「その他の設定」のところに
acceptance_as_validation: on
と入力しましょう。
入力が済んだら忘れずに保存しましょう。
デモモードなどと組み合わせる場合は、単純に2行にして入力すればOKです。
実際の動作
先ほどの例をもう1度取り上げましょう。
ユーザーがメールアドレス欄に「example@emailcom」と入力（ドット忘れ）し、「規約に同意する」にチェックを入れるのを忘れて送信ボタンを押してしまいました。
すると、この段階で２つのエラーが表示されます。
入力されたメールアドレスに間違いがあります。
メッセージを送信する前に承諾確認が必要です。
入力内容に問題があります。確認して再度お試しください。
すべてのエラーを1度に確認できるため「エラーに次ぐエラー」を防ぐことができますし、どこのチェック欄にチェックしなければいけないのかも簡単にわかりますね。
このモードを使うべきかどうか
ここまでは主にメリットに焦点を当ててきましたが、実のところこのモードを使うかどうかはお好みです。
確かにユーザーに負担をかけてしまうのは事実ですが、他のすべての入力欄に不備がないことが確認できた場合にやっとエラーが出るという設計は、2重チェックでユーザーの入力ミスを防ぐ効果を高めることができます。
「入力に不備があるかどうか」というのはあくまで形式のチェックにすぎないなので、「example」がメールアドレスとして正しくないのは判断できても、「example@email.com」と「exampl@email.com」の違いは判断できないのです。
ユーザーのメールアドレスが「example@email.com」なのに間違えて「ezample@email.com」と入力してしまった場合、2重チェックがある方が間違いに気付きやすくなるのは自明でしょう。
利便性を重視するか、入力ミスへの対策を重視するか、ということです。
ちなみに、このモードを使用する場合はデモモードと異なり解除する必要はありません。
購読者限定モード
お問い合わせフォームをサイトにログインしている人だけが送信できるようにしたい場合は、購読者限定モードを使うことができます。
設定方法
お問い合わせフォームを購読者限定モードにするには、「その他の設定」のところに
subscribers_only: true
と入力しましょう。
入力が済んだら忘れずに保存しましょう。
実際の動作
サイトにログインしていないユーザーがお問い合わせページを開くと、次のような画面が表示されます。
このように、会員でない人によるお問い合わせを禁止することができます。
もちろんログインしたユーザーには、通常通りの画面が表示され、お問い合わせは問題なく利用できます。
注意点
Contact Form 7の公式ページでは、購読者限定モードに関して以下のように説明しています。
購読者限定モードのコンタクトフォームでは対スパム検証は行われません。信頼できるユーザーだけが利用できるようになっているはずだからです。この前提があなたのサイトで成り立たないなら、購読者限定モードは諦めたほうがいいでしょう。
Contact Form 7「その他の設定」
誰でも会員登録ができるようなサイトでは悪質なユーザーが紛れ込む可能性も否定できないため、そうした場合には購入者限定モードを使うのはおすすめできない、ということです。
そういったケースでは、わざわざ購読者限定モードを使うのではなく、他のスパム対策プラグインなどで対策した方が良いでしょう。
その他のモード
上で紹介したモード以外には、メールをスキップするskip_mail設定やメッセージの保存に関するdo_not_store設定などがありますが、これらはFlamingoというお問い合わせメッセージ保存プラグインに関する設定なので一部の人にしか関係ありません。
上の３つのモードを押さえておくだけで十分でしょう。
まとめ
- デモモード：「
demo_mode:on」で有効化- 正しい入力をしたときにエラーが出ないか
- 間違った入力をしたときにきちんとエラーが出るか
- 自分で設定したメッセージがきちんと表示されているか
- テスト後は忘れずに解除
- 検証としての承認確認：「
acceptance_as_validation: on」で有効化- ユーザーの利便性重視 → 有効化
- 入力ミス対策重視 → 有効化しない
- 購読者限定モード：「
subscribers_only: true」で有効化- スパムチェックがないため注意
お疲れさまでした。これでContact Form 7の基本操作はマスターできたはずです！自由にフォームをカスタマイズしてばっちり使いこなしましょう！！
コメント