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

WordPress

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

2017年5月30日

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

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

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

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

 

■全体イメージ

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

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


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
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 で問い合わせ履歴とダウンロードができるようになります
 

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


 

まとめ

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

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

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


 

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

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

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

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


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

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

詳細はこちら


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

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

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

-WordPress
-, ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.