サイトアイコン 上尾市のWEBプログラマーによるブログ

[WordPress] Contact Form7に確認機能を導入する方法:簡単な設定手順を解説

WordPress

概要

WordPressのContact Form7プラグインには確認画面を表示する機能がなく、「送信」ボタンをクリックするとすぐに送信完了となってしまう。

以下の方法で、「送信してもよろしいですか?」のアラートを簡単に表示させることができる。

確認ダイアログを表示させる方法

Contact Form7を使用している固定ページに「カスタムHTML」ブロックを追加し、以下のコードを入力する。

<script>
document.querySelector( '.wpcf7-submit' ).addEventListener( 'click', function(e) {
  if (!confirm("送信してもよろしいですか?")) {
    e. preventDefault();
  }
});
</script>

サンプル

モバイルバージョンを終了