2026年5月20日
2026年5月20日
Contact Form 7のエラーメッセージを変更する方法|メッセージタブ・フィルター・CSS
Contact Form 7(CF7)の「送信しました」「入力内容に問題があります」といったメッセージは、フォームごとの設定画面で変更できます。複数のフォームの文言をまとめて変えたい場合はフィルターフック、見た目を変えたい場合はCSSを使います。この記事では、2026年10月時点のContact Form 7 6.x系で、それぞれの方法と、よくある誤解(存在しない属性や廃止されたフックなど)を説明します。
方法の選び方
| やりたいこと | 方法 | 既存のフォームへの効果 |
|---|---|---|
| 特定のフォームの文言を変える | 編集画面の「メッセージ」タブ | そのフォームだけに効く |
| すべてのフォームの文言をまとめて変える | wpcf7_display_message フィルター |
既存のフォームにも効く |
| これから作るフォームの初期値を変える | wpcf7_messages フィルター |
既存のフォームには効かない |
| 特定の項目に独自のチェックとメッセージを付ける | wpcf7_validate_{型} フィルター |
フィルターを書いた項目に効く |
| 色や枠線など見た目を変える | CSS | すべてのフォームに効く |
方法1: 「メッセージ」タブで変更する
いちばん簡単で、まず試すべき方法です。
- 管理画面の「お問い合わせ」→「コンタクトフォーム」を開き、対象のフォームを選びます。
- 編集画面の「メッセージ」タブを開きます。
- 送信完了時、送信失敗時、入力エラーがあるとき、必須項目が空のとき、メールアドレスの形式が正しくないとき、などの文言が並んでいるので、変更したい欄を書き換えます。
- 「保存」をクリックします。
メッセージには、フォームの入力値を表すメールタグ(例: [your-name])も使えます。たとえば送信完了のメッセージを「[your-name] 様、お問い合わせありがとうございます。」とすると、入力された名前が入ります。
フォームを作成した時点で、その時点の既定のメッセージがフォームごとに保存されます。このため、後から既定値を変えても、作成済みのフォームの文言は変わりません(次の方法2・3の違いはここから来ています)。
方法2: すべてのフォームの文言をまとめて変える
フォームが多く、一つずつ書き換えるのが手間な場合は、wpcf7_display_message フィルターを使います。このフィルターはメッセージを表示する直前に実行されるため、作成済みのフォームにも効きます。第1引数がメッセージ、第2引数がメッセージの種類(ステータス)です。
テーマの functions.php(子テーマ推奨)か、独自のプラグインに追加します。
<?php
add_filter(
'wpcf7_display_message',
function ( $message, $status ) {
$custom = array(
'mail_sent_ok' => 'お問い合わせありがとうございます。2営業日以内にご連絡します。',
'mail_sent_ng' => '送信できませんでした。時間をおいて再度お試しください。',
'validation_error' => '入力内容に誤りがあります。各項目のメッセージをご確認ください。',
'invalid_required' => 'この項目は入力が必要です。',
'invalid_email' => 'メールアドレスの形式で入力してください。',
);
if ( isset( $custom[ $status ] ) ) {
return $custom[ $status ];
}
return $message;
},
10,
2
);
このフィルターで返した文言は、「メッセージ」タブの設定より優先されます。特定のフォームだけを対象にしたい場合は、表示中のフォームを取得して条件を付けます。
<?php
add_filter(
'wpcf7_display_message',
function ( $message, $status ) {
$form = wpcf7_get_current_contact_form();
// 編集画面のURLに含まれる post= の数字がフォームID
if ( $form && 123 === $form->id() && 'mail_sent_ok' === $status ) {
return '資料請求を受け付けました。';
}
return $message;
},
10,
2
);
主なステータスの名前は次のとおりです。
| ステータス | 表示される場面 |
|---|---|
mail_sent_ok |
送信に成功したとき |
mail_sent_ng |
メールの送信に失敗したとき |
validation_error |
入力エラーがあるとき(フォーム下部の全体メッセージ) |
spam |
スパムと判定されたとき |
accept_terms |
同意のチェックボックスにチェックがないとき |
invalid_required |
必須項目が空のとき(項目の下に出るメッセージ) |
invalid_too_long / invalid_too_short |
文字数が上限を超える・下限に足りないとき |
invalid_email / invalid_url / invalid_tel |
メールアドレス・URL・電話番号の形式が正しくないとき |
新しく作るフォームの初期値を変える場合
wpcf7_messages フィルターは、メッセージの一覧と初期値を定義するフィルターです。ここで default を書き換えると、これから作るフォームの「メッセージ」タブの初期値が変わります。作成済みのフォームには保存済みの文言があるため、効きません。
<?php
add_filter(
'wpcf7_messages',
function ( $messages ) {
if ( isset( $messages['mail_sent_ok'] ) ) {
$messages['mail_sent_ok']['default'] = 'お問い合わせありがとうございます。';
}
return $messages;
}
);
既存のフォームの文言を変えたい場合は、方法1か wpcf7_display_message を使ってください。
メッセージにHTMLは使えない
送信完了のメッセージを太字にしたり改行を入れたりしたくなりますが、CF7はメッセージを表示する前にHTMLタグを取り除き、画面にも文字列として挿入します。<strong> や <br> を書いても、タグは表示されません。
以前は wpcf7_ajax_json_echo フィルターで送信結果を書き換える方法が紹介されていましたが、このフィルターはContact Form 7 5.2で非推奨になり、wpcf7_feedback_response に置き換えられています。どちらを使っても、メッセージは文字列として表示されます。見た目を変えたい場合は、次の節のCSSで調整してください。フォーム自体の作り方はお問い合わせフォームの基本設定を参照してください。
項目ごとに独自のチェックとメッセージを付ける
CF7のフォームタグには、項目ごとにエラーメッセージを指定する属性(data-error-msg など)はありません。項目ごとに異なる文言を出したい場合は、wpcf7_validate_{フォームタグの型} フィルターで独自のチェックを追加し、invalidate() でメッセージを設定します。
次の例は、フォームに [email* your-email] と [email* your-email-confirm] を置き、2つの入力が一致しないときに確認欄にメッセージを出すものです。必須項目の型には * が付くため、フィルター名も wpcf7_validate_email* になります。
<?php
add_filter( 'wpcf7_validate_email*', 'my_cf7_confirm_email', 20, 2 );
function my_cf7_confirm_email( $result, $tag ) {
if ( 'your-email-confirm' !== $tag->name ) {
return $result;
}
$email = isset( $_POST['your-email'] ) ? trim( wp_unslash( $_POST['your-email'] ) ) : '';
$confirm = isset( $_POST['your-email-confirm'] ) ? trim( wp_unslash( $_POST['your-email-confirm'] ) ) : '';
if ( $email !== $confirm ) {
$result->invalidate( $tag, '確認用のメールアドレスが一致しません。' );
}
return $result;
}
注意点が2つあります。
- 標準のチェックが先に動く: 必須項目が空、形式が正しくない、といった標準のエラーが同じ項目に先に付いた場合、
invalidate()で後から渡したメッセージは表示されません。最初のエラーが優先されます。 - 必須メッセージを項目ごとに変える標準の方法はない: 「お名前を入力してください」「電話番号を入力してください」のように、必須エラーの文言を項目ごとに変える設定はありません。必須エラーの文言は
invalid_requiredの1種類なので、「この項目は入力が必要です。」のように、どの項目にも合う文言にしておくのが現実的です。
エラー表示の見た目をCSSで変える
Contact Form 7 5.2以降、送信結果のメッセージ欄(.wpcf7-response-output)の色分けは、フォーム要素に付くクラス(sent、invalid、failed など)で行われています。以前の .wpcf7-mail-sent-ok や .wpcf7-validation-errors といったクラスは、現在の版では使われていません。
/* 入力エラーのある項目 */
.wpcf7 .wpcf7-not-valid {
border: 2px solid #d63638;
background-color: #fef2f2;
}
/* 項目の下に出るエラーメッセージ */
.wpcf7 .wpcf7-not-valid-tip {
color: #d63638;
font-size: 0.875em;
margin-top: 4px;
}
/* 送信結果のメッセージ欄(共通) */
.wpcf7 form .wpcf7-response-output {
padding: 12px 16px;
border-radius: 4px;
}
/* 送信成功 */
.wpcf7 form.sent .wpcf7-response-output {
border-color: #00a32a;
color: #00a32a;
background-color: #f0fdf4;
}
/* 入力エラー・同意なし */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #dba617;
background-color: #fcf9e8;
}
/* 送信失敗 */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #d63638;
background-color: #fef2f2;
}
CF7の標準スタイルと同じ詳細度のセレクタ(.wpcf7 form.sent .wpcf7-response-output など)で書き、テーマのスタイルシートや「外観」→「カスタマイズ」→「追加CSS」(ブロックテーマではサイトエディターのスタイル→「追加CSS」)に追加します。読み込み順の関係で効かない場合だけ、セレクタの詳細度を上げてください。!important を多用すると後から調整しにくくなります。
変更が反映されないとき
wpcf7_messagesを使っている: 作成済みのフォームには効きません。wpcf7_display_messageに切り替えるか、「メッセージ」タブで変更します。- フィルターの引数の数:
wpcf7_display_messageで$statusを使う場合、add_filter()の第4引数に2を指定します。省略すると$statusが渡されず、エラーになります。 - キャッシュ: ページキャッシュやCSSの最適化プラグインを使っている場合は、キャッシュを削除してから確認します。
まとめ
- フォーム1つの文言は、編集画面の「メッセージ」タブで変える
- 複数のフォームをまとめて変えるなら
wpcf7_display_message。既存のフォームにも効き、第2引数でメッセージの種類を判定できる wpcf7_messagesはこれから作るフォームの初期値を変えるもので、既存のフォームには効かない- メッセージにHTMLは使えない。
wpcf7_ajax_json_echoは5.2で非推奨になりwpcf7_feedback_responseに置き換えられた data-error-msgという属性はない。項目ごとの独自チェックはwpcf7_validate_{型}とinvalidate()で追加する- 見た目は
.wpcf7-not-valid、.wpcf7-not-valid-tip、.wpcf7 form.sent .wpcf7-response-outputなどの現行のクラスで調整する