【Contact Form 7】送信完了をポップアップウィンドウで表示させる

こんにちは、hgmです。

本日は、WordPressのお問い合わせフォームプラグイン「Contact Form 7」の送信完了を簡単にポップアップウィンドウで表示する方法をご紹介します。

デフォルトだとシンプルな表示なので、もっと分かりやすくしたい！という方におすすめです。

それでは早速設定方法を見ていきましょう！

Step1　お問い合わせフォームを作成する

お問い合わせフォームを用意してください。
デザインは設置するサイトのデザインに合わせてください。

▼Contact Form 7 フォーム作成イメージ

▼固定ページ設置イメージ

Step2　ポップアップを設定する

以下のコードをjsファイルに追加すると、上部にポップアップウィンドウで
「ありがとうございます。メッセージは送信されました。」
と表示されます。簡単！

下記alertのメッセージ内容は適宜変更を行ってください。

document.addEventListener( 'wpcf7mailsent', function( event ) {
    alert( "ありがとうございます。メッセージは送信されました。" );
}, false );

▼送信ボタンクリック後、上部にポップアップウィンドウでメッセージが出る

おまけ

ポップアップでメッセージ表示しOKをクリックしたあと、入力フォーム自体を消すともっと分かりやすいかと思います。

設定方法は、Contact Form 7 の編集画面に適当なクラス名をつけた<div>を追加しフォーム内容を囲みます。

▼以下ではsend_successというクラス名をつけました。

次にcssファイルに以下を追加します。

form.sent .つけたクラス名{
  display: none;
}

これで設定は完了です！
実際に送信し、ポップアップ表示後に入力フォームが消えるかチェックしてみましょう。