ContactForm7で送信確認

WordPressを使って当社のWebページを構築していますが、問合せフォームからの送信で追加したい機能がありました。問合せフォームはContactForm7プラグインを利用させてもらっており、非常に高機能で気に入っています。ただ、送信ボタンを押すと直ちに送信が実行されてしまうので、間違って押してしまった場合でもやり直しができません。

ネット上で調べてみると、さらに別のプラグインを追加するような方法もあったのですが、どんどん裏側での処理が複雑になり、数ヶ月後の自分の記憶の中から忘れ去られる自信があるので、シンプルな方法を探していました。そこで見つけたのがこの方法です。

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

この短いコードを、ContactForm7が記述されている固定ページのその下に、カスタムHTMLとして記述します。これにより、ボタンが押されたらJavaScriptで記述された上記のコードが実行されて、送信前の確認のアラートが表示されます。