MENU
  1. ホーム
  2. YouTube_Contact Form 7で「送信できた？」を防ぐ｜送信中表示の設定方法

YouTube_Contact Form 7で「送信できた？」を防ぐ｜送信中表示の設定方法

YouTubeで紹介したコードは以下に記載しています。

SWELL以外でも、同じJavaScriptとCSSを利用できます。

JavaScriptは、使用中のテーマに次のような入力欄があれば、そちらに追加してください。

  • カスタムJavaScript
  • フッターコード
  • bodyタグ終了直前に出力するコード

入力欄がない場合は、コードを追加できるプラグインや子テーマを利用する方法があります。

CSSは、WordPress管理画面の
「外観」→「カスタマイズ」→「追加CSS」
に追加します。

テーマやプラグインによって設定場所や入力形式が異なるため、詳しい追加方法は使用中のテーマ・プラグインの案内をご確認ください。

コード

💻JavaScriptコード

<!-- Contact Form 7：送信ボタンを「送信中…」に変更 -->
<script>
document.addEventListener('DOMContentLoaded', function () {

  document.querySelectorAll('.wpcf7 form').forEach(function (form) {
    form.addEventListener('submit', function () {
      const button = form.querySelector('.wpcf7-submit');

      if (!button) return;

      // 元のボタン表示を保存
      if (!button.dataset.originalText) {
        button.dataset.originalText =
          button.tagName === 'INPUT'
            ? button.value
            : button.textContent;
      }

      // ボタン表示を「送信中…」に変更
      if (button.tagName === 'INPUT') {
        button.value = '送信中…';
      } else {
        button.textContent = '送信中…';
      }

      button.classList.add('is-sending');
    });
  });

  // 送信処理が完了したら元の表示に戻す
  document.addEventListener('wpcf7submit', function (event) {
    const button = event.target.querySelector('.wpcf7-submit');

    if (!button || !button.dataset.originalText) return;

    if (button.tagName === 'INPUT') {
      button.value = button.dataset.originalText;
    } else {
      button.textContent = button.dataset.originalText;
    }

    button.classList.remove('is-sending');
  });

});
</script>

🎨CSSコード

/* Contact Form 7：送信中のボタン表示 */
.wpcf7-submit.is-sending {
  opacity: 0.6;
  cursor: wait;
}

関連記事