カテゴリー
お問い合わせ

【WordPress】Contact Form 7で二重送信防止＆サンクスページへのリダイレクトを実装する方法

WordPress
目次

以前の記事では、Contact Form 7（以下CF7）の自動整形やデフォルトCSSを無効化し、オリジナルのデザインを適用する方法を解説しました。

今回はそこからさらに一歩踏み込み、JavaScriptを使った機能面のカスタマイズを行います。 お問い合わせフォームにおいて、「送信ボタンの連打による二重送信」を防ぐことや、送信完了後に「サンクスページ（Thanksページ）へリダイレクト」させることは、ユーザー体験（UX）を向上させ、システムのエラーを防ぐために必須となる実装です。

CF7が用意している独自のDOMイベント（wpcf7mailsentなど）を活用して、スマートに制御する方法をご紹介します！

HTMLとPHPの準備（データの受け渡し）

まずは、JavaScriptで操作するための準備を行います。

送信ボタンのクラス名を確認

JS側でボタンを制御するため、送信ボタンにクラスが付与されているか確認します。（※フォーム全体の構造は以前の記事をご参照ください）

<div class="p-contact-form__submit-wrapper">
  [submit class:p-contact-form__submit "送信する"]
</div>

functions.php からJSへサンクスページのURLを渡す

リダイレクト先のURLをJSファイルに直接ハードコードするのではなく、WordPressの作法に則り wp_localize_script を使ってPHP側から安全にデータを渡します。これにより、環境が変わってもURLがズレる心配がありません。

// functions.php のスクリプト読み込み部分
if (is_page('contact')) {
  // 'tech-blog-common' というJSに対して、'myGlobalData' という名前でデータを渡す
  wp_localize_script('tech-blog-common', 'myGlobalData', array(
    'thanksUrl' => esc_url(home_url('/thanks/'))
  ));
}

JavaScriptの実装

CF7では、フォームの送信状況に応じて wpcf7mailsent（送信成功）や wpcf7invalid（入力エラー）といった独自のカスタムイベントが発火するため、これを活用して処理を分岐させます。以下のcontact.jsを共通jsでモジュールとして読み込み(import)する想定です！

// contact.js
export const initContactForm = () => {
  const form = document.querySelector('.wpcf7-form');
  const submitButton = document.querySelector('.p-contact-form__submit');

  // お問い合わせページ以外では処理を終了
  if (!form || !submitButton) return;

  // ① 送信処理が始まったら、ボタンを disabled にして連打（二重送信）を防ぐ
  form.addEventListener('submit', () => {
    submitButton.disabled = true;
  });

  // ② メールの送信が【成功】した時の処理（リダイレクト）
  document.addEventListener('wpcf7mailsent', () => {
    // functions.phpから渡された myGlobalData を使用してリダイレクト
    if (typeof myGlobalData !== 'undefined' && myGlobalData.thanksUrl) {
      window.location.href = myGlobalData.thanksUrl;
    }
  });

  // ③ 送信に【失敗】した時は、ボタンの無効化を解除して再入力できるようにする
  const enableButton = () => {
    submitButton.disabled = false;
  };

  // 入力エラー（必須項目が空など）
  document.addEventListener('wpcf7invalid', enableButton);
  // スパム判定
  document.addEventListener('wpcf7spam', enableButton);
  // サーバーエラーなど
  document.addEventListener('wpcf7mailfailed', enableButton);
};

エラー時のボタン復帰を忘れずに！
submit 時にボタンを disabled にするだけだと、もしユーザーが必須項目を入力し忘れてエラーになった場合、ボタンが押せないまま何もできなくなってしてしまいます。必ず wpcf7invalid などの失敗イベントもキャッチして、ボタンの disabled を解除（false）してあげる処理が必要です。

まとめ

今回は、Contact Form 7の独自イベントと wp_localize_script を活用して、安全なお問い合わせフォームを構築しました。

見た目のデザインだけでなく、「ユーザーが連打してしまっても大丈夫か？」「エラー時に操作不能にならないか？」といった裏側のフェイルセーフをしっかり実装しておくことが、信頼されるWebサイト作りの第一歩になります。 今後も、こういった細かなUXの向上にこだわってコーディングを行っていきたいと思います！

Prev
Next

関連記事