【ワードプレスでお問い合わせフォーム作成】Contact Form 7の使い方

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

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

Contact Form7 WordPressおすすめプラグイン
 

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

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

 

■全体イメージ

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

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

 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

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

 

 

【PR】個人事業主のHPにオススメ!無料テーマLightningの拡張デザインスキン

和風デザインならこちら!

親しみやすいデザインならこちら!

お問い合わせフォーム「Contact Form 7」を作成する

 

Contact Form 7とは

非常に有名な問い合わせフォーム作成用の日本製プラグインです。

Contact Form7 WordPressおすすめプラグイン
 

■公式サイト
Contact Form 7 – WordPressプラグイン
 

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

Contact Form 7 の主な機能

  • お問い合わせフォーム作成機能
  • 自動メール返信機能
  • (使いやすそうなものを抜粋)

 

プラグインをインストールする

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

固定ページ お問い合わせ
 

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

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

 

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

WordPress お問い合わせフォーム「ContactForm」をインストール

お問い合わせフォーム「ContactForm」をインストール

 

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

WordPress お問い合わせフォーム「ContactForm」を有効化

お問い合わせフォーム「ContactForm」を有効化

 

【PR】ネットショップを始めるなら!無料でスタートできるBASEがオススメ!

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

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

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

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

 

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

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

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

 

任意のページにコピーしたショートコードを貼り付けます。ここでは、事前に作成した固定ページ「お問い合わせ」に貼り付けています。

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

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

 

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

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

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

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

【PR】個人事業主のHPにオススメ!無料テーマLightningの拡張デザインスキン

和風デザインならこちら!

親しみやすいデザインならこちら!

お問い合わせフォーム「Contact Form 7」を編集する

さきほどのコンタクトフォームを編集する方法を説明していきます。
 

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

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

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

 

ここでは、コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンを押下して設定を変更していきます。

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

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

 
 

入力フォームを編集する

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

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

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

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

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

 

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

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

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

 

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

入力項目を必須にしたい場合は必須にチェックします。デフォルト値を設定したい場合は任意の値を入力してください。id属性やクラス属性については基本的に入力不要です。入力後に「タグを挿入」ボタンを押下します。

ContactForm フォーム編集画面で電話番号のフォームを追加する

ContactForm フォーム編集画面で電話

 

なお、上記で「この項目をテキストのplaceholderとして使用する」にチェックを入れると、下記のように入力凡例が表示されます。必要に応じて入力して下さい。
ContactForm Placeholderを入力すると入力凡例が表示される

 

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

他の入力項目をコピー&ペーストして、電話番号のタグも同様の構成にして保存してください。
ContactForm フォーム編集画面で他の入力項目と同様の構成にする
 

お問い合わせ画面を表示した際に電話番号が追加されていれば完了です。お問い合わせテストをして確認をしてください。

 

【PR】ワードプレスで人気の有料テーマはこちら

 

メール送信設定を編集する

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

Contact Form 7 メールの設定
 

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

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

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

 

「メール」タブではメールの設定ができます。
ContactForm メールタグの設定
 

送信元はデフォルト「wordpress@ドメイン名」になっています。必要に応じて「info@ドメイン名」に変更しましょう。(合わせてレンタルサーバー側でも利用するメールアドレスを発行しておくと良いかと思います)。

なお、gmailやyahooなどのサイトのドメイン以外のメールアドレスを送信元に利用すると偽装メールとして迷惑メールとして振り分けられる可能性が高くなるのでご注意ください。

Contact Form7 送信元はinfo@ドメイン名などが一般的。gmailやyahooなどの別ドメインの設定は非推奨
 

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

Contact Form 7 公式サイトより
 

また、フォームの入力項目に対応するタグ(ここでは[your-name]、[your-email]…および前述で追加した[tel-399]など)を本文などで利用することができます。

ContactForm フォームの入力項目に対応するタグを本文などの項目で追加・変更することができます
 

ここでは、メッセージ本文をわかりやすいように変更してみます。フォームの入力項目を増やした場合(本例では電話番号)は増やしたタグをメッセージ本文にも追加しましょう。
 

■初期状態
ContactForm メッセージ本文をわかりやすいように追加する
 

■メッセージ本文を追加
ContactForm メッセージ本文をわかりやすいように追加する
 
 

また「メール(2)を使用」すると訪問者に対して自動返信メールをすることができます。

お問い合わせフォーム メール(2)を使用で自動返信ができる

メール(2)を使用で自動返信ができる

 

先程と同様に、返信メールの懸命やメッセージ本文なども適切な内容に書き換えて、最後に保存してください。

ContactForm mail(2)の自動返信用メッセージ本文をわかりやすいように追加する
 

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

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

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

【PR】個人事業主のHPにオススメ!無料テーマLightningの拡張デザインスキン

和風デザインならこちら!

親しみやすいデザインならこちら!

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 で問い合わせ履歴とダウンロードができるようになります
 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

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

 

まとめ

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

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

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

 

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

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

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

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ