MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
Contact Form7エラーメッセージ設定

当記事では、Contact Form7のエラーメッセージをわかりやすくするコツを解説します。

コンタクトフォーム7エラーメッセージ設定

エラーメッセージとは、フォームに入力不備があった際に表示されるものです。
デフォルトだと分かりにくいものもあるため、ユーザーが迷わないように変更しましょう。

フォームのデザインは以下の記事で解説しています。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

Contact Formコンタクトフォーム7メッセージ設定

コンタクトフォーム7エラーメッセージデフォルト設定

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

メッセージが正常に送信された

コンタクトフォーム7メッセージが正常に送信された設定

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

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

メッセージの送信に失敗した

コンタクトフォーム7メッセージの送信に失敗した設定

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

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

入力内容に不備が見つかった

コンタクトフォーム7入力内容に不備が見つかった

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

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

送信がスパムと見なされた

コンタクトフォーム7送信がスパムと見なされた

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

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

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

送信ボタン下のエラーメッセージを上に表示する

コンタクトフォーム7エラーメッセージ位置の変更

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

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

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

承認が必要な項目が承認されていない

コンタクトフォーム7承認確認エラー

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

コンタクトフォーム7承認確認エラー表示設定

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

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

利用規約をご確認の上、ボックスにチェックを入れてください。
個人情報取扱内容をご確認の上、ボックスにチェックを入れてください。

入力必須の項目が入力されていない

コンタクトフォーム7必須項目エラー

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

こちらは必須項目です。

ユーザー入力が最大許容文字数を超える項目がある

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

20字以下で入力してください。
最大文字数制限が使用できるタグ
  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • テキストエリア

ユーザー入力が最小許容文字数に満たない項目がある

コンタクトフォーム7最小文字数制限エラー

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

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

ファイルアップロードが何らかの理由により失敗している

コンタクトフォーム7ファイルアップロードエラー

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

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

アップロードされたファイルが許可されたファイル形式に適合しない

コンタクトフォーム7ファイル形式エラー

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

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

アップロードされたファイルが大きすぎる

コンタクトフォーム7ファイルサイズエラー

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

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

ファイルのアップロードがPHPのエラーにより失敗している

コンタクトフォーム7ファイルPHPエラー

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

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

入力された日付の形式が正しくない

コンタクトフォーム7日付形式エラー

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

日付が最小成約日より小さい

コンタクトフォーム7最小成約日より小さいエラー

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

日付が最大成約日より大きい

コンタクトフォーム7最大成約日より大きいエラー

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

入力された数値の形式が正しくない

コンタクトフォーム7数値形式エラー

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

数値が最小制約値より小さい

コンタクトフォーム7最小制約値エラー

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

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

数値が最大制約値より大きい

コンタクトフォーム7最大制約値エラー

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

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

数値の指定は”以下以上“ではなく、”未満超過“なので気をつけてね。
下限20なら19以下がエラー
上限80なら81以上がエラー

クイズに対する正しい答えが入力されなかった

コンタクトフォーム7クイズタグエラー

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

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

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

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

とした場合、答えを「新にーさ」と入力すると不正解となります。

答えが正しくありません。ひらがなとカタカナは区別されます。

入力されたメールアドレスの形式が正しくない

コンタクトフォーム7メールアドレス形式エラー

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

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

ただ精度はそこまで高くないので、おまけ程度に考えておきましょう。
例えば以下のような入力でも送信されてしまいます。

111@あ.com:OK
ああ@gmail.com:NG

@より前に日本語だとエラーになりますが、@より後だと適当な形式でもエラーになりません
また「@」が全角でもエラーになります。

入力されたURLの形式が正しくない

コンタクトフォーム7URL形式エラー

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

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

こちらも精度は低いです。
おそらく「.ドット」が入っているか否かで判断しているようです。

.
ああああ.
....

上記のような入力例でもすべて送信されてしまいます。

入力された電話番号の形式が正しくない

コンタクトフォーム7電話番号エラー

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

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

こちらも精度は低いです。
数字が入っているか否かで判断しています。

1:OK
1-:OK
-:NG

数字一つや数字+「-」だけでも送れてしまいます。
「-」だけだとエラーになります。

[tel* your-tel minlength:10]

電話番号の場合は、基本10桁以下はないため、上記赤字の”最小入力数10“のコードを追記しておくと良いかもしれません。

エラーメッセージのCSSカスタム

コンタクトフォーム7エラーメッセージ表示場所

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

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

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

結論:Contact Formコンタクトフォーム7のメッセージ設定はユーザーにどこまで寄り添えるかの勝負

以上、コンタクトフォーム7のメッセージ設定について解説しました。

たかがエラー…されどエラー。
前回のタグの使い方と合わせて、どこまでユーザーのことを考えられるかになりますね。

ユーザーが迷わず入力できるようにわかりやすいフォームを目指しましょう。

よく一緒に読まれています

Contact Form7エラーメッセージ設定

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次