この記事は約 17 分で読めます。
ユウキです。
ブログのお問い合わせページはカスタマイズされてますか？
Google アドセンスの審査に申込み予定だったり、運営者宛のメール連絡を受け取るためにとりあえずコンタクトフォーム 7 の設置だけしている方もいらっしゃると思います。
今回はコンタクトフォーム 7 を使ったお問い合わせページの作成から、デザインサンプルやサイト表示速度を落とさずにスパム対策する方法などについて解説していきます。
- ブログを始めたばかりでこれから設定を進める方
- お問い合わせページを設置したい方
- コンタクトフォーム 7 のカスタマイズをされたい方
目次
プラグインのインストール
はじめに WordPress のプラグインから新規追加で Contact Form 7 を検索してインストール、有効化します。
Contact Form 7 の設定
プラグインを有効化したらお問い合わせページを作成しましょう。
まず、WordPress の左のメニューバーから【お問い合わせ】をクリックして、表示されているショートコードをコピーします。
次に、固定ページに移動して【新規追加】からページを作成します。
タイトルとパーマリンクを設定して、本文に先ほどコピーしたショートコードをペースト（貼り付け）します。
固定ページを【公開】すると、お問い合わせページが一旦、完成します。
WordPress テーマによっては装飾されている場合もありますが、なにも装飾していないと次の画像の状態となります。
Contact Form 7 のカスタマイズ
プラグインを使ってお問い合わせページを設置しただけだと、デザイン的に簡素でかっこ悪いですよね。
また、このままだとスパムメールが大量に届いてしまうため、スパム対策をする必要もあります。
それぞれのカスタマイズについて、詳しく解説していきます。
デザイン（CSS）を変更する前に確認
WordPress テーマの style.css には コンタクトフォーム 7 用にスタイルが設定されている場合があります。
設定されていた場合、CSS を追加すると競合して表示に不具合を起こすことがあるため、あらかじめ削除しておくとトラブル防止になります。
当サイト環境の TCD「Be」と「MAG」を例にあげますので、該当する方は参考にしてみてください。
「Be」の場合、削除する箇所は 1804 ～ 1820 行目の wpcf7 のスタイル。
「MAG」の場合、削除する箇所は 1334 ～ 1352 行目の wpcf7 のスタイル。
デザイン（HTML と CSS）を変更する
コンタクトフォーム 7 でつくるお問い合わせページのデザインサンプルを 2 つ紹介します。
どちらも HTML と CSS のコピペで完了するので、お好みで装飾など変更して使ってみてください。
変更する際は HTML をプラグイン（お問い合わせ）設定のフォームタブへコピペして、
CSS を【外観】→【カスタマイズ】→【追加 CSS】に追加します。TCD テーマを使っている場合は【TCD テーマオプション】の【カスタム 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
<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 認証を行うことをおすすめします。
設定方法はこちらの記事を参考にどうぞ。
スパムメールとセキュリティの対策方法
コンタクトフォーム 7 を設置した際、なにも対策しなかった場合、海外から英文のスパムメッセージが届くようになります。
また、放っておくとセキュリティ的に問題があるため、サイバー攻撃の標的になりかねませんので、必ず対策をしておきましょう。
以下 4 つの対策方法を参考にしてみてください。
推奨：チェックボックスを設置する
コンタクトフォーム 7 の設定にある【承諾確認】というチェックボックスを使うとスパム軽減につながります。
紹介したデザインサンプルにはどちらもチェックボックスを設けているので、変更せずに使ってみてください。
推奨：日本語を含まないメッセージを除外する
海外からのスパムメッセージを想定して、【件名】と【メッセージ本文】に日本語が記載されていない場合は送信禁止にします。
設定方法は【外観】→【テーマエディター】→【functions.php】に移動して、末尾に次のコードを追加します。
もし、TCD「MAG」を利用している場合は末尾にある【カスタムコメント】の手前に追加すると、エラーとならず反映するのでお試しください。
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 をインストールして設定します。
ただし、サイト表示が遅くなる（Lighthouse スコアが 20 くらい減る）デメリットもあるので、サイトの運営方針や目的に応じて利用を検討する必要があります。
任意：WAF を利用する
お問い合わせフォームを悪用したサイバー攻撃から WordPress を守りたい場合は、WAF（Web Application Firewall）を利用することをおすすめします。
契約されているレンタルサーバーがエックスサーバーや ConoHa WING であれば、無料で設定できるセキュリティ対策となります。
ただ注意点があって、セキュリティ対策としては効果的ですが、普段の WordPress 管理に支障があり、具体的には、
- テーマエディターの編集ができない
- プラグインの設定ができない
といったことが問題症状が起こります。
WAF の設定を OFF にすれば元に戻るのですが、エックスサーバーの場合はタイムラグがあるため、気軽に変更とはいきません。
使いやすさとセキュリティは相反するので、目的に応じて検討されてください。
WAF 設定についてはこちらを参考にどうぞ。→ エックスサーバーのマニュアルサイト
まとめ
お問い合わせフォームの作成を一連の流れで解説しました。
紹介した内容で真似てもらえば設定は問題ないですが、目的に応じて項目やメールの内容など変更されてみてください。
コンタクトフォーム 7 以外のプラグインについてもまとめているので、こちらを参考にどうぞ。
それでは、今回はこの辺で。
ありがとうございました！
