コピペでできる！ContactForm7でおしゃれなお問合せフォームを作る方法【スマホも対応！】

プラグイン/お問合せフォーム/
  1. ホーム
  2. プラグイン
  3. コピペでできる！ContactForm7でおしゃれなお問合せフォームを作る方法【スマホも対応！】

WordPressでお問い合わせフォームを作るには、プラグイン「Contact Form7（コンタクトフォームセブン）」が一番人気です！

https://ja.wordpress.org/plugins/contact-form-7/

Contact Form7は、初期設定だととてもシンプルなので、おしゃれでかっこいいデザインにカスタマイズするCSSをご紹介します！

よかったらご自由にお使いください。

注意事項

この記事でご紹介しているコードは、Nishiki、Nishiki Proに最適化しています。
他のテーマでも使えますが、若干表示が異なる場合があります。

目次

Contact Form7のフォームデザイン

Contact Form7を設置するとこんなデザインになります。
（※テーマによって若干異なる場合があります）

とってもシンプルですね。

この記事で作れるフォームデザイン

この記事でご紹介するコードで、こんなお問い合わせフォームが作れますよ！

もちろんスマホ対応！
スマホだとこんな感じになります。

どんな感じかしっかり確認したい方は、こちらのデモサイトをご覧ください。
https://wp-firststep.com/nishiki_pro/contactform7-sample1/

さっそくコードと作り方をご紹介しますね。

Contact Form7の設定方法

Contact Form7でお問い合わせフォームを作るには、「フォーム」と「メール」を設定する必要があります。

「フォーム」・・・お問い合わせフォームの「氏名」「メール」などの項目の設定
「メール」・・・・お問い合わせをしたときに届くメールの内容の設定

それぞれに入力するコードをご紹介します。

「フォーム」に入力するコード

<table class="CF7_table">

	<tr>
		<th><span class="CF7_req">必須</span> ご相談内容</th>
		<td>[checkbox* checkbox-inq "ご相談" "お見積もり" "お問い合わせ" "その他"]</td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span> お名前</th>
		<td>[text* your-name watermark"例：あなたのお名前"] </td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span> メールアドレス</th>
		<td>[email* your-email watermark"例：×××@×××.com"]</td>
	</tr>

	<tr>
		<th><span class="CF7_unreq">任意</span>会社名</th>
		<td>[text your-company watermark"例：◯◯株式会社"]</td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span>郵便番号</th>
		<td>[text* zip id:zip watermark"例：123-4567"] </td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span>都道府県</th>
		<td>[text* pref id:pref watermark"例：東京都"]</td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span>ご住所</th>
		<td class="address-100">[text* addr id:addr watermark"例：中央区銀座１２３４５"]</td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span>お電話番号</th>
		<td>[text* your-tel watermark"例：03-1234-5678"]</td>
	</tr>

	<tr>
		<th><span class="CF7_req">必須</span>メッセージ本文</th>
		<td class="message-100">[textarea* your-message watermark"お問い合わせ内容をご記入ください"]　		</td>
	</tr>

</table>
<p class="CF7_btn">[submit "送信する"]</p>

「メール」のコード

メールは２種類あります。

まず１つめのメールは自分に届くお知らせなので、簡単な文章で大丈夫です。

[checkbox-inq]などのタグが書いてありますが、これは先程の「フォーム」で使ったのと同じタグをいれます。これでメール本文にお問い合わせフォームに入れた内容が記載されます。

なので、フォームのタグを変更した時は、お知らせメールのタグも合わせて変更してください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※このメールはホームページからの自動送信メールです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

・ご相談内容
[checkbox-inq]

・お名前
[your-name] 

・メールアドレス
[your-email]

・会社名
[your-company]

・お電話番号
[your-tel]

・郵便番号/ご住所
[zip][pref][addr]

・お問い合わせ内容
[your-message]

ーーーーーーーーーーーーーー

「メール（２）」のコード

もう１つはメール（２）です。

メール（２）とは自動返信メールです。
「メール（２）を使用」にチェックを入れると使えるようになります。

これは問い合わせを送った方に届くメールなので、きちんとした文章にしたいですね。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
お問い合わせありがとうございます。
このメールは自動送信メールです。

お送りいただいた内容は以下の通りです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

・ご相談内容
[checkbox-inq]

・お名前
[your-name] 

・メールアドレス
[your-email]

・会社名
[your-company]

・お電話番号
[your-tel]

・郵便番号/ご住所
[zip][pref][addr]

・お問い合わせ内容
[your-message]

ーーーーーーーーーーーーーー

文末には会社名、もしくはあなたの名前、連絡先などの署名を入れておくと良いかと思います！

これでContact Form7の設定ができました。

まだ内容を設定しただけなので、見た目はこんな感じです。

これにデザインCSSをつけていきます。

カスタマイザーの「追加CSS」に貼るコード

以下のコードを「追加CSS」に貼り付けてください。

/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

これを貼り付けると、このデザインになります！

サンプルと違う色にしたい時は

このデザインでは、オレンジとグレー、ブルーグレーの３色を使っています。
他の色に変えたい時はCSSの色番号を変更してください。

下のコードに色をつけておいたので、その部分の色番号を変更すればOKです！

/*ContactFormカスタマイズ*/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	text-align:left;
	}	
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
}
.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
line-height:2.5em;
}
.CF7_table th{
	background-color:#ebedf5;
}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

希望の色の番号は、WEB色見本のサイトがわかりやすいですよ。
https://www.colordic.org/

CSSを貼り付けても上手くいかない場合

他のテーマにも合うよう最低限調整しましたが、若干デザインのニュアンスが違ったり、各テーマのアップデートなどにより表示が乱れる可能性もあります。

あくまでNishiki・Nishiki Pro用になります、何卒ご了承ください。

無料勉強会・勉強会動画で学ぼう！

Zoomで無料勉強会をやっています。テーマ不問の会もあるので、ぜひお気軽にご参加ください。

無料勉強会
【初心者向け・無料勉強会】Nishiki もくもく勉強会 for beginners2021年6月からオンライン無料勉強会を主催します！情報交換・交流にお役立てください。wp-firststep.com
勉強会情報はこちら

過去の勉強会の様子がYoutubeで見れますよ！