2026年5月20日

Contact Form 7のエラーメッセージをカスタマイズする方法

プラグイン関連

はじめに

Contact Form 7のデフォルトメッセージ（「送信しました」「入力内容をご確認ください」など）はサイトのトンやブランドに合わせてカスタマイズできます。管理画面の「メッセージ」タブとフィルターフックを使って変更する方法を解説します。

症状・原因

デフォルトのエラーメッセージが英語で表示される
「このフィールドを入力してください」を独自の文言に変えたい
送信成功後のメッセージをHTMLで装飾したい
バリデーションエラーの表示スタイルを変更したい

解決手順

ステップ1：管理画面のメッセージタブで変更する

お問い合わせ → フォームを選択 → 「メッセージ」タブ

主なメッセージ項目：

送信完了: 「ありがとうございます。メッセージは送信されました。」
バリデーションエラー: 「入力内容をご確認ください。」
送信失敗: 「メッセージを送信できませんでした。」
必須フィールド未入力: 「このフィールドは必須です。」
メール形式エラー: 「メールアドレスを正しく入力してください。」

ステップ2：wpcf7_messages フィルターで一括変更する

// functions.php — CF7の全メッセージをカスタマイズ
add_filter('wpcf7_messages', function(array $messages) {
    $messages['mail_sent_ok']['default'] = 'お問い合わせいただきありがとうございます。2営業日以内にご連絡いたします。';
    $messages['mail_sent_ng']['default'] = '送信に失敗しました。お電話でのお問い合わせをお願いします。';
    $messages['validation_error']['default'] = '入力内容に誤りがあります。赤枠の項目をご確認ください。';
    $messages['invalid_required']['default'] = '必須項目です。';
    $messages['invalid_email']['default'] = '正しいメールアドレスを入力してください。';
    return $messages;
});

ステップ3：送信成功メッセージをHTMLで装飾する

// functions.php — 成功メッセージにHTMLを使用
add_filter('wpcf7_ajax_json_echo', function(array $response, array $result) {
    if ('mail_sent' === $result['status']) {
        $response['message'] = '<strong>送信完了！</strong><br>担当者より折り返しご連絡します。';
    }
    return $response;
}, 10, 2);

ステップ4：エラー表示のCSSをカスタマイズする

/* エラーフィールドのスタイル */
.wpcf7-not-valid {
    border: 2px solid #d63638 !important;
    background-color: #fef2f2;
}

/* エラーメッセージのスタイル */
.wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 0.875em;
    font-weight: bold;
    margin-top: 4px;
    display: block;
}

/* 送信成功メッセージ */
.wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: #00a32a;
    color: #00a32a;
    background-color: #f0fdf4;
    padding: 12px 16px;
    border-radius: 4px;
}

ステップ5：フィールド個別のエラーメッセージを設定する

フォームタグに data-error-msg 属性を追加することで、フィールドごとに異なるメッセージを設定できます：

[text* your-name placeholder "お名前" data-error-msg "お名前を入力してください"]
[email* your-email placeholder "メールアドレス" data-error-msg "正しいメールアドレスを入力してください"]

注意事項

wpcf7_ajax_json_echo でHTMLを使う場合、XSSに注意して wp_kses() でサニタイズしてください
CF7 ver.5.6以降は wpcf7_display_message フィルターが利用可能です
CSSはテーマの style.css または 追加CSS（カスタマイザー）に追加してください

まとめ

CF7のメッセージは管理画面の「メッセージ」タブで簡単に変更できます。より柔軟なカスタマイズは wpcf7_messages フィルターを使い、視覚的な装飾はCSSで .wpcf7-not-valid と .wpcf7-response-output を上書きしてください。

Post Views: 4