問題

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

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

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

解決方法

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

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

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

具体的なコード

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

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

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

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

簡単ですね。

まとめ

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