WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

Contact Form 7プラグインでお問い合わせフォームを作成して固定ページで表示させる方法

今回ご紹介するWordPressプラグインは、「Contact Form 7(コンタクトフォーム7)」です。このプラグインは、お問合せフォームを簡単に作ることができます。

お問い合わせフォームとは、こんなページです。実際のページはこちら。

ワードプレスを作ったら、必ず作っておきたいページの中にお問い合わせフォームがあります。

ですので、この記事では、お問い合わせフォームを作るために必要なWordPressプラグイン「Contact Form 7」のインストールから作成方法まで解説します。

では早速、いきましょう。

すぐに「Contact Form 7」でお問合せフォームを作成したい方は、こちら「【Contact Form 7(コンタクトフォーム7)】お問合せフォームの作成方法」を見てください。

もし、ワードプレス初心者さんで、ワードプレスに作っておくべき必須のページを知らない方がいたら、この記事もぜひチェックしておいてくださいね!

参考:WordPressブログで最初に作っておきたい固定ページ【ブログ制作のプロが作成方法を徹底解説!】

YouTube動画も作成しています。

Contact Form 7(コンタクトフォーム7)】とは?

Contact Form 7は、ワードプレスにお問い合わせページを設置できるかなり優秀なプラグインです。

Contact Form 7を作る際には、テキスト・数値・日付・チェックボックス・ラジオボタン・承諾確認ボックスなどを挿入でき、自分好みのお問い合わせフォームを作成できます。

ただ、これだけのことができるとなると設置が難しそうに感じる方も多いですが、難しいHTMLなどのコードを書けなくても使えるので大丈夫です。

誰でも簡単に、お問い合わせフォームを作成できて、固定ページや投稿ページにはショートコードを使えばすぐに設置することができるんです!!

Contact Form 7(コンタクトフォーム7)】をインストールする方法

WordPressのダッシュボードにログインします。

【プラグイン】にマウスを合わせて【新規追加】をクリックします。

画面が切り替わるので、右上の【プラグインの検索】にプラグイン名(Contact Form7)を入力します。

検索結果に【Contact Form 7】が表示されますので【今すぐインストール】をクリックします。

少しすると【有効化】というボタンに代わりますので、クリックします。
※有効化をクリックしないと、導入したプラグインは機能しません。

画面が切り替わり、【プラグインを有効化しました】と表示されれば完了です。

インストールと有効化ができましたので、さっそく設定していきます。

Contact Form 7(コンタクトフォーム7)】お問合せフォームの作成方法

フォームの作成と設定を行っていきます。

【Contact Form 7(コンタクトフォーム7)】新規追加→フォーム作成

左のメニューの【お問合せ】にマウスを合わせて【新規追加】をクリックします。

コンタクトフォームを追加という画面に切り替わりますので、必要項目を入力します。

【ここにタイトルを入力】と表示されているところに、フォームの名前を入力していきます。(例:お問合せフォーム・コンタクトフォームなど)

下の【フォーム】という枠内にお問合せフォームの項目を選びます。

わたしは、デフォルトのままの内容で

  • お名前
  • メールアドレス
  • 題名
  • メッセージ本文

としています。

【Contact Form 7(コンタクトフォーム7)】メール設定

次に【メール】の設定です。

※Contact Form 7 は送信されたメッセージをどこにも保存しません。このとき、もし設定メールアドレスが間違っていると大事なメッセージを受け取ることができず見落としてしまいます。

【メール】というタブをクリックすると、下図の画面になります。

この画面では、お問合せがあったときのメール通知設定ができます。

設定項目の内容

① 送信先:
お問い合わせが入った時に、お問い合わせがきた通知を受け取るための自分のメールアドレスを入力。
デフォルトではワードプレスを作成した時に設定したメールアドレスになっていますが、任意のメールアドレスに変えても大丈夫です。

② 送信元:
送信元というのは、お問い合わせメールの送信元メールアドレスになります。
デフォルトのままで大丈夫です。
もし自分がわかりやすいように変更したい場合は、[_site_title]を削除して「WPお問い合わせ」に変えてもOK。
<wordpress@mydomein.com>の部分は削除したり、変えたりしないようにしてください。

③ 題名:
デフォルトでは[_site_title]になっていて、ブログのタイトルが自動的に入るようになっています。ここは”メールの件名”になるところです。
件名には、ご自身が分かりやすい名前に変更しておくとメールがきた時に分かりやすいです。

④ 追加ヘッダー:追加ヘッダーというのはメールの返信先を追加してくれるところです。
お問い合わせしてくれた人のメールアドレスを”返信先”という項目で知らせてくれるので、デフォルトの[your-email]のままで大丈夫です。

⑤ メッセージ本文:
受け取るメールの内容になります。

すべて設定ができましたら、【保存】をクリックします。

すると下図のような画面に切り替わりますので、赤枠部分をコピーします。

これで、お問合せフォームは出来上がりました。

もし、自動返信など設定しない場合は、作ったお問い合わせフォームを固定ページなどに設置していきます。そうしないとお問い合せページとして使えません。

自動返信を追加したい方は、このまま次の項目に進んでください。

固定ページの設置の方法を知りたい方は、こちら「固定ページにお問合せフォームを設置する方法」をみてください。

【Contact Form 7(コンタクトフォーム7)】メール設定2で自動返信

Contact Form 7では、自動返信を設定することができます。

自動返信というのは、お問い合せページからお問合せしてくださった方に、「問い合わせを受け付けました」みたいなメッセージを送る機能です。

自動返信をしておくと、お問い合せしてくださった方に「ちゃんとメッセージが送れた」ということが分かるので良いですよね♪

というわけで、自動返信の設定方法を解説します。

自動返信の方法は、YouTube動画でも解説していますので、チェックしてみてください!!

メール設定2で自動返信を設定する手順

先ほど行ったメール設定画面を開きます。そしてメッセージ本文の下に「メール(2)」という項目がああるので、そちらにチェックを入れます。

メール(2)の設定が開くので、ここに自動返信するメールの内容を設定していきます。

設定項目の内容

① 送信先:
お問い合わせをしてくださった方に返信するメールアドレスを入力。
デフォルトでは、[your-email]と入っているので、そのままでOKです。

② 送信元:
送信元というのは、メールを送っている配信者のことです。つまり、あなたの名前やメールアドレスになります。
ここはデフォルトのままで大丈夫ですが、送信する人の名前が[_site_title]だと、ブログ名になるので、[_site_title]だけは変更しておくと良いと思います。

③ 題名:
デフォルトでは[_site_title]になっていて、ブログのタイトルが自動的に入るようになっています。ここは”メールの件名”になるところです。
件名には、相手の方がメールを受け取った時に分かりやすい名前に変更しておくと良いです。

④ 追加ヘッダー:追加ヘッダーというのはメールの返信先を追加してくれるところです。
デフォルトの[_site_admin_email]のままで大丈夫です。
[_site_admin_email]だと、ワードプレスに設定されているメールアドレスが設定されます。

⑤ メッセージ本文:
お問い合せしてくれた方へのメッセージを入力してください。

以上が、自動返信を作成する方法になります。

固定ページにお問合せフォームを設置する方法

では、固定ページが必要になりますので、固定ページを作成していきます。

固定ページの作成方法ですが、クラシックエディターとブロックエディターの両方のやり方を解説しますので、ご自身が使っているエディターの方のやり方を参考にしてください。

クラシックエディターでお問い合わせページ作成する方法

ワードプレスのダッシュボードにある左側のメニューから、「固定ページ」にマウスを合わせて「新規追加」をクリックします。

固定ページの編集画面が開きます。

※必ず【ビジュアルモード】になっていることを確認してください。

設定したときに、コピーしておいたコードがあると思いますので、貼り付けをします。

これでお問合せフォームが設置できましたので、プレビューを開いて確認してみましょう。

このように表示確認ができたらあとは、「公開」をさせるだけでOKです。

どうですか?すごく簡単に設置できましたね。

以上でお問い合わせページを作ることができました。

Gutenberg(ブロックエディター)でお問い合わせページを作成する方法

ワードプレスのダッシュボードにある左側のメニューから、「固定ページ」にマウスを合わせて「新規追加」をクリックします。

固定ページの編集画面が開きます。

お問い合わせフォームのタイトルを入力します。(例えば、お問い合わせ・コンタクト・メッセージなど・・・)

任意の文章を入力します。絶対ではないので、入れなくても良いですが、何かひとことあった方が良いかなぁと思います。
(例えば、お気軽にお問い合わせください。など・・・)

コンタクトフォームのブロックを追加するので、「+」をクリックします。

「すべてを表示」をクリックします。

すべてのブロックが表示されますので、『Contact Form7』のブロックを見つけてクリックしてください。

コンタクトフォームが追加されますので、前項で作ったお問い合わせフォームを選択してください。

選択できたら、これで設置が完了です。

一度プレビューでちゃんと設置ができているかを確認してみましょう。

このように確認できましたら、あとは「公開」をしたら完了です!!

途中にも説明していますが、Contact Form 7 は送信されたメッセージをどこにも保存していません。

メールアドレスの間違いがないかどうか確認するためにも、設置されたら、一度ご自分でお問合せフォームからメッセージを送信してみてください。

メールにメッセージが届くとちょっと興奮しますよ。

お問い合わせページはグローバルメニューやフッターなどに設置

お問合せページが出来上がったら、グローバルメニューやフッターに設置するのが一般的です。

ちなみに、わたしは、ヘッダーメニュー(グローバルナビ)に設置しています。

メニューに設置する方法に関しては、別記事で解説しています。

【Contact Form 7】お問い合わせフォームを作成して固定ページで表示させる方法のまとめ

コンタクトフォームは、サイトに訪問してくれた読者さんと繋がるためにも設置することをおすすめします。

特に自社サービスを持っているとかなると、問い合わせできないのは、かなり損をします。

ですのでコンタクトフォームは、ワードプレスを立ち上げた段階で、設置されるのをオススメしますよ(*^^*)♪

Contact Form7でお問い合わせページを作ったら、スパム対策のreCAPTCHAを設定するのを忘れないようにしてくださいね!!


ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中!!

メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


コメントを残す

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

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
●福岡副業カレッジブログ講師
SEO検定2級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>