Contact Form 7 の設定とカスタマイズを解説

ブログ運営と改善

Contact Form 7 の設定とカスタマイズを解説

この記事は約 17 分で読めます。

ユウキです。

ブログのお問い合わせページはカスタマイズされてますか？

Google アドセンスの審査に申込み予定だったり、運営者宛のメール連絡を受け取るためにとりあえずコンタクトフォーム 7 の設置だけしている方もいらっしゃると思います。

今回はコンタクトフォーム 7 を使ったお問い合わせページの作成から、デザインサンプルやサイト表示速度を落とさずにスパム対策する方法などについて解説していきます。

この記事が役に立つ読者
  • ブログを始めたばかりでこれから設定を進める方
  • お問い合わせページを設置したい方
  • コンタクトフォーム 7 のカスタマイズをされたい方

プラグインのインストール

はじめに WordPress のプラグインから新規追加で Contact Form 7 を検索してインストール、有効化します。

Contact Form 7 をインストール

Contact Form 7 の設定

プラグインを有効化したらお問い合わせページを作成しましょう。

まず、WordPress の左のメニューバーから【お問い合わせ】をクリックして、表示されているショートコードをコピーします。

メニューからお問い合わせに移動してショートコードをコピーする

次に、固定ページに移動して【新規追加】からページを作成します。

固定ページの新規追加でお問い合わせページを作成

タイトルとパーマリンクを設定して、本文に先ほどコピーしたショートコードをペースト（貼り付け）します。

ショートコードを張り付けて、タイトルとパーマリンクを設定する

固定ページを【公開】すると、お問い合わせページが一旦、完成します。

WordPress テーマによっては装飾されている場合もありますが、なにも装飾していないと次の画像の状態となります。

装飾されていないお問い合わせフォーム

Contact Form 7 のカスタマイズ

プラグインを使ってお問い合わせページを設置しただけだと、デザイン的に簡素でかっこ悪いですよね。

また、このままだとスパムメールが大量に届いてしまうため、スパム対策をする必要もあります。

それぞれのカスタマイズについて、詳しく解説していきます。

デザイン（CSS）を変更する前に確認

WordPress テーマの style.css には コンタクトフォーム 7 用にスタイルが設定されている場合があります。

設定されていた場合、CSS を追加すると競合して表示に不具合を起こすことがあるため、あらかじめ削除しておくとトラブル防止になります。

当サイト環境の TCD「Be」と「MAG」を例にあげますので、該当する方は参考にしてみてください。

「Be」の場合、削除する箇所は 1804 ～ 1820 行目の wpcf7 のスタイル。

TCD「Be」の style.css 1804 ～ 1820 行目にある wpcf7 のスタイルを削除

「MAG」の場合、削除する箇所は 1334 ～ 1352 行目の wpcf7 のスタイル。

TCD「MAG」の style.css 1334 ～ 1352 行目にある wpcf7 のスタイルを削除

デザイン（HTML と CSS）を変更する

コンタクトフォーム 7 でつくるお問い合わせページのデザインサンプルを 2 つ紹介します。

どちらも HTML と CSS のコピペで完了するので、お好みで装飾など変更して使ってみてください。

変更する際は HTML をプラグイン（お問い合わせ）設定のフォームタブへコピペして、

フォームに HTML をコピペする

CSS を【外観】→【カスタマイズ】→【追加 CSS】に追加します。TCD テーマを使っている場合は【TCD テーマオプション】の【カスタム CSS】へ追加します。

カスタム（追加）CSS にコードをコピペする

シンプルなスタイル

シンプルなデザインのお問い合わせフォーム

TCD テーマのお問い合わせフォームのスタイルをベースにしたシンプルなデザインです。送信ボタンはお好みのカラーコードに変更してみてください。

HTML
<span class="haveto">必須</span>お名前
[text* your-name class:textsp placeholder"鈴木 花子"]
<span class="haveto">必須</span>メールアドレス
[email* your-email class:mailsp placeholder"*****@gmail.com"]
<span class="any">任意</span>件名
[text your-subject]
<span class="haveto">必須</span>メッセージ本文
[textarea* your-message class:content placeholder "具体的なお問い合わせ内容について、こちらにご記入ください。"]
[acceptance acceptance-1]入力内容を確認してお間違えなければチェックしてください。[/acceptance]
<p style="text-align: center;">[submit id:formbtn "上記の内容で送信する"]</p>
<p style="text-align: center;"><small><a href="#">プライバシーポリシー</a></small></p>


CSS
.wpcf7 {
	border: 2px solid #ddd;
	border-radius: 3px;
	margin: 0 0 2em !important;
	width: 100%;
}
.wpcf7 form {
	margin: 1.5em;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="password"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="date"],
.wpcf7 input[type="month"],
.wpcf7 input[type="time"],
.wpcf7 input[type="week"],
.wpcf7 input[type="number"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="color"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 .field {
	display: block;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #dfdfdf;
	border-radius: 3px;
	background-color: #eff1f5;
	box-shadow: none;
	color: #5c6b80;
	font-size: 14px;
	vertical-align: middle;
	line-height: 1.6;
	transition: background-color 0.24s ease-in-out;
}
.wpcf7 textarea {
	max-width: 100%;
	min-height: 120px;
	padding: 0.5em;
	overflow: auto;
}
@media(max-width:500px) {
	.wpcf7 .inquiry td,
	.wpcf7 .inquiry th {
		display: block !important;
		width: 100% !important;
		border-top: none !important;
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important
	}
	.wpcf7 .inquiry tr:first-child th {
		border-top: 1px solid #d7d7d7 !important
	}
	.wpcf7 .inquiry .any,
	.wpcf7 .inquiry .haveto {
		font-size: 10px
	}
}
.wpcf7 .inquiry th {
	text-align: left;
	font-size: 14px;
	color: #444;
	padding-right: 5px;
	width: 30%;
	background: #f7f7f7;
	border: solid 1px #d7d7d7
}
.wpcf7 .inquiry td {
	font-size: 14px;
	border: solid 1px #d7d7d7
}
.wpcf7 .entry-content .inquiry tr,
.wpcf7 .entry-content table {
	border: solid 1px #d7d7d7
}
.wpcf7 .haveto {
	position: relative;
	margin-right: 5px;
	padding: 5px;
	bottom: 1px;
	font-size:12px;
	color: #fff;
	background: #ff9393;
	border-radius: 2px;
}
.wpcf7 .any {
	position: relative;
	margin-right: 5px;
	padding: 5px;
	bottom: 1px;
	font-size: 12px;
	color: #fff;
	background: #93c9ff;
	border-radius: 2px;
}
.wpcf7 .verticallist .wpcf7-list-item {
	display: block
}
.wpcf7 #formbtn {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .5em;
	top: -2px;
	width: 250px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	background: #6E6E6E;
	border-radius: 5px;
	box-shadow: 0 3px #424242;
}
.wpcf7 #formbtn:hover {
	box-shadow: 0 1px #424242;
	top: 1px;
}
.wpcf7 th {
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px;
}
.wpcf7 td {
	padding: 10px;
}
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
	border: 1px solid #dfdfdf;
	letter-spacing: 1px;
	margin: 0;
	max-width: 100%;
	resize: none
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border: 1px solid #bbb;
	background: #FBFBEF;
}

ビジネスライクなスタイル

ビジネスライクなデザインのお問い合わせフォーム

テーブルタグを使ってビジネスライクなデザインにしています。項目は任意で追加、または削除して使ってみてください。

HTML
<table class="inquiry">
<tr>
<th><span class="haveto">必須</span>お名前</th>
<td>[text* your-name class:textsp placeholder "鈴木 花子"]</td>
</tr>
<tr>
<th><span class="haveto">必須</span>メールアドレス</th>
<td>[email* your-email class:mailsp placeholder "*****@gmail.com"]</td>
</tr>
<tr>
<th><span class="any">任意</span>電話番号</th>
<td>[tel your-tel class:tel placeholder "080-0000-0000"]</td>
</tr>
<tr>
<th><span class="haveto">必須</span>お問い合わせ種別</th>
<td>[select* your-subject include_blank "種別1" "種別2" "種別3" "種別4" "種別5"]</td>
</tr>
<tr>
<th><span class="haveto">必須</span>お問い合わせ内容</th>
<td>[textarea* your-message class:content placeholder "具体的なお問い合わせ内容について、こちらにご記入ください。"]</td>
</tr>
</table>
[acceptance acceptance-1]入力内容を確認してお間違えなければチェックしてください。[/acceptance]
<p style="text-align: center;">[submit id:formbtn "上記の内容で送信する"]</p>
<p style="text-align: center;"><small><a href="#">プライバシーポリシー</a></small></p>


CSS
.wpcf7 input[type="text"],
.wpcf7 input[type="password"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="date"],
.wpcf7 input[type="month"],
.wpcf7 input[type="time"],
.wpcf7 input[type="week"],
.wpcf7 input[type="number"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="color"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 .field {
	display: block;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #dfdfdf;
	border-radius: 3px;
	background-color: #eff1f5;
	box-shadow: none;
	color: #5c6b80;
	font-size: 14px;
	vertical-align: middle;
	line-height: 1.6;
	transition: background-color 0.24s ease-in-out;
}
.wpcf7 textarea {
	max-width: 100%;
	min-height: 120px;
	padding: 0.5em;
	overflow: auto;
}
@media(max-width:500px) {
	.wpcf7 .inquiry td,
	.wpcf7 .inquiry th {
		display: block !important;
		width: 100% !important;
		border-top: none !important;
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important
	}
	.wpcf7 .inquiry tr:first-child th {
		border-top: 1px solid #d7d7d7 !important
	}
	.wpcf7 .inquiry .any,
	.wpcf7 .inquiry .haveto {
		font-size: 10px
	}
}
.wpcf7 .inquiry th {
	text-align: left;
	font-size: 14px;
	color: #444;
	padding-right: 5px;
	width: 30%;
	background: #f7f7f7;
	border: solid 1px #d7d7d7
}
.wpcf7 .inquiry td {
	font-size: 14px;
	border: solid 1px #d7d7d7
}
.wpcf7 .entry-content .inquiry tr,
.wpcf7 .entry-content table {
	border: solid 1px #d7d7d7
}
.wpcf7 .haveto {
	position: relative;
	margin-right: 5px;
	padding: 5px;
	bottom: 1px;
	font-size:12px;
	color: #fff;
	background: #ff9393;
	border-radius: 2px;
}
.wpcf7 .any {
	position: relative;
	margin-right: 5px;
	padding: 5px;
	bottom: 1px;
	font-size: 12px;
	color: #fff;
	background: #93c9ff;
	border-radius: 2px;
}
.wpcf7 .verticallist .wpcf7-list-item {
	display: block
}
.wpcf7 #formbtn {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .5em;
	top: -2px;
	width: 250px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	background: #6E6E6E;
	border-radius: 5px;
	box-shadow: 0 3px #424242;
}
.wpcf7 #formbtn:hover {
	box-shadow: 0 1px #424242;
	top: 1px;
}
.wpcf7 th {
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px;
}
.wpcf7 td {
	padding: 10px;
}
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
	border: 1px solid #dfdfdf;
	letter-spacing: 1px;
	margin: 0;
	max-width: 100%;
	resize: none
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border: 1px solid #bbb;
	background: #FBFBEF;
}

サンクスページの設置

ユーザーがお問い合わせページからメッセージを送信した後、初期設定では「ありがとうございます。メッセージは送信されました。」という一文が表示されるだけです。

もし、ユーザー体験（UX）を高めるためにサンクスページを表示したい場合は、固定ページに送信完了後に表示するページを作成して、次の JavaScript コードをフォーム追加すると表示できます。

フォーム末尾に JavaScript を追加

JavaScript
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	location = 'サンクスページURL';
}, false );
</script>

自動返信メール

自動返信メール設定で主に使う次の項目については表を確認して、サンプルを参考に設定してみてください。

より詳細については Contact Foam 7 の公式ヘルプを参考にどうぞ。

項目 用途
送信先 送信先を指定。ショートコードでユーザーへの自動返信に対応可。
送信元 送信先に表示する名前とメールアドレスを指定。
題名 件名（タイトル）を指定。
追加ヘッダー ユーザーが返信する際のメールアドレスを指定。空欄可。
メッセージ本文 本文に表示したい内容を記載。

メール：管理者への通知用

メールタブに初期表示されているのが管理者用となるので、サンプルを参考に、自分宛ての通知メールとして管理しやすいように設定されてください。

管理者への通知用メール設定

メッセージ本文
差出人：[your-name]
メールアドレス：[your-email]
件名：[your-subject]

メッセージ本文：
[your-message]



-- 
このメールはサイト名（https://example.com）のお問い合わせフォームから送信されました

メール（2）：ユーザーへの自動返信用

メールタブの末尾にある【メール（2）を使用】のチェックボックスにチェックすると設定項目が表示されます。

ユーザーへの自動返信用として使えますので、サンプルを参考に任意で設定されてください。

ユーザーへの自動返信用メール設定

メッセージ本文
[your-name] 様

お問い合わせありがとうございます。
以下の内容で受け付けいたしました。

24時間以内にご連絡いたしますので、今しばらくお待ちください。


------- お問い合わせ内容 -------

お名前：[your-name]
メールアドレス：[your-email]
件名：[your-subject]

メッセージ本文：
[your-message]



-- 
※このメールはサイト名（https://example.com）のお問い合わせフォームから送信された自動返信です

到達率を高める

自動送信メールの送信元は契約されているサーバーのドメインを経由するため、送信先のサーバーで止められてメールが届かない場合があるかもしれません。

メールの到達率を高めるために、WP Mail SMTP を使って SMTP 認証を行うことをおすすめします。

設定方法はこちらの記事を参考にどうぞ。

WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
2020.06.04
WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
ユウキです。 コンタクトフォーム 7 などで設定されている自動送信メールが届かなくて困っていませんか？ 初期設定のままだと送信先のサーバーで止められてしまう場合があるので、到達率を高めるためにも、この記事を参考に WP Mail SMTP を設定してみてく...

スパムメールとセキュリティの対策方法

コンタクトフォーム 7 を設置した際、なにも対策しなかった場合、海外から英文のスパムメッセージが届くようになります。

また、放っておくとセキュリティ的に問題があるため、サイバー攻撃の標的になりかねませんので、必ず対策をしておきましょう。

以下 4 つの対策方法を参考にしてみてください。

推奨：チェックボックスを設置する

コンタクトフォーム 7 の設定にある【承諾確認】というチェックボックスを使うとスパム軽減につながります。

紹介したデザインサンプルにはどちらもチェックボックスを設けているので、変更せずに使ってみてください。

推奨：日本語を含まないメッセージを除外する

海外からのスパムメッセージを想定して、【件名】と【メッセージ本文】に日本語が記載されていない場合は送信禁止にします。

設定方法は【外観】→【テーマエディター】→【functions.php】に移動して、末尾に次のコードを追加します。

もし、TCD「MAG」を利用している場合は末尾にある【カスタムコメント】の手前に追加すると、エラーとならず反映するのでお試しください。

functions.php の末尾にコードをコピペする

PHP
// 日本語を含まないメッセージを除外する
add_filter( 'wpcf7_validate', 'wpcf7_validate_spam_message', 10, 2 );
function wpcf7_validate_spam_message( $result, $tag ) {
	$value = str_replace(array(PHP_EOL,' '), '', esc_attr($_POST['your-subject']));
	if (!empty($value)) {
		if (preg_match('/^[!-~]+$/', $value)) {
		$result['valid'] = false;
		$result['reason'] = array('your-subject' => '日本語で入力してください');
		}
	}
	return $result;
}

add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);
function wpcf7_validation_textarea_hiragana($result, $tag){
	$name = $tag['name'];
	$value = (isset($_POST[$name])) ? (string) $_POST[$name] : '';

	if ($value !== '' && !preg_match('/[ぁ-ん]/u', $value)) {
		$result['valid'] = false;
		$result['reason'] = array($name => '日本語で入力してください');
	}
	return $result;
}

任意：Google reCAPTCHA を利用する

Google が無償提供している reCAPTCHA はスパム対策とセキュリティ向上の両面で効果的です。

利用するには、Google reCAPTCHA 公式サイトでブログを登録して、【サイトキー】と【シークレットキー】を取得後、Invisible reCaptcha for WordPress をインストールして設定します。

Invisible reCaptcha for WordPress

ただし、サイト表示が遅くなる（Lighthouse スコアが 20 くらい減る）デメリットもあるので、サイトの運営方針や目的に応じて利用を検討する必要があります。

任意：WAF を利用する

お問い合わせフォームを悪用したサイバー攻撃から WordPress を守りたい場合は、WAF（Web Application Firewall）を利用することをおすすめします。

契約されているレンタルサーバーがエックスサーバーや ConoHa WING であれば、無料で設定できるセキュリティ対策となります。

ただ注意点があって、セキュリティ対策としては効果的ですが、普段の WordPress 管理に支障があり、具体的には、

  • テーマエディターの編集ができない
  • プラグインの設定ができない

といったことが問題症状が起こります。

WAF の設定を OFF にすれば元に戻るのですが、エックスサーバーの場合はタイムラグがあるため、気軽に変更とはいきません。

使いやすさとセキュリティは相反するので、目的に応じて検討されてください。

WAF 設定についてはこちらを参考にどうぞ。→ エックスサーバーのマニュアルサイト

まとめ

お問い合わせフォームの作成を一連の流れで解説しました。

紹介した内容で真似てもらえば設定は問題ないですが、目的に応じて項目やメールの内容など変更されてみてください。

コンタクトフォーム 7 以外のプラグインについてもまとめているので、こちらを参考にどうぞ。

WordPress に絶対に入れておきたいプラグイン 17 選
2020.02.16
WordPress に絶対に入れておきたいプラグイン 17 選
ユウキです。 今回は、WordPress のポテンシャルを高めてくれるプラグイン（拡張機能）を紹介します。 利用環境で、TCD テーマ「MAG」と「Be」については動作確認済みです。 使っている WordPress テーマによっては不具合が生じたり、サイ...

それでは、今回はこの辺で。

ありがとうございました！

この記事のタイトルとURLをコピーする

関連記事

  1. TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ブログ運営と改善

    TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ユウキです。TCD「Be」のウィジェットに設置できるオリジナルのプ…

  2. 画像が重いなら EWWW Image Optimizer で解決

    ブログ運営と改善

    画像が重くて表示が遅いなら EWWW Image Optimizer で解決

    ユウキです。サイト表示速度が遅い場合、画像が重いことが原因の可能性…

  3. Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ブログ運営と改善

    Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ユウキです。今回は、Autoptimize を使ってコードの最適化…

  4. Lighthouse で JavaScript のセキュリティ脆弱性が検出された際の対処法

    ブログ運営と改善

    Includes front-end JavaScript libraries with known…

    ユウキです。モバイル表示速度を改善するために Lighthouse…

  5. WordPress の head 内を整理してモバイル表示速度を改善する

    ブログ運営と改善

    WordPress の head 内を整理してモバイル表示速度を改善する

    ユウキです。今回は WordPress でつくった Web サイト…

  6. WordPress の目次デザインをおしゃれにカスタマイズ

    ブログ運営と改善

    WordPress の目次デザインをおしゃれにカスタマイズ

    ユウキです。ブログのユーザビリティ（使いやすさ、見やすさ）を改善し…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。（しょぼ笑）

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ

    2020.06.5

    WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    2020.06.4

    WP Mail SMTP で Contact Foam 7 …
  3. Contact Form 7 の設定とカスタマイズを解説

    2020.06.4

    Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法

    2020.06.3

    robots.txt is not valid 4 erro…
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    2020.06.2

    WordPress のセキュリティ対策をするなら SiteG…
惹きつけるブログはデザインから生まれる
WordPress テーマ Be（TCD076）のレビュー
PAGE TOP