Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。

Contact Form 7公式サイト

Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。

下記のようにお問い合わせフォームを作り、サイトのフッターメニュー（ブログの最下部エリア）に設置していきます。

Contact Form 7の使い方【簡易】

• Contact Form 7をインストール・有効化
• お問い合わせフォームを作成する
• お問い合わせフォームを、フッターメニューに表示させる
• お問い合わせフォームを使いやすいように編集する
• お問い合わせフォームのスパム対策(別記事)

step１．Contact Form 7をインストール・有効化する

まずは、Contact Form 7をインストール・有効化していきましょう。

管理画面　＞　プラグイン　＞　新規追加

検索フォームから「Contact Form 7」と入力してください。

Contact Form 7が表示されましたら、インストール・有効化をしてください。
 

以上で、インストール・」有効化は完了です。

step２．お問い合わせフォームを作成する

ContactForm7を有効化すると、管理画面に「お問い合わせ」が出現しています。

1．お問い合わせ　＞　コンタクトフォーム　をクリックします。

「コンタクトフォーム」の画面が表示されます。

２．「コンタクトフォーム 1」がデフォルトでありますので、その右側にある[　]内のショートコードをコピーしてください。

３．「ショートコード」をコピーできたら、管理画面の、固定ページ　＞　新規追加　をクリックしてください。

４．ここから、ContactForm7の「ショートコード」を使って、「お問い合わせフォーム」の固定ページを作成していきます。

タイトルは、シンプルに「お問い合わせ」とします。

本文に、先ほどコピーしたContactForm7のショートコードを貼り付けてください。

ブロックエディタをお使いの場合は、以下のように反映されます。

クラシックエディター(旧エディター)をご利用の場合は下記のような画面になります。

プレビュー確認をしてみますと、きちんと問い合わせフォームの形になっています。

５．パーマリンクを設定していきます。

ブロックエディタの場合、右側のナビに並べられいる「パーマリンク」をクリックすると、「URL スラッグ」欄が表示されます。
このフォーム内を「contact」と入力し直したうえで、「公開」ボタンをクリックしてください。

日本語のパーマリンクは ”文字化け” しますので、「英数字」に直すのが基本です。

以上で、お問い合わせフォーム作成が完了です。

step３．お問い合わせフォームを、フッターメニューに表示させる

step２．で、作成した問い合わせフォームを、フッターメニューに表示させます。

１．WordPress の管理画面から、外観　＞　カスタマイズ　＞　メニュー を選択します。

２．「新しいメニューを作成しましょう」 ボタンをクリックしてメニューを作ります。

３．メニュー名に「任意の名前」を付け、「フッターメニュー」を指定して「メニューを保存」をクリックします。

４．編集するメニューから作成した「フッターメニュー」を「選択」してください。

５．左側の「メニュー項目を追加」から、「固定ページ」の「お問い合わせ」にチェックをいれて、「メニューを追加」をクリックします。
そうしますと、右側に「お問い合わせ」が表示されます。

最後は「メニューを保存」をクリックし、保存します。

サイトを確認してみますと、フッターにお問い合わせフォームが表示されます。

以上で、フッターメニューに表示させる作業は完了です。

step４．試しにお問い合わせフォームから問い合わせてみる

作成したお問い合わせフォームに、実際に入力して送信してみましょう。

WordPressインストール時に設定したメールアドレス宛に問い合わせ内容が届いていれば大丈夫です。届いていない場合は迷惑メールも確認してみてください。

step５．お問い合わせフォームを編集する

このままでも、ContactForm7問い合わせフォームは利用できますが、編集してより快適に使えるようにしていきます。

管理画面　＞　お問い合わせ　＞　コンタクトフォーム　を選択します。

コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンをクリックします。「コンタクトフォーム 1」の編集画面が表示されます。

問い合わせフォーム表示設定

「フォーム」タグで、表示される問い合わせフォームの内容を決めます。

「氏名」の横に「(必須)」と入れたり、電話番号記載を追加してもいいですね。

<label> お電話番号(必須)
[tel* your-tel]</label>

ラジオボタンをいれて、連絡手段は何がいいか、問うこともできます。

連絡手段
[radio radio-348 use_label_element default:1 "メール" "お電話"]

また、このままではスパムや迷惑コメントが送られてくる可能性がありますので、スパム対策を行いましょう。その方法は、こちらの記事をご参照ください。

スパム対策として、Googleが提供している「reCAPTCHA」が有効です。

ContactForm7へreCAPTCHAのコードを埋め込むこともできるのですが、サイトスピードを少しでもはやくするために、「Invisible reCaptcha for WordPress」を使って、reCAPTCHAをサイトに導入し、ContactForm7へも対応させる方法がおすすめです。

その方法は、以下の記事をご参照ください。

reCAPTCHv３を導入方法はこちら(おすすめ)

reCAPTCHv2を導入方法はこちら

reCAPTCHA v3と、v2の違いは、こちらの記事をご参照ください。

問い合わせお知らせ設定

続いて、メールの編集で管理者へのメール通知とサイト訪問者への自動返信メールの設定をする手順を説明していきます。

「メール」タグを開いてください。

管理者への通知メールを設定する

上部の「メール」設定内容が、自動メールで管理者(自分)に知らせてくれます。

上部の枠は、ひとつの項目をのぞいて、あとはデフォルトのままで大丈夫です。

変更する一か所は、一番上の「送信先」です。デフォルトでは[_site_admin_email]となっています。
このコードが設定されていてことによって「WordPressの管理者メールアドレス」がそのまま適用されるようになっています。

つまり、この設定のまま、問い合わせをくれた訪問者へ返信した場合、管理者メールアドレスが、相手に知れてしまします。

このままでは最悪サイトの乗っ取りなどにもつながりますので、「管理者メールアドレス」と「お問い合わせ用メールアドレス」は、きちんと分けておいて、第三者に知られても問題ない、「問い合わせ専用のアドレス」を設定しておきましょう。

問い合わせ専用のメールアドレスを新たに作るのであれば、独自ドメインからのメールアドレスを作成することをおすすめします。その方法は、こちらの記事をご参照ください。

自動返信メールを設定する

つぎに、問い合わせしてくれた訪問者への自動返信メールを設定していきます。

「メール (2)」の「メール (2) を使用」にチェックをいれてください。チェックをいれることで、訪問者に対して自動返信メールをすることができます。

「メール(2)を使用」にチェックを入れると、自動返信のメール設定がでるようになります。

基本デフォルトのままで大丈夫です。

会社の住所や、電話番号や名前を入れた場合は、「メッセージ本文」に追記してください。

最後に実際にメールフォームに入力してメール通知のテストを行い、設定どおりにメールが届けばしていれば完了です。

ちなみに、「送信元」のyour-emailのyourは、問い合わせをしたサイト訪問者が入力したメールアドレスを指しています。管理者(自分)のメールアドレスのことではありません。

関連記事