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

         

javascript

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

2020年08月17日 8:00 

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

こんにちは、hgmです。

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

 

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

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

 



 

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

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

 

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

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



 

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

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

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

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

 

おまけ

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

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

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

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

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

 

関連記事

この記事を書いた人

アバター

hgm

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