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

いつもシェアしていただいてありがとうございます。これからも「ちょいとお役立ちして嬉しくなる」記事の配信を目指しています。ポチッと↓のボタンからシェアしてください。

プロが教える WordPress セミナー開催中!

問題

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

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

ワードプレスを使えば実現できるのですが、いくつかのポイントを外すと失敗してしまいます。
実際、私は仕事柄いくつもの失敗を見てきました。

このメール講座では、その大事なポイントについて失敗事例を元に解決策をお伝えします。

普段お使いのメールアドレスを入力し、ボタンをクリックしてお申し込みください。

メールアドレス:

過去の講座受講者から感想をいただきました♪

いつもシェアしていただいてありがとうございます。これからも「ちょいとお役立ちして嬉しくなる」記事の配信を目指しています。ポチッと↓のボタンからシェアしてください。

山本をフォローするだけでちょっぴりお得な情報が見つかりますよ↓↓↓