WordPressでよく使われる Contact Form 7（CF7）。
フォーム送信後に「送信ボタンの文字を変更したい」と思ったことはありませんか？
例えば、送信後に「RECEIVED」と表示させれば、ユーザーに送信完了を分かりやすく伝えられます。
この記事では 送信成功時にボタンのテキストを変える方法 を解説します。
目次（もくじ）
送信成功時にボタンのテキストを変える方法
全てのフォーム共通です。
document.addEventListener('wpcf7submit', function(event) {
// 送信成功のときだけ処理
if (event.detail.status !== 'mail_sent') return;
// このフォーム内の送信ボタンを取得
const wrapper = event.target.closest('.wpcf7');
const btn = wrapper.querySelector('input[type="submit"]');
if (btn) {
btn.value = 'RECEIVED'; // ボタンテキストを変更
btn.disabled = true; // 二重送信防止のため無効化
}
}, false);特定のフォームだけ、送信成功時にボタンのテキストを変える方法
お問い合わせフォームや資料請求、採用フォームなどフォームが複数ある場合はこちら
document.addEventListener('wpcf7submit', function(event) {
// 成功した場合のみ実行
if (event.detail.status !== 'mail_sent') return;
const wrapper = event.target.closest('.wpcf7');
// 対象フォームIDだけ
if (wrapper && wrapper.id === 'wpcf7-f11550-p11548-o1') {
const btn = wrapper.querySelector('#formbtn');
if (btn) {
btn.value = 'RECEIVED';
btn.disabled = true; // 任意でボタンを無効化
}
}
}, false);ContactForm7では送信完了のタイミングでイベントが発火します。
wpcf7submit → 送信ボタンが押されたとき（成功・失敗すべて）
event.detail.status で状態を判定できます：
mail_sent → 送信成功 ✅
validation_failed → 必須未入力 ❌
mail_failed → 送信失敗 ❌
spam → スパム判定 ❌
- 特定のフォームだけ反映
→ 複数フォームがある場合でも安心です。 - 送信成功時のみ変更
→ 未入力やエラーのときはボタンは変わりません。 - ボタン無効化も可能
→ 二重送信を防止できます。
