WordPress の Contact Form 7 で送信完了後に入力フォームを非表示にする方法

目次

問題

WordPress のお問い合わせ作成プラグインである Contact Form 7 はとても便利です。
しかし、送信完了後に入力フォームが表示されたままになり、かつフォームがクリアされます。

通常はこの動作でも問題は無いのですが、ログインユーザーなどを Contact Form 7 の「[text* xxx default:user_login]」などの機能で自動表示させていても、この内容まで消されてしまいます。

ユーザーからすれば使い勝手が悪いですね。

解決方法

解決方法としては、メール送信後に再度同じページを読み込ませると言う方法があります。

しかし、単に読み込ませてしまうとユーザーが本当に入力ができたかどうかのメッセージも消えてしまい、イマイチです。

そこで、入力フォーム自体を非表示にしてしまうという方法を今回は行ってみました。

具体的なコード

Contact Form 7 の「フォーム」には、次の様に div タグを2つ用意し、メール送信後に表示したい div 範囲を style で非表示にしておきます。

この例では「inquiry_form」がメール送信前に表示したい部分、
「new_inquiry」がメール送信後に表示したい部分としました。

[code lang=’html’]
ユーザー情報 [text* user_login default:user_login] [submit “送信”]
[/code]

Contact Form 7 の「その他の設定」には、「on_sent_ok」イベントに JavaScript で表示・非表示を切り替えるコードを書いておきます。

[code lang=’js’] on_sent_ok:”$(‘#inquiry_form’).toggle();$(‘#new_inquiry’).toggle();”
[/code]

jQuery のセレクターで div を指定し、toggle() メソッドで送信後にそれぞれの表示状態をトグルさせるというものです。

簡単ですね。

まとめ

JavaScript の動作そのものを切られているとどうしようもないのですが、最近ではそうとう環境に制限がない限り問題無いでしょう。

10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント

【最後まで読んでくれたあなたに】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

・ワードプレスを使いこなせるコツを知りたい!
・自分にピッタリのサーバーを撰びたい!
・無料ブログとの違いを知りたい!
・あとで悔しくならない初期設定をしておきたい!
・プラグイン選びの方法を知っておきたい!
・SEO対策をワードプレスで行うポイントを知りたい!
・自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

※登録後に表示される利用条件に沿ってご利用ください

コメントを残す