この記事では、WordPressでお問い合わせページ(フォーム)をContact Form7というプラグインを使い、誰でも簡単に作る方法を解説してゆきます。

ブログやホームページを運営してゆく上で、必要になるのがお問い合わせページですよね。
お問い合わせページを設置することで、例えばお仕事のご依頼や相談と言った窓口の役割を果たしてくれるようになります。

この記事では、お問い合わせページ(フォーム)を作るだけでなく、お問い合わせページの編集入力フォームへ入力例を入れる方法自動返信メールの作り方と言ったカスタム方法も図解入りで詳しく解説しますので、是非ご活用ください!

スポンサーリンク

Contact Form 7を使った、お問い合わせページの作り方・手順

Contact Form7プラグインをインストールにするには、【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで【Contact Form7】と検索すると出てきます。

お問い合わせ用プラグイン検索結果

【Contact Form7】プラグインが表示されたら、【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。
これで、インストールが完了します。

インストールが終わったら、【ダッシュボード】⇒【お問い合わせ】⇒【コンタクトフォーム】から管理画面へアクセスしましょう。

cf01

 

既存で1つ完成されたお問い合わせフォームがありますので、まずはそれを編集して設置しましょう。

cf02

クリックをすると、このような画面が表示されます。

ContactForm7フォーム画面

フォームに追加できる項目は、名前の通りですが、実際に使ってみて確認をすると良いです。

お問い合わせ時に欲しい情報をこの画面で編集し、同じ画面の下にある『保存』ボタンをクリックすれば、フォームの完成です。
尚、何度でも編集が出来ます。

完成したら、保存してフォームを設置しよう

では、このフォームを早速設置してみましょう!

まず、②にあるように、コードをコピーしてください。

cf06

 

次に、新規の固定ページを作成しましょう。

cf07

 

新規固定ページの作成画面で、以下の様に入力してください。

cf08

最後に【公開】ボタンをクリックすると、完成となります。

完成したページは、グローバルメニューかサイドメニューに表示させると良いでしょう。

グローバルメニューの編集方法は『WordPressでグローバルメニュー・ウィジェットを作成・編集する方法』で詳しく解説しています。
併せてご活用ください。

WordPressでグローバルメニュー・ウィジェットを作成・編集する方法

2015.11.12

尚、同じフォームは、複数のページに組み込むことも可能です。
コピーしたコードを挿入したい記事・固定ページ内にペーストすれば、好きな場所にお問い合わせフォームの設置が可能です。

また、お問い合わせフォームのコードは、名前を編集しない限り変わりません。
フォーム内の編集をすれば、自動的に反映されるのも、嬉しいポイントです。

お問い合わせフォームの上限はあるの?

お問い合わせフォームの設置数に上限はありません。
お問い合わせ窓口が複数ある場合は、使い分けてみてください!

入力フォームに入力例を入れる方法

この様に、Contact Form 7で入力フォームに入力例を入れる方法です。

ContactForm7入力例

作成したお問い合わせフォーム編集画面を開き、入力例を入れたいコード内に placeholder "ここに入力例"を追記してください。
*placeholderの前に、半角スペースが入ります。

例えはお名前の所に入力例を入れたい場合。

[text* your-name] を [text* your-name placeholder "ここに入力例"] とすればOKです。

ContactForm7入力例のサンプル

お問い合わせ送信後の自動返信メールの作り方

Contact Form 7でお問い合わせ送信後に、自分と相手にそれぞれ自動返信メールを送る、送る内容を編集する方法です。

自分宛ての自動返信メールの作り方

まずは、お問い合わせフォームの編集画面を開きます。
次に、図のように『メール』のタブをクリックすると、自動返信メールの編集画面が開きます。

主に編集するのは以下の項目です。

  • 返信先:お問い合わせがあった際に、通知メールが送られてくるメールアドレスです。
    あなたが常に確認が取れるメールアドレスに設定をしておきましょう。
  • 題名:自動返信メールのタイトルを決める事が出来ます。
    元々お問い合わせのタイトルが表示されるようになっていますが、加えて別のタイトルをつけたりすることもできます。
    例)○○さんからお問い合わせが来ました。
    例)○○のお申し込みがありましたよ!
    のように自分がパッと見て、分かるようにするといいですね。
  • メッセージ本文:ここは、送られたメッセージの内容を編集できます。
    下の図のように『メールタグ』をメッセージ内に入れないと、お問い合わせ内容の一部が確認できなくなってしまいます。
    必ずもれずに入れ、その項目が何を意味しているのか?も入れると分かりやすくなります。
ContactForm7自動返信メール自分宛てメールタグ

例えば、ワークショップのお申し込みの場合、こんな感じにすると、管理もしやすくなりますよね。

お問い合わせをした方への、自動返信メールの作り方

まずは、お問い合わせフォームの編集画面を開きます。
次に、自分の宛ての自動メールの設定と同じく『メール』のタブをクリック。
同じ画面の下の方に『返信(2)』と記載されたチェックボックスがあるので、そこをクリックしてください。
以下の様な画面が表示されます。

ContactForm7自動返信メール相手宛て

主に編集をするのは、以下の項目です。

  • 送信元:誰からなのか?が分かりやすくできるので、必要に応じて編集しましょう。
  • 題名:何に対してのメールなのか?が分かるようにするといいですね。
    例えば、お申し込みであれば、「○○のお申し込みを受け付けました」のようなものとか。
  • メッセージ本文:ここで、相手の方にも、送信した内容が分かるようにしてあげましょう。
    自分宛ての自動返信メール同様、『メールタグ』に漏れがないように注意してください。
使える!小ワザ

ただ送信内容を送信するだけではなく、メールマガジンでよくある、相手の名前が入ったメールにする事もできます。

『相手の名前のメールタグ+様 / さん』という具合です。
こうすることで、無機質な自動返信メールではなく、個人宛っぽくすることもできます。
何かの申し込みの時であれば、バックエンドオファーなどでも使えますね!

お問い合わせ送信後のメッセージ編集方法

Contact Form 7では、以下のようにフォーム送信後にメッセージを表示させる事が出来ます。

ContactForm7送信後のメッセージ

 

デフォルトで、設定はされていますが、個別で編集をしたい場合は、編集希望のフォームの編集画面を開き、以下のように『メッセージ』のタブをクリックしてください。

編集できるメッセージ一覧が表示されますので、編集後、同ページの下にある『保存』ボタンをクリックすれば、反映がされます。

スパム対策をする方法

スパム投稿防止の強化をしたい時は、『お問い合わせ』のメニューにインテグレーションの設定というメニューがあるので、そこから行えます。

 

ContactForm7インテグレーション

設定をすると、このようによく見る「私はロボット(スパム)じゃないですよ」というチェックボックスを追加させる事が出来ます。

インテグレーション

インテグレーション機能を使うには、Googleが提供する『reCAPTCHA』にブログやホームページの登録が必要です。
登録完了すると、サイトキー (site key) とシークレットキー (secret key) を取得できますので、『キーを設定する』ボタンをクリックし、それぞれを入力、保存してください。

元々このボタンは下の図のように、あるので、後は設置をしたい場所(例えば送信ボタンの上)にコードを挿入して保存すればOKです!

インテグレーション追加後

まとめ お問い合わせ以外にも使えるので、使わな損!

という訳で、WordPressでお問い合わせをContact Form7プラグインで簡単に作る方法でした。

ここで解説したことが、一通り分かれば、お問い合わせ以外にも、セミナーやワークショップなどのお申し込みフォームとしても活用が出来ます!

比較的簡単で、無料なのに、高性能なので、ぜひ使ってみてくださいね!