Contact Form7をかっこよく、そして実用的にカスタマイズする【コピペで再現可】

WordPressで作成したウェブサイトにお問い合わせフォームを設置する方法は無数にありますが、その中でも特に多く利用されているプラグインが「Contact Form7」です。

このプラグインが好かれている理由は「カスタマイズ性が非常に高い」ことが大きな要因ですが、HTMLやCSSの知識がない方にとっては、シンプルなフォーム以外を作るのが少し難易度が高いでしょう。

今回はContact Form7をかっこよく、おしゃれに、そのうえて実用的なカスタマイズをしていこうと思います。

1−1,標準のお問い合わせフォーム

当サイトはTCDのGENESISを基盤に作成されており、コンタクトフォームを設置すると上記のようなデザインになります。個人のブログサイトであれば問題ないと思いますが、少し寂しい感じもありますよね。

1−2,カスタマイズ後のお問い合わせフォーム

カスタマイズ後は左側に質問内容、右側に回答フォームと並んでおり、チェックリストや入力窓を設置しております。
ここからは順番にカスタマイズの方法を書いていきますので、記事通りにコピペしていただくと綺麗なフォームを設置できますので、ぜひ試してみてください!

2,CF7プラグインでの作成

まずはコンタクトフォームのプラグインでフォームの基盤を作成していきます。

2−1,カスタマイズ1:フォームの作成

まずは画像の部分に下記のコードをコピー&ペーストします。

項目の中身で【サンプル】とカタカナで記載している部分が7箇所ありますので、それぞれのサイトや事業に合わせて内容を入力してください。

<a href="サンプル">プライバシーポリシー</a>の部分のみ、ウェブサイトのプライバシーポリシーのURLを入力してください。
サンプルの箇所を修正する際はサンプルの文字は削除してください。その際に周囲の記号などを消してしまうと綺麗に動作しなくなりますのでご注意ください。
<center>
<div id="cf-tbl">
<table>
<tbody>

<tr>
<th><span class="required">必須</span>お問い合わせ内容</th>
<td>[checkbox* checkbox01 "サンプル1" "サンプル2"  "サンプル3" "サンプル4" "サンプル5"] </td>
</tr>
<tr> <th><span class="required">必須</span>お名前</th> <td> [text* your-name watermark" 山田 太郎"] </td> </tr> <tr> <th><span class="optional">任意</span>会社名</th> <td> [text company watermark" 株式会社〇〇" ]</td> </tr> <tr> <th><span class="required">必須</span>電話番号</th> <td> [tel* your-tel watermark" 03-1234-5678"]</td> </tr> <tr> <th><span class="required">必須</span>メールアドレス</th> <td> [your-email* your-email watermark" example@サンプル.com" ]</td> </tr> <tr> <th><span class="required">必須</span>郵便番号</th> <td> [text* zip id:zip 10/ watermark" 123-4567" ]</td> </tr> <tr> <th><span class="required">必須</span>都道府県</th> <td> [text* pref id:pref watermark"例:東京都"]</td> </tr> <tr> <th><span class="required">必須</span>住所</th> <td> [text* addr id:addr watermark" 都道府県以降の住所" ]</td> </tr> <tr> <th><span class="required">必須</span>お問い合わせ</th> <td> [textarea* your-message watermark"こちらにお問い合わせ内容をご入力ください" ] </td> </tr> <tr> <th><span class="required">必須</span>同意確認</th> <td>[acceptance accept-this-1] <a href="https://サンプル">プライバシーポリシー</a>についてご同意し、入力内容に間違いがないことを確認しました。 [/acceptance]</td> </tr> </table> </tbody> </div> [submit "上記の内容で送信する"] </center>

2−2,カスタマイズ2:メールのカスタマイズ

フォームタブの横にある「メール」のタブから、送信後に自動返信されるメールの内容を作成します。

まず最初に表示される部分は、運営側に送信されるメールです。

題名の箇所には自分が分かりやすい件名を付けておくと便利です。
当サイトでは「RhapsodieのHPからお問い合わせがありました」のようなぱっと見で分かる件名にしています。

その下のメッセージ本文には下記のコードを入力してください。

=======================

お疲れさまでございます。
ホームページよりお問い合わせがありました。

=======================

・お問い合わせ内容
[checkbox01]
・お名前 [your-name] ・会社名 [company] ・電話番号 [your-tel] ・メールアドレス [your-email] ・住所 〒[zip] [pref][addr] ・メッセージ [your-message] ==============================

次に問い合わせをしてくれた方に向けた自動返信メールを作成します。

メール(2)にチェックを入れると項目が表示されますので、そちらに先ほどと同様に入力してください。

題名の箇所は「お問い合わせありがとうございます|Rhapsodie」のようにユーザーが分かりやすい内容にしておくと良いと思います。

=======================

このメールは自動返信メールです。

[your-name] 様
この度はお問合せありがとうございます。
ご入力された内容は下記のとおりです。

2~3日以内にご返信させていただきますので今しばらくお待ちください。
返信がない場合は、メールが届いていない可能性がありますので、電話もしくはメールでご連絡ください。

=======================

・お名前
[your-name]

・会社名
[company]

・電話番号
[your-tel]

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

・住所
〒[zip]
[pref][addr]

・メッセージ
[your-message]

=======================
この部分がメールのフッターになります。

Rhapsodie

〒570-0012
大阪府守口市大久保町2-29-1-3A
TEL 06-1234-5678
Mail info@rhapsodie-web.com
HP https://rhapsodie-web.com

このようにサイト情報を入力しておくと、ユーザビリティを高められます。

2−3,その他設定

その他設定の部分に下記のコードを記述してください。

acceptance_as_validation

これによってフォームの「同意確認」にチェックが入っていないと送信ボタンが押せなくなります。

※botの攻撃からフォームを守れる機能ではありません。

3,住所を郵便番号から自動入力できるようにする

zipaddr-jp

こちらのプラグインをインストールして有効化しておくと、郵便番号を入力した際に自動でそれ以降の住所を入力してくれます。
特に設定など必要ないので、ぜひインストールしてみてください!

4,デザインをカスタマイズする

これでフォーム自体は作成できていますが、まだデザインが悪い状態になっていると思いますので、これからフォームを綺麗にデザインしていこうと思います。

テーマによってはカスタマイズやCSSが存在していない、または独自の記述場所が用意されている場合があります。どうしても見つからない場合には、「Simple Custom CSS and JS」というプラグインをインストールすると便利です。
/*
Contact Forem7
カスタマイズ
 */

#cf-tbl{
width: 800px;
}
#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf-tbl table tr th{
width: 35%;
background: #eee;
}

@media screen and (max-width:768px){
#cf-tbl{
width: 100%;
}
#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}
#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}
#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}

/*「必須」文字デザイン*/

.required{
font-size:.8em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/

.optional{
font-size:.8em;
padding: 5px;
background: #b0c4de;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目を見やすく */

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 8px 15px;
margin-right: 10px;
margin-top: 10px;
border: 1px solid #d0d5d8;
border-radius: 3px;
background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}

/* 「送信する」ボタン */

input.wpcf7-submit {
    display: block;
    padding: 15px;
    width: 400px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 250px;
}
}
input.wpcf7-submit:hover {
box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
transform: translateY(-4px);
opacity:0.7;
}

/* エラーメッセージを見やすく */

span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}

このCSSによってレスポンシブにも対応するフォームに作成できます。

5,bot攻撃からフォームを守る方法

Contact Form7では、様々なスパム対策機能を実装できる機能(インテグレーション)が用意されていますが、正直慣れていないと使いづらさを感じると思います。

例えば誰しもが1度は見たことがある「reCAPTCHA」を導入することで、人間かどうかの判定を自動化し、スパムの場合には送信できないようにすることができますが、APIキーの取得など手間もかかりますし、実装後も人間の送信に対してもスパム判定されてしまう場合には、reCAPTCHAの閾値を調整するなどの対策が必要になります。

ここではコピペで簡単に実装できる簡単なコードをご紹介します。

ただしテーマファイルを直接編集しますので、誤った箇所を操作すると、サイト自体が表示できなくなる場合があります。下記の手順を熟読した上で試してください。

5−1,function.phpに追加する

  1. テーマファイルエディターを開きます。
  2. 使用しているテーマを選択します。(おそらく現在使用しているテーマが選択されてます)
    子テーマがある場合にはそちらを有効化して使用してください。(親テーマを使用する場合の注意点は後述します)
  3. 右側のサイドメニューにfunction.phpがあると思いますので、そちらを開きます。
  4. <?php の下に改行して下記のコードを追記します。
  5. 保存します。(コードの記述場所やコピーした内容が間違えていないのに、保存できない場合にはサーバーのWAFを一時的にオフにすると保存ができる場合があります。他のセキュリティ系のプラグインが干渉している場合もありますので確認してみてください。)
//textareaに「ひらがな」を含まなければ送信できないようにする。

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; } add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2); add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);

日本語の「ひらがな」が1文字以上含まれていないとフォームを送信できなくなります。
スパムの判定をしている訳ではないので100%防ぐことはできませんが、現状99.9%以上のスパムメールが海外からの送信です。

日本語は難しい漢字を含めなくても2,200字以上の文字数。

  • ひらがな 54字
  • カタカナ 54字
  • 常用漢字 2,136字

これだけの文字数の中から「ひらがな」を的確にピックしてフォームに利用するのは海外botにとってかなり難易度が高く、コストパフォーマンスも悪いためターゲットになりにくい(仮にターゲットになってもそもそも送信ボタンが押せない)となります。

レンタルサーバーによっては大量のスパムメールによって一時的に利用制限がかかる場合があります。送信ボタンが反応しない=サーバーとデータのやり取りが発生しないため、サーバーに負荷をかけないのもメリットです。

6,フォーム送信後に指定のURLへ遷移させる

下記のコードをコンタクトフォームの最後に追記することで、送信ボタンを押した際に自動で専用ページに遷移させることが可能です。

必ずしも必要ではないですが、あるとスッキリとしたデザインになりますので余裕がある方はぜひ試してみてください。

<script>
  document.addEventListener( 'wpcf7mailsent',function( event ){
  location = 'https://〇〇';
  }, false );
</script>

location =〇〇の部分にあるURLが遷移するページになります。

[ https://rhapsodie-web.com/thankspage/ ]
のような専用固定ページを作成しておきましょう。

編集でお困りのことがあればRhapsodieにご相談ください!

今回の内容を手順通りに進めることでカッコ良く、そして実用的なお問い合わせフォームを設置することができますが、慣れていない方にとっては知らない言語の羅列なので、もし正常に動作しなかった場合、どこが誤っているのか探すことも一苦労かと思います。

Rhapsodieではウェブサイト制作だけでなく、一部プラグインの修正や実装のみのご依頼も承っております。
どうしてもお一人で難しい際はお気軽に当店までご相談くださいませ。

目次