【WordPress】コピペOK！Contact Form7の返信メール雛形

先日「MW WP FORM」のメール雛形について記事を書きました。

確認画面や完了画面がデフォルトで作れるので、案件によってはとても重宝していたので、開発終了はとても残念です。

ですが、開発や保守管理にかかる労力を考えると、プラグインを無料で提供し続けるのはとても大変だということですよね・・・。

同じ開発者として、プラグイン開発者の方達にはできるだけ有料での支払いをできるようにしたい。そんな今日は「Contact Form 7」のメール雛形についてご紹介していきます。

Contact Form7とは

今回ご紹介するContact Form7は、日本人の「Takayuki Miyoshi」さんが開発しているお問い合わせフォームのプラグインです。

日本産ということで翻訳など必要なく、フォーラムなどで情報もたくさん出てきてとても使いやすく大人気。

確認画面やデータ保存機能はついていませんが、プラグインなどで補完することができるので、ニーズに合わせた使い方もできます。

個人的にはお問い合わせフォームに確認画面が本当に必要？という疑問があるので、Contact Form7のようなシンプルなフォーム実装を推奨しています。

実際、アクセス解析を入れてみると確認画面での離脱率（確認画面まではいくがメールが送信されていない）が目立つサイトもあり、確認画面の表示時間もほぼ0に近い数字が多く、活用されているかどうか不明で邪魔になっているだけのような気が・・・。

コピペで使える雛形をご紹介

Contact Form7は今も開発が続けられていて、新規の案件でも使えるプラグイン。確認画面が必要であればサードパーティー製のプラグインを導入して使うようにしましょう。

今回は確認画面などの実装はなく、Contact Form7単体での使用する際の雛形をご紹介します！

最低限のフォーム内容ではありますが、新規案件でも使えるものになっていますので、少しでも皆さんの時短に役立てれば嬉しい限り。

フォーム用のソースコード（HTML/css）

雛形として用意する場合、最低限必要なものだけにして用意しておくか、最大限の要素を入れておいて使用するときに削除するか・・・。

個人的には最小限にしておいた方がカスタマイズするときにCSSなどがごちゃごちゃしないので、今回も最低限の要素で雛形を作成しておきます。

<dl class="p-contact-list">
  <dt class="p-contact-list__title">
    お名前<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [text* your-name placeholder "山田 太郎"]
  </dd>
  <dt class="p-contact-list__title">
    ふりがな<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [text* your-furigana placeholder "やまだ たろう"]
  </dd>
  <dt class="p-contact-list__title">
    メールアドレス<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [email* your-email placeholder "xxx@xxx.com"]
  </dd>
  <dt class="p-contact-list__title">
    お電話番号
  </dt>
  <dd class="p-contact-list__data">
    [tel your-tel]
  </dd>
  <dt class="p-contact-list__title">
    お問い合わせ内容<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [textarea* contact-text placeholder "お問い合わせ内容"]
  </dd>
</dl>

[submit class:c-submit-btn "送信する"]

↑

このコードをContact Form7にコピペ。

オリジナルデザインなどの制作で、CSSはご自分でカスタマイズできる方はclassを変更したりしながらcssの調整をしてください。

cssまでコピペしたい方は、下記のcode penのcssをコピペしてください。

ペースト先はcssが反映される部分であればどこでも大丈夫です。

もしテーマファイルを修正するのが難しい方の場合、Contact Form7のショートコードを埋め込んだページに、ブロックエディタの「カスタムHTML」を追加して、<style></style>タグで囲んでcssを記述すれば動きます。

※自動で挿入される<p><br>を削除

WordPressでは入力した文章の改行などを元に、自動で<p>タグや<br>タグが入るような機能がついています。

Contact Form7で作成したフォームにも自動で入るため、純粋なHTMLで書いたとしても実際に表示される時には余分な<p>タグが入ってしまいデザインが崩れてしまうことがあります。

そんな時はテーマのfunctions.phpに下記のコードを追加して<p>タグなどの余分なコードが入らないようにしましょう。

add_filter('wpcf7_autop_or_not', '__return_false');

MW WP FORMの場合はそれぞれのフォーム番号を入れて個別に設定する必要がありますが、Contact Form7の場合は一括で全てのフォームに設定することができます。

また、上記はfunctions.phpで設定する方法ですが、wp-config.phpで設定することも可能。

wp-config.phpで設定する場合は下記のコードをwp-config.phpの最終行以外に記述してください。

define ('WPCF7_AUTOP', false); 

※最終行に記述しても機能しないので、わかりやすい位置で最終行以外に記述するようにしてください。

メール設定（メール１：管理者宛のメール）

Contact Form7は自動送信メールを2つ設定することができ、1つ目は基本的に管理者宛として使用します。

※自動返信(お客様用)と管理者宛を同じメールで併用する場合、お客様用の雛形をメール１に入れて、送信先を[your-email]などお客様が入力したアドレスに設定、追加ヘッダーにbcc:xxx@xx.comのように管理者のアドレスを入れることで、お客様に送信されたメールが管理者にも届くようになります。

送信先：
[_site_admin_email]

↑サイト管理者のメールアドレスが自動で入ります。もし管理者以外のメールアドレスにしたい場合は直接メールアドレスの記入も可能。複数の送信先を設定する場合はカンマ（,）で区切ることで複数設定可能です。

送信元：
[_site_title]

↑管理画面の「設定」から設定したサイトのタイトルが表示されます。

題名：
[_site_title]

↑管理画面の「設定」から設定したサイトのタイトルが表示されます。管理者宛なので「新規お問い合わせがありました」という文言にしておくとわかりやすいです。

追加ヘッダー：
Reply-To: [your-email]

追加ヘッダーはccやbccなどの設定をすることができるので、送信先以外で同時送信しておきたい宛先の設定ができます。

本文：

管理者様

以下のお客様よりお問い合わせがありましたのでご確認ください。

【お問い合わせ内容】

お名前： [your-name]（[your-furigana]）  
メールアドレス： [your-email]  
お電話番号： [your-tel]  
お問い合わせ内容：  
[your-contact]

内容をご確認の上、速やかに対応をお願いいたします。

MW WP FORMと違い、フォームから値をもらうには{}ではなく[]で囲む必要があるのが注意点です。

メール設定（メール２：自動返信用のメール）

自動返信用のメールを別に設定したい場合、投稿画面の下の方にある「メール（２）を使用」にチェックを入れることで使用できるようになります。

送信先：
[your-email]

送信元：
[_site_title]

↑管理画面の「設定」から設定したサイトのタイトルが表示されます。

題名：
【[_site_title]】お問合せいただきありがとうございます。

追加ヘッダー：
Reply-To: [your-email]

追加ヘッダーはccやbccなどの設定をすることができるので、送信先以外で同時送信しておきたい宛先の設定ができます。bccに管理者のアドレスを入れておくことで、お客様に送信されたメールを確認することができます。

本文：

[your-name]様

この度は、弊社へのお問い合わせをいただき、誠にありがとうございます。
以下の内容でお問い合わせを承りました。

【お問い合わせ内容】  
お名前： [your-name]（[your-furigana]）  
メールアドレス： [your-email]  
お電話番号： [your-tel]  
お問い合わせ内容： [your-contact]

内容を確認の上、担当者より改めてご連絡させていただきます。  
通常、2～3営業日以内にご返信を差し上げておりますが、内容によってはお時間をいただく場合がございます。予めご了承ください。

万が一、数日経っても返信がない場合は、恐れ入りますが再度ご連絡いただけますと幸いです。

今後ともどうぞよろしくお願い申し上げます。

まとめ

今回はContact Form7の簡単な使い方と、設定する際の雛形をご紹介してきました。

日本人の方が制作されているプラグインということで、国内では大人気のプラグイン。

これからWordpress制作をされる方なら必須で使い方やカスタマイズを覚えておきたいプラグインの一つです。

フック関数などもしっかりと用意されていたり。Google reCAPTCHAなどの設定も簡単に行うことができるので、実務でもバリバリ使っていきましょう！