[Contact Form 7]「その他の設定」を確認しよう

Contact Form 7:その他の設定プラグイン
スポンサーリンク

今回は、お問い合わせフォーム作成プラグイン「Contact Form 7」の設定を行い、動作の確認を行うための「デモモード」やログインしているユーザーだけがお問い合わせフォームを送れるようにするための「購読者限定モード」の設定を行います。最後まで読むと、知識0の状態から「その他の設定」タブでの設定が自由自在にできるようになります。

とみー
とみー

今までに「フォーム」タブと「メッセージ」タブで設定した内容がきちんと反映されているかを確認するために、少なくとも1回はデモモードでチェックしましょう!

参考 Contact Form 7インストールしてないや…という方は、こちらの記事をご覧ください。

参考 「フォーム」タブや「メール」タブ、「メッセージ」タブでの設定は以下の記事で詳しく解説してあります。

スポンサーリンク

Contact Form 7の管理画面

まずはWordPressにログインし、左のサイドメニュー「 お問い合わせ」から「コンタクトフォーム」を開きましょう。

お問い合わせ:コンタクトフォーム

初めてこの画面を開いた場合、「コンタクトフォーム1」というフォームが1つ用意されているのでクリックしましょう。

フォームが1つもないという場合

新規追加」をクリックすれば「コンタクトフォーム1」とまったく同じものが作られるのでご安心ください。

すでにお問い合わせフォームを1度作っている場合

[Contact Form 7]お問い合わせフォームを設置しようの記事から来た方や、すでに自分でお問い合わせフォームを作っているという方は、そちらを開きましょう。

フォームの編集画面は次のようになっています。

フォーム編集画面

フォームの名前を変更

どこかに表示されるわけではないので「コンタクトフォーム1」という名前のままでも問題はありませんが、気になる方はわかりやすいように「お問い合わせフォーム」などに名前を変更しておきましょう。

フォーム名の変更

4つのタブ

フォーム編集画面:4つのタブ

Contact Form 7では、「フォーム」、「メール」、「メッセージ」、「その他の設定」の4つのタブでそれぞれ異なる設定をしていきます。

各タブで設定できることは、以下の通りです。

  • フォーム:ユーザー名、メールアドレスなどユーザーがフォームに入力する情報の設定
  • メール:フォームが届いたときに自動送信するメールの設定
  • メッセージ:フォームの入力不備や送信完了をユーザーに伝えるためのメッセージ設定
  • その他の設定:様々なカスタマイズのためのコードの設定(中級者向け

今回扱うのは、「その他の設定」タブの操作です。

スポンサーリンク

「その他の設定」タブ

「その他の設定」タブ

その他の設定タブでは、お問い合せフォームを

  • 実際に送信することなく動作の確認ができるようにしたり
  • ログインしたユーザーしか送信できないようにしたり

することができます。

とみー
とみー

ご覧の通り初期状態では何も入力されていないため、特別な動作は何も設定されていません。

順番に見ていきましょう。

スポンサーリンク

デモモード

みなさんはこの記事を読んでいる段階で、「フォーム」タグや「メッセージ」タグで色々なカスタマイズを行ってきたと思います。

しかし、そのカスタマイズは問題なく動作するでしょうか?

もしかしたらどこか設定を間違えて、思った通りに動かないようになっているかもしれません。

とみー
とみー

自分でカスタマイズしたときは、それが何であってもしっかり動作するかを確認することが大切です。

もちろん作成したお問い合わせフォームを開いて、自分のメールアドレスを入力して実際にお問い合わせを送って確認しても構わないのですが、余計なメールが増えてしまうのでもう少し手軽にチェックできたら嬉しいですよね。

そんなときに使うのがデモモードです。

デモモードとは

Contact Form 7:デモモードの説明

デモモードにすると、通常と同じようにお問い合わせフォームに入力し送信できますが、送信ボタンをクリックしても実際にメールが送られることはありません

お問い合わせフォームを入力している側からすると

ありがとうございます。メッセージは送信されました。

入力内容に問題があります。確認して再度お試しください。

といったメッセージは通常と同じように表示されるため、間違った内容を入力したときにきちんとエラーだと判定してくれているかなどをチェックするのに便利です。

「デモモード」という新しいお問い合わせフォームが作成されるのではなく、みなさんが作成したお問い合わせフォームのメール自動送信機能を一時的に無効化する、というのが正しいです。

デモモードの設定方法

お問い合わせフォームをデモモードにするには、「その他の設定」のところに

demo_mode: on

と入力しましょう。

デモモードの設定方法

入力が済んだら忘れずに保存しましょう。

「その他の設定」タブ:保存

デモモードで確認すべきもの

デモモードで確認すべきものは、以下の3種類です。

デモモードで検証するもの
  • 正しい入力をしたときにエラーが出ないか
  • 間違った入力をしたときにきちんとエラーが出るか
  • 自分で設定したメッセージがきちんと表示されているか

カスタマイズがうまくいっているかを確認するためには、設定した項目1つ1つにこの検証を行なっていく必要があります。

とみー
とみー

時間はかかりますが、すべての項目に対して確認を行うのが理想的です。

メール送信機能を無効にするため、メールが正しく送れているかやメールタグがきちんと入力した内容に置き換えられているかといったことはテストできません。こうした内容を確認するためには、通常のモードで実際にメールを送信する必要があります。

1つずつ見ていきましょう。

正しい入力をしたときにエラーが出ないか

これはそのままの意味です。例えば、

  • 1以上10以下の数値を選択させる入力欄
  • 「5」を入力

して送信ボタンを押したときに、通常であれば何もエラーは表示されず、送信ボタンの下に送信完了メッセージが表示されるはずです。

ありがとうございます。メッセージは送信されました。

しかし、

入力された数値が小さすぎます。

入力内容に問題があります。確認して再度お試しください。

のようなエラーが出た場合は、どこかの設定が間違っており正しく動作していないことが確認できます。カスタマイズの内容によってどこが間違っているかは異なるため、この場合の解決策を断定することはできませんが、

  • 入力の範囲(日付や数値、テキストの文字数)
  • 入力の種類(URLの入力欄なのに「電話番号」のタグを使っている、など)
  • アップロードできるファイルのサイズ・形式

など、フォームタグに関係する設定ミスが多いです。

間違った入力をしたときにきちんとエラーが出るか

こちらは先ほどの逆のケースです。例えば、

  • メールアドレスの入力欄
  • 「とみー」を入力

して送信ボタンを押したときに、通常であればメールアドレスの形式になっていないというエラーが表示され、送信ボタンの下には入力に不備があることを伝えるメッセージが表示されるはずです。

入力されたメールアドレスに間違いがあります。

入力内容に問題があります。確認して再度お試しください。

しかし、

ありがとうございます。メッセージは送信されました。

のようにエラーが出なかった場合は、やはりどこかの設定が間違っており正しく動作していないことが確認できます。こちらも先ほど同様に、多くの場合フォームタグの設定ミスが考えられます。次の設定をよく見直してみましょう。

  • 入力の範囲(日付や数値、テキストの文字数)
  • 入力の種類(メールアドレスの入力欄なのに「テキスト」のタグを使っている、など)
  • アップロードできるファイルのサイズ・形式

自分で設定したメッセージがきちんと表示されているか

これは、「メッセージ」タグで設定したメッセージがちゃんと反映されているかを確認しましょう、ということです。例えば、

  • メッセージが正常に送信された
    お問い合わせありがとうございます。お問い合わせ内容を確認の上、管理人よりご連絡差し上げます。

としている場合、(正常な)送信後にはこのメッセージが現れるはずです。

お問い合わせありがとうございます。お問い合わせ内容を確認の上、管理人よりご連絡差し上げます。

しかし、

ありがとうございます。メッセージは送信されました。

となってしまった場合は、おそらく「メッセージ」タブでの設定が保存されていないことなどが予想されます。

デモモード解除

デモモードでのテストが終わったら、通常のモードに戻すのを忘れないようにしましょう。

とみー
とみー

このままではユーザーがお問い合わせを送ってもメールが届かないため、せっかくのお問い合わせを無視して捨ててしまうことになります!

戻し方は簡単です。「demo_mode:on」の部分を削除するだけです。

デモモード解除方法

保存も忘れずにしましょう。

「その他の設定」タブ:保存

検証としての承諾確認

こちらは、お問い合わせフォームに承諾確認を行うタグを設置した人のみが対象です。

承認確認に関するエラーメッセージ

Contact Form 7で設置した入力欄では、入力に不備があった場合は基本的に入力欄のすぐ下にエラーメッセージが表示されるようになっています。

入力されたメールアドレスに間違いがあります。

しかし、承認確認のチェック欄だけ例外的に、送信ボタンの下にエラーメッセージが表示されるようになっています。

—ここには何も表示されません—

メッセージを送信する前に承諾確認が必要です。

また、他に入力不備がある場合、承認確認に関するエラーメッセージは表示されないようになっています。

入力されたメールアドレスに間違いがあります。

入力内容に問題があります。確認して再度お試しください。

つまり、まとめると次のような設定になっています。

承認確認に関するエラーメッセージ

他のすべての入力欄に不備がなく、承認確認へのチェックがないときのみ、送信ボタンの下にエラーメッセージが表示される。

他の入力欄と同じ設定にしたい場合

状況によっては、この承認確認に関するエラーメッセージの仕組みが煩わしく感じることがあります

次のお問い合わせフォームの例を考えてみましょう。

ユーザーはメールアドレス欄に「example@emailcom」と入力し、「規約に同意する」にチェックを入れるのを忘れて送信ボタンを押してしまいました。すると、次のようなエラーが出ます。

入力されたメールアドレスに間違いがあります。

入力内容に問題があります。確認して再度お試しください。

このエラーを見て、メールアドレスにドット(.)を入力するのを忘れていたことにユーザーは気付きます。「example@email.com」に直して再び送信ボタンを押すと、、、

メッセージを送信する前に承諾確認が必要です。

更なるエラーが現れました。もちろんここで「規約に同意する」にチェックを入れ忘れたことに気づけるのですが、この「エラーを解決したのにまた別のエラー」というのが人によって嫌な印象を与えてしまう場合があります。

とみー
とみー

だったら最初のエラーのときに教えてよ…

また、承認確認のチェック欄と送信ボタンが離れている場合には、「どこをチェックすればいいの?」とユーザーを迷わせてしまう原因にもなります。

このような場合が、承認確認も他の項目と同じように、チェックがなければすぐにチェック欄の下にエラーを表示したい場合です。

設定方法

お問い合わせフォームで他の入力欄と同じ設定にするには、「その他の設定」のところに

acceptance_as_validation: on

と入力しましょう。

検証としての承認確認:設定方法

入力が済んだら忘れずに保存しましょう。

「その他の設定」タブ:保存
複数のモードを使う場合

デモモードなどと組み合わせる場合は、単純に2行にして入力すればOKです。

複数のモードを使う場合は2行で入力

実際の動作

先ほどの例をもう1度取り上げましょう。

ユーザーがメールアドレス欄に「example@emailcom」と入力(ドット忘れ)し、「規約に同意する」にチェックを入れるのを忘れて送信ボタンを押してしまいました。

すると、この段階で2つのエラーが表示されます。

入力されたメールアドレスに間違いがあります。

メッセージを送信する前に承諾確認が必要です。

入力内容に問題があります。確認して再度お試しください。

すべてのエラーを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というお問い合わせメッセージ保存プラグインに関する設定なので一部の人にしか関係ありません。

とみー
とみー

上の3つのモードを押さえておくだけで十分でしょう。

まとめ

  • デモモード:「demo_mode:on」で有効化
    • 正しい入力をしたときにエラーが出ないか
    • 間違った入力をしたときにきちんとエラーが出るか
    • 自分で設定したメッセージがきちんと表示されているか
    • テスト後は忘れずに解除
  • 検証としての承認確認:「acceptance_as_validation: on」で有効化
    • ユーザーの利便性重視 → 有効化
    • 入力ミス対策重視 → 有効化しない
  • 購読者限定モード:「subscribers_only: true」で有効化
    • スパムチェックがないため注意
とみー
とみー

お疲れさまでした。これでContact Form 7の基本操作はマスターできたはずです!自由にフォームをカスタマイズしてばっちり使いこなしましょう!!

コメント

タイトルとURLをコピーしました