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

javascript

2020年08月17日 8:00　

こんにちは、hgmです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。広い視野を持って日々邁進していきます！