有名プラグインContact Form7でお問い合わせフォームを作成する

WordPress

【Contact Form 7の使い方】WordPressで問い合わせフォーム作成

2017年5月30日

今回は、Contact Form 7を利用してWordPressに「お問い合わせフォーム」を作成する方法を紹介します。
 

Contact Form 7 プラグイン
 

ここでは下記のようにお問い合わせフォームを作り、WordPress管理者へのメール通知と自動返信を行う設定について説明していきます。

お問い合わせフォームのサンプル

 

■全体イメージ

ワードプレスお問い合わせプラグインContact Form 7でメール通知と自動返信メールを設定する

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


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

【はじめに】お問い合わせフォーム「Contact Form 7」とは

「Contact Form 7」は、有名なWordPress問い合わせフォームプラグインです。作成者は日本人で、日本語のサイトがあり使い方など日本語で解説されています。
Contact Form 7 プラグイン
 

■Contact Form 7公式サイト
Contact Form 7 | WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。 [日本語]
 

お問い合わせフォームの作成や自動メール返信機能などを簡単に設定して、記事にショートコードを貼り付けるだけで実装することができます。
 

「Contact Form 7」ででできこと

  • お問い合わせフォーム作成機能
  • 自動メール返信機能

※確認画面表示機能はありません。

 

【ステップ1】Contact Form 7をインストール・有効化する

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

(※)本手順の事前準備として、はじめに「お問い合わせ」という本文なしの固定ページを作成しておいてください。
固定ページ お問い合わせ
 

お問い合わせフォーム「Contact Form 7」をインストールしていきます。
 

管理画面でプラグイン>新規追加を選択してください。

 

Contact Form 7」と入力して検索します。富士山の絵が出てきている「Contact Form 7」をインストールします。
「Contact Form 7」で検索して「今すぐインストールする」
 

お問い合わせフォーム「ContactForm」を有効化します。
「Contact Form 7」を有効化する
 

【ステップ2】お問い合わせフォームを作成する

ContactForm7を有効化すると、左側の管理メニューに「お問い合わせ」が出現しています。コンタクトフォームを選択します。

WordPress お問い合わせフォーム「ContactForm」 お問い合わせが出現。コンタクトフォームを選択

お問い合わせが出現。コンタクトフォームを選択


 

「コンタクトフォーム 1」の右側にある[]内のショートコードをコピーします。

WordPress お問い合わせフォーム「ContactForm」 []内のショートコードをコピー

[]内のショートコードをコピー


 
ここでは、事前に作成した固定ページ「お問い合わせ」に貼り付けています。ウィジェット>ショートコードから埋め込みます。
 


 

(補足)クラシックエディター(旧エディター)をご利用の場合

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

任意のページにコピーしたショートコードを貼り付ける

任意のページにコピーしたショートコードを貼り付ける

 

プレビューを表示してお問い合わせフォームが表示されていれば完了です。実際にフォームに入力して問い合わせしてみましょう。

Contact Form 7のショートコードを貼り付けた固定ページでお問い合わせフォームが表示されている
 

初期状態では、ワードプレスインストール時に設定したメールアドレス宛に問い合わせ内容が通知されていればOKです。(届いていない場合は迷惑メールも確認してみてください)

問い合わせが通知されている
 

次章以降は、コンタクトフォームを編集する方法を説明していきます。

 

【ステップ3】お問い合わせフォームのメール設定を行う

お問い合わせフォームのメール設定を行っていきます。
 

ダッシュボードの「お問い合わせ」>「コンタクトフォーム」を選択します。

WordPress お問い合わせフォーム「ContactForm」 お問い合わせが出現。コンタクトフォームを選択

お問い合わせが出現。コンタクトフォームを選択


 

コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンを押下します。

編集でお問い合わせフォームの設定を行う

編集でお問い合わせフォームの設定を行う


 

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

お問い合わせフォームの設定画面

お問い合わせフォームの設定画面


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

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

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

「メール」タブを開きます。メールの設定ができます。各項目の意味は後述の表にて説明します。
Contact Form 7 メールタグの設定画面
 

項目 意味
(1)送信先メール 管理者通知の送信先となるメールアドレス(TO)を設定します。初期値は、WordPressインストール時に入力したメールアドレスになっています。

(2)送信元メール 管理者通知メールの送信元メールアドレス(FROM)を設定します。
初期値は「wordpress@ドメイン名」になっています。

■送信元初期状態
Contact Form 7 (2) メール送信元

必要に応じて「info@ドメイン名やcontact@ドメイン名」などよくある名前に変更しましょう。あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。
■送信元変更後の状態
(2)送信元メール

(※)なお、送信元は、必ず「xxx@サイトドメイン名」である必要があります。webst8.netにWordPressをインストールしている場合は、xxx@webst8.netなどになります。
理由は、gmailやyahooなどのサイトドメイン以外のメールアドレスを送信元に利用すると偽装メール扱いになってしまうためです。

メールの送信元項目にサイトのドメインに属するメールアドレスを指定しないといけないのはなぜですか?
例えば、メールの送信元項目に “your-name@yahoo.com” と指定されていたとして、でも実際にはあなたのウェブサーバー(もちろん yahoo.com ではない)から送信されているのですから、中継するメールサーバーがそれを偽装アドレスと認識する可能性は十分大きいわけです。サイトと同じドメインのメールアドレスを使っていればそういう扱いを受けるリスクを小さくできます。
Contact Form 7 公式サイトより引用

(3)題名
※変更推奨
管理者通知メールのメール件名を設定します。
初期値はWordPressインストール時のタイトルになっているので「ホームページからの問い合わせ」などわかりやすい名前に変更しておきましょう。

■題名の初期状態
Contact Form 7 (3)メール件名 初期状態

■題名変更後の状態
Contact Form 7 (3)メール件名
※なお、[your-subject]で、サイト訪問者が入れた題名が件名に追記されます。

(4)メール本文
※変更推奨
管理者通知メールのメール本文の設定をします。
初期状態は文言がやや不親切なので、ここでは、メッセージ本文をわかりやすいように変更してみます。
 
■メール本文の初期状態
Contact Form 7 (4)件名 初期状態

■メール本文を自然な文言に変更した状態
Contact Form 7 (4)件名 

(※注1)メールタグ 管理者メール通知と同様に、メールタグには、サイト訪問者がお問い合わせフォーム内に入力した値が反映されます。
Contact Form 7 メールタグ

たとえば、[your-name]にはサイト訪問者が入力した自分の名前、[your-subject]にはサイト訪問者が入力した題名が入ります。
フォームに入力された値が メールタグを通じて 反映される

(※注2)追加ヘッダー 追加ヘッダー「Reply To」を設定すると、メール返信ボタンを押した際に宛先にReply Toにセットされたメールアドレスがセットされます。
基本はこのままでOKです。
Contact Form 7 追加ヘッダー

 
 

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

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

先ほどのメール設定の下部にある「メール(2)を使用」すると訪問者に対して自動返信メールをすることができます。
Contact Form 7 メール(2)にチェック
 

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

項目 意味
(1)送信先メール 自動返信先となるメールアドレスです。初期状態[your-mail]になっているので、そのままにしておきます。
Contact Form 7 メール(2) 送信先
(2)送信元メール 自動返信メール(サイト訪問者向け)の送信元メールアドレスを設定します。
初期値は「wordpress@ドメイン名」になっています。

■送信元初期状態
Contact Form 7 メール(2) 送信元

必要に応じて「info@ドメイン名やcontact@ドメイン名」などよくある名前に変更しましょう。あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。
■送信元変更後の状態
Contact Form 7 メール(2)  送信元 変更後

(3)題名
※変更推奨
自動返信メール(サイト訪問者向け)の送信するメール件名を設定します。
初期値はWordPressインストール時のタイトルになっているので「お問い合わせありがとうございました。」などわかりやすい名前に変更しておきましょう。

■題名の初期状態
Contact Form 7 メール(2) 題名

■題名の変更後の状態
Contact Form 7 メール(2)  題名 変更後

※なお、[your-subject]で、サイト訪問者が入れた題名が件名に追記されます。

(4)メール本文
※変更推奨
自動返信メール(サイト訪問者向け)の送信メールの本文の設定をします。
初期状態は文言がやや不親切なので、ここでは、メッセージ本文をわかりやすいように変更してみます。
 
■メール本文の初期状態
Contact Form 7 メール(2) メッセージ本文
 

■メール本文変更後の状態
Contact Form 7 メール(2) メッセージ本文 変更後

(※注1)メールタグ メールタグには、サイト訪問者がお問い合わせフォーム内に入力した値が反映されます。
Contact Form 7 メールタグ

たとえば、[your-name]にはサイト訪問者が入力した自分の名前、[your-subject]にはサイト訪問者が入力した題名が入ります。

(※注2)追加ヘッダー 追加ヘッダー「Reply To」を設定すると、メール返信ボタンを押した際に宛先にReply Toにセットされたメールアドレスがセットされます。
「(2)送信元メール」でやり取りする場合は、下記を消しても構いません。「(2)送信元メール」で連絡やり取りしない場合は、返信用メールアドレスを設定します。
Contact Form 7 メール(2) 追加ヘッダー

 

最後に実際にメールフォームに入力してメール通知のテストを行い、意図した通りに動作していれば完了です。
 

■管理者へのメール通知
Contact Form 7 メール通知
 

■サイト訪問者への自動返信メール
Contact Form 7 自動返信メール
 
 

【ステップ4】入力フォームを追加・編集する

ここではお問い合わせフォームの入力項目を追加する方法を説明していきます。

Contact Form 7 入力フォームの設定
 

フォーム部品を新規追加する(電話番号の場合)

ここでは、電話番号を例にフォーム部品を追加する方法をご紹介します。
 

コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンを押下します。

編集でお問い合わせフォームの設定を行う

編集でお問い合わせフォームの設定を行う


 

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

お問い合わせフォームの設定画面

お問い合わせフォームの設定画面


 

コンタクトフォーム1 のフォーム設定画面です。項目を追加したい位置にカーソルを合わせて、追加したいフォーム種類を追加します。ここでは例として電話番号を追加します。
ContactForm フォーム編集画面で電話番号を追加
 

入力項目を必須にしたい場合は必須にチェックします。元々はtel-xxxのような番号ですが、ここではわかりやすい命名「your-tel」に変更して、「タグを挿入」ボタンを押下します。
ContactForm フォーム編集画面で電話番号のフォームを追加する
 

フォーム編集画面で電話番号のタグが追加されていることを確認します。
Contact Form 7 電話番号のタグが追加された
 

他の入力項目を参考にして、文言・labelタグを他の同様の形式にして保存してください。
フォーム編集画面で他の入力項目と同様の構成にする
 

まだ設定は終わっていません。つづいてメール設定で今回追加したメールタグ[your-tel]を追記していきます。
 

メール通知設定に追加したフォームタグを追記する

メールタグを開きます。先ほど追加した[your-tel]がメールタグとして利用できるようになっているのでコピーします。
先ほど追加した[your-tel]がメールタグとして利用できるようになっている

管理者通知メールのメッセージ本文を追加します。
ContactForm メッセージ本文に先ほど追加したフォーム用のメールタグを追記する

自動返信メールのメッセージ本文に追加します。
ContactForm メッセージ本文に先ほど追加したフォーム用のメールタグを追記する
 

本設定を忘れると、電話番号入力欄は増えているけれど、メール本文には電話番号が表示されないということになってしまうので必ず実施してください。

 

お問い合わせ画面を表示した際に電話番号が追加されていれば完了です。お問い合わせテストをして意図した通りのメール通知・本文になっているかを確認してください。

 
 

フォーム部品を新規追加する(チェックボックス・ラジオボタン の場合)

ここでは、他によく使うチェックボックス・ラジオボタンを例にフォーム部品を追加する方法をご紹介します。
 

コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンを押下します。

編集でお問い合わせフォームの設定を行う

編集でお問い合わせフォームの設定を行う


 

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

お問い合わせフォームの設定画面

お問い合わせフォームの設定画面


 

コンタクトフォーム1 のフォーム設定画面です。項目を追加したい位置にカーソルを合わせて、ラジオボタンを押下します。
フォーム部品追加 フォームを追加したいところに カーソルを合わせてラジオボタン  をクリックします
 

元々はradio-xxxのような番号ですが、ここではわかりやすい命名「reply-method(名前は任意)」に変更して選択肢を一行ごとに入力、「ここの項目をlabelで囲む」にチェックを入れて「タグを挿入」ボタンを押下します。
ラジオボタン 追加  選択肢を一行ごとに 入力します
 

ラジオボタンのフォームが追加されました。
ラジオボタン の フォームが追加されました
 

ラジオボタン用の任意の文言をフォーム部品上部に入力して「保存」ボタンを押下してください。なお、radioボタンの場合は labelタグで括ってはいけません。
radioボタンの場合は labelタグで括らない。
 

※radioボタンの場合は labelタグで括ると保存時にエラーが起きます。(チェックボックスなども同様)
ラジオボタンやチェックボックスを labelタグで囲むとエラーが起きるので注意!
 
 

電話番号を追加した時と同様に今回追加したメールタグ[reply-method]をメールの本文に追記してください。
 

メールタグを開くと[reply-method]タグが追加されています。
reply-methodタグが追加された
 

[reply-method]タグを管理者通知メール用のメッセージ本文に追記します。
reply-methodをメッセージ本文に追記する
 

[reply-method]タグを自動返信メール用のメッセージ本文に追記します。
reply-methodをメッセージ本文に追記する
 

以上で設定は完了です。
 

【スパム対策】reCAPTCHAをContact Form 7に実装する

お問い合わせフォームは、スパム攻撃の対象になりやすく、ある程度の期間サイトを運営していると急に海外からのスパムメールが頻繁にくるようになります。
 

スパムメールの対策として、Googleの無料サービスrecaptchaをContact Form 7実装しておく方法があります。
Google Recaptcha トップページ
 

reCAPTCHAには、いくつかバージョンがありますが、最新のバージョン「reCAPTCHAv3」を利用すると、「人目につかないバックグラウンドでGoogleがスパムかどうかを判断」して、サイトを保護してくれます。
 

詳しい設定の仕方は「【無料スパム対策】Contact Form 7でreCAPTCHAを設定する」をご参照ください。
 
 

【補足】Contact Form 7とAnalyticsコンバージョンの設定方法

補足として、Contact Form 7とAnalyticsコンバージョンの設定方法を添付します。

(初心者の方は必ずしも設定しなくても問題ありません。)
 

つぎに、Contact Form 7とGoogle Analytics連携で、コンバージョン(目標)の設定方法を説明します。
 

下記のページをご参考ください。

フォーム送信を Google Analytics でトラッキングする
 

なお、以前はContact Form 7の編集画面でjavascriptのon_sent_ok のフックを使用する方法で設定できましたが、この機能は2017年中に廃止されました。現在はエラーで設定できなくなっていますのでご注意ください。
 

また、お問い合わせ後にサンクスページに飛ばしてコンバージョンを計測する方法もありますが、Contact Form 7の作者はこの方法は推奨していないようです(する必要はないという考え方のようです)。

サンクスページに飛ばしてコンバージョンを計測した場合は、下記を参考に設定することができます。

送信後に異なる URL にリダイレクトさせるには
 
 

補足 Contact Form DBで問い合わせ履歴を残す

また、公式サイトには掲載されていません(以前は掲載されていました)が、Contact Form DB という連携プラグインもあります。
 

Contact Form DBを利用すると問い合わせ履歴を管理画面から確認したり、ダウンロードすることができるようになります(Contact Form DBを有効化以降の履歴が閲覧できます)。
 

下記のGithubサイトからダウンロードすることができます(ご利用のContact Form 7のバージョンと対応しているかは各自確認してください)。
contact-form-7-to-database-extension
 

管理画面からContact Form 7の問い合わせ履歴を確認したりダウンロードすることができるようになりますのでご興味があれば試してみてください。

Contact Form DB で問い合わせ履歴とダウンロードができるようになります
 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 

まとめ

今回は、Contact Form 7を利用してお問い合わせフォーム作成する方法を説明しました。

ワードプレスお問い合わせプラグインContact Form 7でメール通知と自動返信メールを設定する

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


 

その他の細かい使い方や留意事項などは下記の公式サイトから確認することができます。

使い方 | Contact Form 7 公式サイト
 

お問い合わせフォームを活用することで、サイト訪問者との連絡を円滑に行うことができるようになりますので、ぜひ活用してみてください。
 

そのほかにもおすすめプラグインを、「目的別WordPressのおすすめプラグインを徹底解説!」でまとめてご紹介していますので、次のステップとしてぜひご参考にしてみてください。

【2020年版】目的別WordPressのおすすめプラグインを徹底解説


 

今回は以上になります。最後までご覧いただきありがとうございましたs。
 

合わせて読みたい記事

WordPressの使い方を「【2020年版WordPress(ワードプレス)の使い方総まとめ】」に詳しく説明していますので、WordPressの使い方を一通り勉強したい方は合わせてご参照いただければ幸いです。

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,

© 2020 WEBST8のブログ Powered by AFFINGER5