[コピペでOK!]Contact Form7のデザインを綺麗にカスタマイズ


Contact Form7とは

WebとくにWordPressでブログやサイトを運営していく歳に問い合わせページは必須です。しかし、サンクスページや自動返信メールなどの仕組みがある問い合わせを作成しようとすると、Webの専門的な知識とスキル、または有料のサービスを申し込まないと難しいです。

しかし、WordPressのプラグインであるContact Form7を利用すれば、初心者の方でも「無料」で「簡単」にお問い合わせフォームを作成出来ます。

Contact Form7の設定方法は別の記事を参考にして頂ければと思います。

簡単に設置できるContact Form7ですが、そのまま使うとなんだか見た目が格好悪く今時ではありません。
折角簡単に設置できるのに見た目が悪いというのは非常にもったいないです。

今の時代、UI/UXは非常に重要でこれは製品だけではなくこういった些細なところにも関係してきます。
そこで今回は、コピペでできるデザインカスタマイズをご紹介します。

と言いましても、既に公開しているIN The COM様のサイトをほぼ参考にしています。非常に便利かつ有用でしたのでご紹介させていただきます。

デザインカスタマイズコード〜ほぼコピペでできる〜

早速コードの紹介をします。このコードを用いることで以下のことが実現出来ます。

・無料なのに企業のようなキレイなフォームができる
・郵便番号入力で自動で住所が入力される(Ajaxコード)
・レスポンシブ対応

コードは、HTMLとCSS、それとHTMLに追加するAjaxのコードがあります。
難しくないので、コピペしてまずはどんな仕上がりになっているか確認しながら実装して行きましょう。
コードは少し長く、解説は後述します。それではコードです↓

次にCSSです。Style.cssなどに記述します。

そして、郵便番号を入力すると自動で住所が埋まるように次のコードを使います。
記載する場所はhtmlファイル中のheader.phpの中のの最後に記述します。

ひとまずこのコードを使うことでキレイなお問い合わせフォームができます。

更に一歩すすんで〜各コードの説明〜

ここからは更に自分のサイトにあった表示にしていきます。勿論いろいろカスタマイズすることができますが、ここではまず
コピペ・削除だけで自分のサイトにあった自分の好きなフォームにしていきます。

上記で説明したコードは様々な入力項目があり(私にとって)冗長です。

すべての項目が入力「必須」だったり、住所や電話番号と行ったところも不要です。
そうした項目は削除してスリム化しましょう。

コードでいえば

を削除すればその項目すべて消えます。
また、「必須」を削除することで「必須」の文字を消す事ができます。

こうした細かい調整をしていくことで最終的に自分のサイトにあった問い合わせフォームを作成する事ができます。

直接今回の記事とは関係ありませんが、問い合わせ率等を上げる為には、冗長なフォームよりも端的なフォームの方が
よいかと思います。

例えば、今の私にとって正直「住所」を知ったところであまり意味がありません。むしろ、今の時代、住所入力を拒む人が多いですので
この項目を必須にするのであれば、きちんとした活用方法やもっといえば、個人情報の取り扱い方針を明記したほうがよいでしょう。

東大式Facebook広告の決定版!2016年限定公開

記事では公開していないFacebook広告で成功するノウハウや結果を出す為の方法を映像とPDFで収録しています。
実際に私やお客様が体験して成功した貴重なものを集めた集大成ですFacebook広告で売上を更にあげたい方、体系的に知りたい方は是非チェックしみてください。

東大式facebook広告

tokitanaokiサラリーマン&C.E.O

投稿者の過去記事

東京大学大学院修了。某大企業に務める傍らでWeb制作、Webマーケティング、システム開発、動画・画像制作ビジネスを展開。物販ビジネスにも従事し、月商300万円を達成。

人気記事

  1. 便利なWordPressのテンプレート BizVectorWordPressで便利なテンプレートで…
  2. 今回は本当にブログっぽく記載させていただきます。単なるつぶやきですのでお時間ある方は是非お読みくだ…
  3. duplicator_20151009
    WordPressのローカル環境から本番環境の移行ってどうやるの??ホームページやランディングペー…
PAGE TOP