【Contact Form 7】お問い合わせフォームのカスタマイズ済みテンプレート作りました。[デザイン4つ]

Contact Form 7 お問い合わせフォームカスタマイズ用テンプレート集

Contact Form 7(コンタクトフォーム7)でお問い合わせページを作るとき、もっと簡単に、オシャレにカスタマイズできるようにテンプレートを作ってみました。お問い合わせフォームのカスタマイズって、慣れていないと結構時間がかかって面倒なんですよね。しかもプラグインを使うとHTMLも特殊になるので余計に時間がかかるという。

Javascriptを使えばもっとリッチな表現が出来たりしますが、ここではあえてCSSだけでカスタマイズしてお問い合わせフォームテンプレートを作ってみました。気に入ったものがあればコピペして使ってください!

※対象ブラウザは2019年10月時点の各最新ブラウザを前提にしてます。

テンプレート利用の準備

共通のHTMLコードをコピペ

まず、テンプレート用の共通HTMLコードを「Contact Form 7」の「お問い合わせ」作成ページのフォーム作成画面(下図参照)でコピペします。

フォーム作成画面

テンプレート用の共通HTMLコード

コピペするコードはこちらです。必須項目にしたいフィールドには、”form__label”に”is-required”のクラスを追加して、フォームタグにも「*」を忘れずにつけてくださいね。

コードをみる

テンプレート[1] シンプルな縦並びのフォーム

一見普通のフォームですが、どのブラウザでも出来るだけ同じに見えるように地味に工夫してあります。フィールドの枠線の色はもちろん、チェックボックスのチェックの色、ラジオボタンの色などを自由に変えられるのでカスタマイズ性は抜群です。

サンプル画像

form-template-demo1

デモページ

チェックボックスなどの実際の動きは下記のデモページで触ってみてください。デモなので送信ボタンを押しても何も送信されません。

関連記事

このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[1]のデモページ[…]

コンタクトフォーム7 お問い合わせフォームテンプレート デモページ

テンプレート[1]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

テンプレート[1] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

テンプレート[2] ラベルとフィールドが左右横並び(柔らかいイメージ)

PCではラベルとフィールドが横並びで、768px以下で縦並びになります。女性向けの柔らかい感じのデザインにしてみました。

サンプル画像

form-template-demo2

デモページ

関連記事

このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[2]のデモページ[…]

コンタクトフォーム7 お問い合わせフォームテンプレート デモページ

テンプレート[2]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

テンプレート[2] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

テンプレート[3] ラベルとフィールドが左右横並び(かっこいいイメージ)

PCではラベルとフィールドが横並びで、768px以下で縦並びになります。チェックボックスの動きなどに少しこだわってるので、デモを触ってみてください!

サンプル画像

form-template-demo3

デモページ

関連記事

このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[3]のデモページ[…]

コンタクトフォーム7 お問い合わせフォームテンプレート デモページ

テンプレート[3]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

テンプレート[3] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

テンプレート[4] ゲストブック風

ゲストブック(芳名帳)のような、ノートのようなデザインのフォームです。

サンプル画像

form-template-demo4

デモページ

関連記事

このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[4]のデモページ[…]

コンタクトフォーム7 お問い合わせフォームテンプレート デモページ

テンプレート[4]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

テンプレート[4] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる