Contact Form 7のデザインをかっこよくカスタマイズするのに参考にしたブログ – ESTELOCOS.jp

Contact Form 7のデザインをかっこよくカスタマイズするのに参考にしたブログ

WordPress, プラグイン

WordPressでブログやホームページを作るのに必須とも言えるド定番のプラグインでもある「Contact Form 7」。このプラグインを使えば問い合わせフォームを自分のサイトに簡単に設置することができます。

しかし、ただ普通に設置するとデフォルトのデザインはあまりパッとしないので、デザインをカスタマイズしてみました。

Contact Form 7のデザインを変更してみよう

WordPressのプラグイン「Contact Form 7」は、自分のサイトに簡単に問い合わせフォームを設置できる便利なプラグインです。しかも国産なので使い勝手もよく、僕のような素人でも少し触れば理解しやすく、オススメです。

設定画面からほしい情報の入力フォームを選んでいくだけで完成し、できあがったショートコードを設置したい箇所にコピペするだけです。

ただ、デフォルトのデザインは何も装飾されておらず、無機質なモノです。

 

カスタマイズ前

contactform7_customize_1

▲とりあえず設置してみた例です。

何も装飾されていないということはよく言えばカスタマイズしやすく、人とかぶらず他との差別化がしやすいということですね。

 

カスタマイズ後

contactform7_customize_2

▲上下のマージンを多めにとって余白を広く、必須項目をわかりやすくして、入力欄の枠を角丸にしてあります。

また、それぞれの項目にカーソルが乗ると薄いグレーになるようになっています。

 

参考にさせていただいたブログ

デフォルトのデザインのままでは嫌なので、カスタマイズしたいなーと思いつつもパッとやりたいデザインが頭に浮かぶわけではないし、技術も知識も無いので他の方のカスタマイズを参考にさせていただきました。

▶︎【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法 | 株式会社イン・ザ・コム

▶︎Contact Form 7のCSSデザインとカスタマイズ方法|初心者ブロガー指南:Naifix

参考といってもほぼコピペですw あとは色やフォントサイズ等を好みで若干CSSを変更しました。

 

まとめ

いかがでしたでしょうか。

定番のプラグインということはそれだけ参考情報が多く出ている可能性があります。

その道のプロの方々が多くカスタマイズ記事をブログに残してくれているので、初心者でもコピペで簡単にデザインを変えられると思います。せっかくなので色々と参考にしながら、カスタマイズしてみてください。

 

ではまた。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で野口 銀河をフォローしよう!

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事一覧