2016.05.16
WordPress WordPressのプラグインに、Contact Form 7というお問い合わせフォームを設置できるプラグインがあります。
このプラグインをいろいろカスタマイズすれば、コーポレートサイトでも使えるぐらい重宝できるプラグインになります!
ちなみに当サイトのお問い合わせページもこのプラグインを使っているのですが、デフォルトだと下の画像のように送信が完了した時に応答メッセージボックスが表示されます。
コーポレートサイトで上のようなメッセージが表示されてしまうと、ちょっと見栄え的にもよろしくない場合が出てきてしまいます。
なので、そんな時にはCSSで応答メッセージボックスおよびそれに付随するものを非表示にすることで対処することが可能になります!
今回はそのCSSについてご紹介したいと思います!
送信中の時に表示されるロードマークを非表示にするCSS
Contact Form 7で送信ボタンを押すと、送信中の時にロードマークが表示されます。
このロードマークを非表示にするCSSが下になります。
div.wpcf7 .ajax-loader { display: none !important; }
応答ボックスメッセージを非表示にするCSS
続いて応答メッセージボックスを非表示にするCSSは下になります!
.wpcf7-mail-sent-ok { display:none !important; }
まとめ
上記で紹介したCSSを記述することで、ロードマークと応答メッセージボックスを非表示にすることができるので、コーポレートサイトなどでも使用できるようになるのではないかと思います!
Conact Form 7は様々なカスタマイズがあるので、是非ともいろいろ試してみてはいかがでしょうか??