Contact Form 7 CSSデザインカスタマイズ【コピペOK】

主にSimplicity で使えるContact Form 7用CSSデザインテンプレートを掲載していますが、Simplicity以外のWordPressテーマでもお使いいただけると思います。

ただ、Simplicity 以外のWordPressテーマにて動作確認をしておりませんので、ご利用の際は個人の責任でよろしくお願いいたします。

Contact Form 7用CSSデザインサンプル

Contact Form 7 CSSデザインカスタマイズ完成品はこのような感じです。
メールアドレスリスト取得がメインであれば、メッセージ内容（テキストエリア欄）は削除してください。

Contact Form７ のCSSデザインを一括コピペしたい方はこちらをクリック

Contact Form 7 デザインカスタマイズ

Contact Form 7 をデザインカスタマイズをした箇所、デフォルトデザインの相違点は下記です。

必須と任意をバッジ化

サンプル

HTML

<span class="must">必須</span>お名前
<span class="free">任意</span>メッセージ内容

CSS

/* 必須マーク */
.must {
	background: #FF1A00;
}

/* 任意マーク */
.free {
	background: #999;
}

.must,
.free {
	color: #FFF;
	border-radius: 3px;
	font-size: 12px;
	margin-right: 10px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
}

入力フォーム、テキストエリアをCSS化

Simplicityをお使いであれば、入力フォーム、テキストエリアをCSS化する必要はないかとは思いますが、一応…。

サンプル

必須お名前

必須メールアドレス

任意メッセージ内容

HTML・フォームタグ

<span class="must">必須</span>お名前
[text* your-name placeholder "例）申込 太郎"]

<span class="must">必須</span>メールアドレス    
[email* your-email placeholder "例）○○○＠xxxx.com"]

<span class="free">任意</span>メッセージ内容
[textarea your-message placeholder "お問い合わせ内容をご記入ください。"] 

CSS

/* フォーム入力項目 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea  {
	 width: 100%;
	 padding: 8px 15px;
	 margin-right: 10px;
	 margin-top: 10px;
	 border: 1px solid #ddd;
	 border-radius: 3px;
}

送信ボタンのCSS化

送信ボタンをCSS化。
さらに「送信」→「プレゼントを受け取る」に変更。

サンプル

フォームタグ

[submit class:sub-btn "プレゼントを受け取る"]

/* 送信ボタン */
input.sub-btn {
	width: 300px;
	height: 60px;
	background: #F90;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #ffae13;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}

/* 送信ボタンホバー */
input.sub-btn:hover{
	background: #FFF;
	color: #F90;  
}

送信ボタンの位置を中央に配置（中央揃え）

サンプル

HTML・フォームタグ

<div class="center">[submit class:sub-btn "プレゼントを受け取る"]</div>

CSS

.center { text-align:center; }

簡易的なスパム対策 & 送信ミス予防用のチェックボックス

簡易的なスパム対策 & お客様側の送信ミス防止対策にチェックボックスを追加しました。
「checkbox-○○○」の割り当てられる数字は各自異なります。

サンプル

HTML・フォームタグ

[checkbox* checkbox-○○○ "上記内容でよろしければ「チェック」をつけて送信ボタンを押してください。"]

ContactForm 7 デザインカスタマイズのまとめ

画像Contact Form 7 CSSデザインカスタマイズサンプル

こまこまと書きましたが、フォームタグ・CSSソースをまとめると下記になります。
コピペしてお使いくださいませ。

HTML・フォームタグ一括コピペ可

お問い合わせフォームにコピペしてお使いください。
チェックボックスの「checkbox-○○○」は各自数字が異なります。

<span class="must">必須</span>お名前
[text* your-name placeholder "例）申込 太郎"]

<span class="must">必須</span>メールアドレス    
[email* your-email placeholder "例）○○○＠xxxx.com"]

<span class="free">任意</span>メッセージ内容
[textarea your-message placeholder "お問い合わせ内容をご記入ください。"] 

[checkbox* checkbox-○○○ "上記内容でよろしければ「チェック」をつけて送信ボタンを押してください。"]

<div class="center">[submit class:sub-btn "プレゼントを受け取る"]</div>

CSS一括コピペ可

お使いの子テーマにコピペしてお使いください。

/*******************************
* バッジの色
********************************/
/* 必須マーク */
.must {
	background: #FF1A00;
}

/* 任意マーク */
.free {
	background: #999;
}

.must,
.free {
	color: #FFF;
	border-radius: 3px;
	font-size: 12px;
	margin-right: 10px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
}

/*******************************
* フォームの設定
********************************/
/* フォーム入力項目 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea  {
	 width: 100%;
	 padding: 8px 15px;
	 margin-right: 10px;
	 margin-top: 10px;
	 border: 1px solid #ddd;
	 border-radius: 3px;
}

/* 送信ボタン */
input.sub-btn {
	width: 300px;
	height: 60px;
	background: #F90;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #ffae13;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}

/* 送信ボタンホバー */
input.sub-btn:hover{
	background: #FFF;
	color: #F90;  
}

/* 送信ボタン中央寄せ */
.center {
	text-align:center;
}