• 2020年7月7日

[HP制作] Contact Form7 お問い合わせデザイン カスタマイズ

[HP制作] Contact Form7 お問い合わせデザイン カスタマイズ

[HP制作] Contact Form7 お問い合わせデザイン カスタマイズ 700 433 パソコン生活サポート Pasonal

お問い合わせデザインをカスタマイズ

店舗サイトやコーポレート(会社)サイトなどは、お問い合わせフォームがほとんど必須となっています。

WordPressでサイトを制作する方は、お問い合わせフォームのデザインに苦戦することが多いと思います。もちろん、デザインにこだわらなければ、そのままの状態でもメールの送受信は可能ですが、ある程度デザインを整えたほうが、ユーザービリティ や お問い合わせ率の観点からもメリットがあります。

今回は、Contact Form7を、コピー&ペーストで素早く・デザイン的に仕上げるコードをご提供いたします。
何かの折にご利用ください。

 

デザイン

今回制作するContact Form7 のデザイン画面です。

必要な項目を分かりやすいカタチで配置しています。さらに、各項目を点線でセパレートしているので、視認性も高くなっていると思います。
また、送信ボタンの上部に「プライバシーポリシー」もインラインフレームで設置しているため、わざわざ別ページに、プライバシーポリシーを配置する必要もありません。

店舗・会社など、比較的キッチリとしたHPのデザインに最適なカタチとなっています。
状況に合わせて、カスタマイズしてください。

Contact Form7 デザイン画面

 

CSSコード

下記は、Contact Form7 のお問い合わせフォームをデザインするためのCSSコードです。
お使いのWordPressのStyleに下記のコードをコピー&ペーストで貼り付けてください。

フォントの大きさなどは、お使いのHPに準じて調整してください。

 

Contact Form7のコード

下記のコードをコピー&ペーストで、Contact Form 7 のお問い合わせに貼り付けてください。

ぱそなる の最新の更新を
プッシュ通知で購読しよう


確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。


確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。