Contact Form7のエラーメッセージをわかりやすくするコツ

デフォルトではこのように設定されています。
上段5つは送信ボタン周辺
それ以下はフォーム周辺のエラー文言です。
それぞれどんな時に表示されるのか？を解説しましたので、フォームの特性に合わせて文言を変更しましょう。

問い合わせ内容が”正常に送信された時に表示“される文言です。
自動返信メール設定やサンクスページ作成方法もあるため、そこまで重要ではありませんが、もう少し丁寧にすると良いかもしれません。

お問い合わせありがとうございます。内容を確認の上、ご連絡致します。

契約中の”レンタルサーバー側に問題がある時に送信ボタンを押すと表示される“文言です。
滅多に起きないものですが、デフォルトだとユーザー側に問題ないことが伝わらないため、以下のように変更しておきましょう。

現在サーバー側に障害が起きているようです。時間をおいて再度お試しください。

“フォームの入力内容にエラーがある状態で送信ボタンを押した時に表示“される文言です。
フォーム側にもエラー表示を設定できるため、さして重要ではありませんが、一応わかりやすくしておくと良いでしょう。

入力内容に不備があるようです。エラー内容をご確認の上、再度お試しください。

“問い合わせ内容がスパムであると判断された状態で送信ボタンを押した時に表示“される文言です。
スパムに対応する必要はないので、変更する必要はありません。

それなりにしっかり作り込んだ問い合わせフォームならば、送信するまでのハードルが高いため、スパムが来ることはほぼないです。

つまり、この文言が表示されることは滅多にありません。

送信ボタン関連のエラーは、通常ボタンの下に表示されます。
ボタン下だと気付かないおそれもあるため、メッセージをボタンの上に表示させることもできます。

[response]
[submit “上記の内容で送信する”]

送信ボタンタグの上に[response]を追記してください。

“承認確認のチェックボックスにチェックをせずに送信ボタンを押した時に表示“される文言です。
こちらはデフォルトだと表示されません。

「その他の設定」に以下のコードを追記することで表示できるようになります。
acceptance_as_validation: on

例えば、「利用規約」や「個人情報取扱」などを設置する場合は、文言を以下のように変更したほうが自然です。

利用規約をご確認の上、ボックスにチェックを入れてください。

“必須項目に入力されなかった時に表示“されます。
ただドロップダウンメニューなどは”入力項目ではなく選択項目“のため、以下のように変更しておくと良いでしょう。

こちらは必須項目です。

“フォームに最大文字数制限を指定した場合に表示“されます。
[text* your-name maxlength:20]←20字までしか入力できない。
ただ2024年2月時点では、制限をかけてもエラー表示されず、20字以上入力できなくなるだけになっています。
一応デフォルトのエラー表示はアバウトなので、指定した文字数を提示してあげると良いでしょう。

“フォームに最小文字数制限を指定した場合に表示“されます。
[text* your-name minlength:10]←10字未満だとエラー。
こちらはエラーが表示されるので、制限をかけた文字数に変更しておくと親切ですね。

10字以上入力してください。

おそらく”コンタクトフォーム7側で問題がある場合に表示“されるエラーです。
ユーザーの問題ではないため、一応以下のように変更しておくと良いでしょう。

現在ファイル添付ができない状態のようです。時間を置いて再度お試しください。

“指定したファイル形式以外が選択された時に表示“されます。
アップロードできる形式を指定してあげる形が良いでしょう。
例えば以下のようなタグなら
[file* file-264 limit:5mb filetypes:jpg|jpeg|png|webp|svg|gif|pdf|zip]

対応しているファイルはJPG/JPEG/PNG/Webp/svg/gif/pdf/zip形式のみです。

“指定したファイルサイズを超えた場合に表示“されます。
ファイルサイズの上限を含めると良いでしょう。
例えば上限を以下のように指定しているなら
[file* file-264 limit:5mb filetypes:jpg|jpeg|png|webp|svg|gif]

5MB以下でないと添付できません。ファイルの容量をお確かめください。

“レンタルサーバー側に問題がある時に表示“されます。
ユーザー側に問題がないため、以下のように変更しておきましょう。

現在サーバー側に問題が起きているようです。時間を置いて再度お試しください。

“日付の形式（西暦/月/日）が正しくない入力されていない時に表示“されます。
※.2024年2月時点では、日付タグは”選択式”となっており、そもそも入力できません。
そのためエラーになることはないので、デフォルトのままで良いかと思います。

“選択できる日付の下限を指定した場合、それより前を選択すると表示“されます。
※.2024年2月時点では、下限より前の日付は選択できない仕様になっています。
そのため変更の必要はありません。
[date* date-sample min:2024-01-01 max:2024-12-31]

“選択できる日付の上限を指定した場合、それより後を選択すると表示“されます。
※.2024年2月時点では、上限より後の日付は選択できない仕様になっています。
そのため変更の必要はありません。
[date* date-sample min:2024-01-01 max:2024-12-31]

“数値タグに数字以外を入力した場合に表示“されます。
※.2024年2月時点では、数字以外は入力できない仕様になっています。
そのため変更の必要はありません。

“数値の下限を指定した場合、それ未満の数が入力されると表示“されます。
ユーザーに下限の値がわかるように変更すると良いでしょう。
[number* number-sample min:20 max:80]

20以上を入力してください。

“数値の上限を指定した場合、それを超過した数が入力されると表示“されます。
ユーザーに上限の値がわかるように変更すると良いでしょう。
[number* number-sample min:20 max:80]

80以下で入力してください。

“クイズタグに設定した質問の答えが違う場合に表示“されます。
“大文字“と”小文字“は区別されません。
“ひらがな“と”カタカナ“は区別されます。

[quiz quiz-sample "質問：2024年から始まった税制優遇制度の名称は？|新NISA"]

とした場合、答えは「新NISAもしくは新nisa」でも送れます。

[quiz quiz-sample  "質問：2024年から始まった税制優遇制度の名称は？|新ニーサ"]

“メールアドレスタグ：[email* your-email]を使ったフォームに形式がおかしいものが混じっていると表示“されます。
そのままでも良い気がしますが、私はこんな感じにしています。

メールアドレスの形式に不備があるようです。もう一度お確かめください。

“URLタグ：[url* your-url]を使ったフォームに形式がおかしいものが混じっていると表示“されます。
メールアドレスと同じくもう少し丁寧にしておくと良いでしょう。

URLの形式に不備があるようです。もう一度お確かめください。

“電話番号タグ：[tel* your-tel]を使ったフォーム”数字“と”–半角ハイフン“以外を入力すると表示“されます。
入力可能な形式を伝える形が良いでしょう。

数字と半角「-」以外は入力できません。

デフォルトのエラーメッセージは、フォーム上部にも表示されてしまうため、項目が多いと目障りです。
またテキストカラーが黒字だと分かりづらいため、赤字に変更しましょう。
以下のコードを追記してください。

/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
    display: none;
}

/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
    color: #e92323;
}