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: 「メッセージ」タブで変更する

いちばん簡単で、まず試すべき方法です。

  1. 管理画面の「お問い合わせ」→「コンタクトフォーム」を開き、対象のフォームを選びます。
  2. 編集画面の「メッセージ」タブを開きます。
  3. 送信完了時、送信失敗時、入力エラーがあるとき、必須項目が空のとき、メールアドレスの形式が正しくないとき、などの文言が並んでいるので、変更したい欄を書き換えます。
  4. 「保存」をクリックします。

メッセージには、フォームの入力値を表すメールタグ(例: [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 などの現行のクラスで調整する

お気軽にご相談ください

お見積りへ お問い合わせへ
▲