シェアリッチ株式会社 こんにちは、シェアリッチ株式会社の阿久津です。
今回は、Contact Form7の使い方とカスタマイズについてのお話です。
会社やお店のサイトを作成する時に、お客様からのメールの窓口として、問い合わせフォームは必須ですよね？
Contact Form 7は、WordPressのサイトに初心者でも簡単に問い合わせフォームを作成できる、おすすめの無料プラグインです。
今まで問い合わせフォームを作成したことがなかった私ですが、自分のサイトにContact Form 7を使って簡単に作れた時は感動しました。
カスタマイズしなければ、インストールから設置まで10分程度で完了してしまいます。
Contact Form 7はカスタマイズもできるので、自分の好きなように設定したい方にもおすすめです。今回は、初心者の方にも簡単に使用できるように、テンプレートも用意しました。
それでは、Contact Form 7の設定と使い方、カスタマイズのためのテンプレートを紹介していきましょう。
Contact Form 7とは
Contact Form 7は、簡単にメールによるお問い合わせフォームを作ることができる便利なプラグインです。
自分でHTMLの作成や編集など面倒な作業しなくて済むので、専門知識がない初心者には嬉しい機能なのですね。
Takayuki Miyoshiさんという日本人が作成したプラグインですが、日本のみならず海外でも使用されている優れもの！
Contact Form７を使うと、次のようなことができます。
■特徴
・お問い合わせフォームの設置
・カスタマイズも簡単
・1 フォーム で2種類まで自動返信メール設定が可能
・スパム（迷惑）メールの防止
お問い合わせフォームを作るのに必要なことは、基本的に網羅されています。
それでは、順番に見ていきましょう。
お問い合わせフォームの設置
Contact Form７を使うと、WEBの知識がない方でも簡単にお問い合わせフォームを設置することができます。
そして、自分のサイトのメニューに、「お問い合わせ」を追加する時も、Contact Form 7が生成するショートコードを１行追加するだけで簡単にできてしまいます。
自分でHTMLをいじって作成、編集をして大変な思いをしたことがある人には、本当に楽に作れてしまう嬉しい機能なのですね。
カスタマイズも簡単
Contact Form７を使うと、お問い合わせフォームを簡単にカスタマイズできます。
カスタマイズしないと、下記のようなシンプルなものになります。
【カスタマイズ前】
上記のシンプルなものでもOKですが、もう少し項目を追加したいという場合もあるでしょう。
例えば、問い合わせした人のメール、電話番号、住所など。
そうするとカスタマイズして項目を追加するのですが、下記のようにショートコードで初心者でも簡単にカスタマイズできるのです。
【カスタマイズ後】
上記はカスタマイズの一例ですが、自分の希望する内容に、自由にカスタマイズできるのは嬉しいですよね！
カスタマイズに関しては、記事の最後にテンプレートを用意していますので、参考にしてください。
1フォーム で2種類まで自動返信メール設定が可能
Contact Form 7では、1フォームで２種類まで自動で返信メールの設定ができます。
これは、Contact Form７を使って作った問い合わせページに、お客さんから問い合わせがあった場合、問い合わせがあったことを私たちに通知してくれるメールと、お客さんに自動で返信してくれるメールを同時に送信してくれる機能です。
例えば、あなたが靴の販売専門店をしていたとしましょう。
Contact Form７で作った問い合わせページから、サイズに関する質問があったとします。
すると、1つのフォームで下記の2種類のメールを同時に送信できるのです。
通販で何か購入した時に、上記の【2】のような内容のメールを見たことがある方もいるのではないでしょうか？
こういったメールには、「自動で送信しています」などと書かれている場合も多いです。
このように、自分の希望する内容で2種類のメールを自動送信してくれるのは便利です。
スパム（迷惑）メールの防止
Contact Form 7では、Googleが提供するスパムメール防止システムであるreCAPTCHAと連携させることで、スパム行為を防ぐことができます。
reCAPTCHAは、「私はロボットではありません」という文字と、その横にチェックボックスが表示され、チェックしないと送信できない仕組みで、機械的に送られたスパム行為から守ってくれる機能です。
私は初めてContact Form７を設置してから、度々スパムメールが来て困っていたところ、このreCAPTCHAとの連携を忘れていたことに気づきました。
そうなんです、実はContact Form７とreCAPTCHAの連携は自分で行う必要があるのです。
連携する方法は、この記事の最後に紹介してあります。
それでは、実際にContact Form７をインストールして、使い方を説明していきましょう。
Contact Form 7のインストール
こちらでは、Contact Form７をインストールする方法を載せています。分かる方は、Contact Form 7 の使い方に進んでください。
まず、プラグインの新規追加の検索窓にContact Form 7 を入力して、プラグインを出現させ、赤枠の「今すぐインストール」をクリックします。
この後、「有効化」すれば完了です。
続いて、Contact Form７の設定を解説していきます。
Contact Form７の設定
ダッシュボードのプラグインで、Contact Form７の「設定」をクリックします。
Contact Form７の設定画面に移動します。
赤枠の「フォーム」をクリックすると、初期設定ですでにコードが書かれています。
この初期設定は、上記の【カスタマイズ前】の内容となります。この内容で良ければ「フォーム」の右隣の「メール」に行きます。
カスタマイズしたい場合は、コードを追加した後に「保存」をクリックしましょう。
カスタマイズの方法は、この記事の最後に書いてありますので、参考にしてください。
次に「メール」ですが、初期設定では、このメールの内容は私たちサイト運営者に届きます。
送信先という欄に、あなたがWordPressのサイトに登録したメールアドレスが書いてあるはずです。
送信元は、問い合わせをしてきた人のメールアドレスになります。
題名は、「お問い合わせが来ました」などを記入し、自分でメールを見た時にすぐわかる内容にしてください
メッセージ本文には、問い合わせをした人が書いた内容が書かれています。
この内容でOKでしたら、一番下の「保存」をクリックしてください。
もし、問い合わせをした人に自動返信メールを送りたい場合は、「メール（2）を使用」にチェックします。
送信先は、あなたのメールアドレスが表示されています。
送信元は、あなたのWordPressのサイトのアドレスが表示されます。
題名とメッセージ本文は、問い合わせをした人に、あなたが伝えたい内容を書きましょう。
終わったら、「保存」をクリックします。続いて、「メッセージ」を見てみましょう。
メッセージでは、問い合わせをする人に送られる内容が初期設定で書かれています。
例えば、入力内容に不備があった場合は、「入力内容に問題があります。確認して再度お試しください」と表示されます。
もし、内容を変更したい場合は、編集して「保存」をクリックしてください。
最後に、「その他の設定」を見ていきましょう。
その他の設定では、Google アナリティクスでトラッキングしたりする場合に、コードを書き込みます。
ただ、特に何も設定しなくても問題ありません。
ここまで終わったら、次は実際に固定ページに「お問い合わせ」欄を作っていきます。
Contact Form 7の設置
ここからは、Contact Form 7を使って、固定ページに「お問い合わせ」を作っていきます。
Contact Form 7の下図の赤枠の「ショートコード」をコピーします。
WordPressダッシュボードの「固定ページ」の新規追加をクリックします。
固定ページのお問い合わせ欄を作っていきます。
タイトルは、サイトのトップページのメニューに表示されるので、「お問い合わせ」など分かりやすいものにしましょう。
赤枠の「テキスト」をクリックし、Contact Form 7でコピーしたものを貼り付けます。
「公開」をクリックすれば、下記のように「お問い合わせ」が完成しました。
この後、メニューに固定ページで作った「お問い合わせ」を追加すれば、トップページに表示されるようになります。
以上が、Contact Form 7の設置です。
最後に、上記のような初期設定ではなく、より詳しい内容のお問い合わせを作るためのカスタマイズ例を紹介したいと思います。
カスタマイズ例
上記のように、問い合わせ内容を充実させたい場合のカスタマイズの方法を説明していきます。
カスタマイズの方法は簡単ですので、安心してくださいね！
まず、上記の内容にしたい場合は、下記のコードをコピーしてください。
<table class=”inquiry”>
<tr>
<th>
<span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder”例 神川 明”]
</td>
</tr>
<tr>
<th>
<span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder”例 sharerich@joy.ocn.ne.jp”]</td>
</tr>
<tr>
<th>
<span>電話番号</span>
</th>
<td>
[tel your-tel class:tel placeholder”例 090-1234-5678″]
</td>
<tr>
<th>
<span>日付</span>
</th>
<td>
[date* date-960 placeholder class:datesp ]
</td>
<tr>
<th>
<span>郵便番号</span>
</th>
<td>
[text* your-postalcode class:p-postal-code placeholder”例 111-2345″]
</td>
</tr>
<tr>
<th>
<span>都道府県</span>
</th>
<td>
[text* your-prefectures class:p-region placeholder”例 東京都”]
</td>
</tr>
<tr>
<th>
<span>ご住所</span>
</th>
<td>
[text* your-address class:p-locality placeholder”例 港区赤坂1-1-1 ◯◯マンション 101号室”]
</td>
</tr>
<tr>
<th>
<span>お問い合わせ内容</span>
</th>
<td>
[textarea* your-message class:content placeholder “テキスト入力欄”]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]迷惑メール防止のため、チェックボックスにチェックを入れた後送信してください。
[submit id:formbtn “上記の内容で送信する”]
これを、Contact Form 7の「フォーム」にペーストして、「保存」をクリックします。
このままですと、カスタマイズは未完成ですので気を付けてください！
この後、ダッシュボードの「外観」の「テーマの編集」でコードを書き込む必要があります。
「テーマの編集」では、スタイルシート（style.css)を開きます。
そして、スタイルシートの一番下に 、下記のコードをコピーして「ファイルを更新」をクリックしてください。
/*contact form 7*/
@media(max-width:500px){
.inquiry th,.inquiry td {
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;
}
.inquiry tr:first-child th{
border-top:1px solid #f5f5f5!important;
}
.inquiry .haveto,.inquiry .any {
font-size:10px;
}}
.inquiry th{
text-align:left;
font-size:14px;
color:#444;
padding-right:5px;
width:30%;
background:#f7f7f7;
border:solid 1px #f5f5f5;
}
.inquiry td{
font-size:13px;
border:solid 1px #f5f5f5;
}
.entry-content .inquiry tr,.entry-content table{
border:solid 1px #f5f5f5;
}
.haveto{
font-size:7px;
padding:5px;
background:#87cefa;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.any{
font-size:7px;
padding:5px;
background:#87cefa;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.verticallist .wpcf7-list-item{
display:block;
}
#formbtn{
display: block;
padding:15px;
width:350px;
background:#ffa500;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:2px;
margin:25px auto 0;
}
#formbtn:hover{
background:#fff;
color:#ffa500;
border:2px solid #ffa500;
}
その後、自分のサイトのメニューの「お問い合わせ」をクリックして、正しくカスタマイズされていればOKです。
Contact Form７の設置とカスタマイズの方法については、下記の動画が分かりやすいので参考にしてみてください。
最後に、スパムメールを防ぐために、reCAPTCHAとの連携方法を紹介します。
reCAPTCHAとの連携方法
こちらでは、Contact Form７の中で利用できる機能で、reCAPTCHAと連携してスパムメールを防止する方法を解説していきます。
まず、ダッシュボードの赤枠の「お問い合わせ」の「インテグレーション」をクリックします。
続いて、reCAPTCHAの赤枠のURLをクリックしてください。
すると、reCAPTCHAのぺージに移動するので、赤枠の「Admin console」をクリックします。
続いて、赤枠の「＋」をクリックしてください。
reCAPTCHAに、自分のサイトを新しく登録していきます。
上から順番に画像の通りに入力や選択をします。
ひとつずつ説明していきますね。
【ラベル】
ラベルには、あなたが管理しやすい名前を入力してください。
例えば、○○株式会社、○○ショップなど
【reCAPTCHAタイプ】
reCAPTCHAタイプは、「reCAPTCHA v3」を選択してください。
【ドメイン】
ドメインは、あなたのサイトのURLを添付します。
注意点は、URLの最後は「/」を含めないようにしてください。
【オーナー】
オーナーは、あなたのメールアドレスがすでに設定してあります。
追加したい場合は、「メールアドレスを入力」をクリックして、追加してください。
「reCAPTCHA利用条件に同意する」にチェックを入れ、最後に「送信」を押します。
そうすると、上記のように登録が完了します。
赤枠の「サイトキー」と「シークレットキー」をコピーしてください。
次に、「お問い合わせ」の「インテグレーション」に戻り、「インテグレーションのセットアップ」をクリックしてください。
すると、キーを入力する画面になりますので、先程表示されたreCAPTCHAのサイトキーとシークレットキーを入力して、「変更を保存」をクリックしましょう。
これで、reCAPTCHAとContact Form７の連携は完了です。
まとめ
今回は、Contact Form 7の機能、設定から使い方を画像で紹介してきました。
Contact Form 7は、簡単に問い合わせページを作ることができる便利なプラグインでしたね！
自動返信メールの利用、スパムメールの防止もでき、カスタマイズまで簡単にできてしまいます。画像で順番に解説しましたので、初心者の方でも一人で設定し、使い方を覚えていただけると思います。
カスタマイズの方法や、スパムメールを防止するreCAPTCHAとの連携も併せて紹介しましたので、ぜひ参考にしてみてください。