WordPressの始め方を分かりやすく解説!こちらをクリック

WordPressにお問い合わせフォームを作る方法!プラグイン「Contact Form 7」で初心者も簡単

メールによるお問い合わせ
  • URLをコピーしました!

WordPressに「お問い合わせフォーム」を設置する方法を紹介します。

WordPressではプラグイン「Contact Form 7」を使って、初心者でもめっちゃ簡単にお問い合わせフォームを作ることができます。

お問い合わせフォームがあれば、ユーザー(読者)からのお問い合わせ、お仕事の依頼、商品のお申し込みなどを受け取ることができます。

運営者(あなた)とユーザーがコミュニケーションを取れる機能であるとともに、直接収益にもつながる重要な機能です。

この記事では下記について説明しますので、ぜひ参考にしてみてください。

  • WorPressにお問い合わせフォームを作る方法
  • お問い合わせフォームを作るためにおすすめのプラグイン
  • お問い合わせフォームの応用設定とカスタマイズ方法
目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

1976年生まれ。東京都出身。合同会社田舎暮らし代表。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全(マクサン本)』(大和書房)などがある。GMOのオウンドメディア「ワプ活」で全記事の監修も務める。本名は吉岡 智将

いや、俺なんてそんな、どこにでもいるただのマクリンですよ。 副業でガジェットサイト「マクリン」の運営を2017年5月に開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめ「マクサン本」の共著者。

※当ページの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ページのリンクには広告が含まれる場合があります。

WordPressにお問い合わせフォームを設置しよう!

さまざまなお問い合わせ方法

ちなみに、そもそも「お問い合わせフォーム」とはなんでしょうか?

WordPressに「お問い合わせフォーム」を設置すると、どんないいことがあるのでしょうか?

お問い合わせフォームとは?

「お問い合わせフォーム」とはユーザー(読者)からブログやホームページなどのWebサイトの運営者に対して連絡を送るための機能です。

お問い合わせフォームから送ることのできる連絡には下記のようなものがあります。

  • 情報の内容に関する質問・感想
  • 商品やサービスに関するお問い合わせ・注文
  • お仕事の依頼・商談
  • 雑誌、テレビなどの出演依頼 …などなど

つまり、お問い合わせフォームを設置することでユーザー(読者)とコミュニケーションを図ることができたり、

お仕事の依頼や商品のお問い合わせなどを受け取ることで、直接的な収益につなげることも可能なのですね。

WordPressお問い合わせフォーム016_お問い合わせページのプレビュー
WordPressで作ったお問い合わせフォームの例

なぜWordPressにお問い合わせフォームを作る必要があるの?

ユーザーが運営者とコンタクトを取る手段としては、お問い合わせフォーム以外にも下記ような連絡手段があります。

  • メールによるお問い合わせ
  • 電話によるお問い合わせ
  • SNSのDMなどによるお問い合わせ

しかし、メールはいちいち文面を考えるのが面倒ですし、いきなりメールを送つけるのはちょっと勇気が要りますよね。

電話だとなおさら勇気がいりますし、そもそも受け取る側も対応ができない時間帯もあります。

SNSだと気軽ではありますが、いちいちSNSのアカウントにアクセスする手間が発生したり、ユーザー側も同じSNSのアカウントを持っていなくてはなりません。

しかしお問い合わせフォームを作れば、これらの問題は解決します。

お問い合わせフォームには以下のようなメリットがあるのです。

  • 必要な情報だけを入力すればいい
  • チェックボックスやドロップダウンなど、項目を追加できる
  • いつでもどこでも問い合わせができる
  • ただの入力フォームなので気兼ねなく問い合わせできる

つまり問い合わせる側(ユーザー)にとって気軽で便利な方法なので、

問い合わせ数も増えやすいということですね

WordPressにお問い合わせフォームを設置する方法

パソコンからメールによるお問い合わせ

WordPressにお問い合わせフォームを設置する代表的な方法には、以下の3点があります。

  • プラグインを使う
  • Googleフォームを使う
  • 自作する

「プラグイン」を使ってお問い合わせフォームを作る

結論として、もっともおすすめな方法はプラグイン」を使ってお問い合わせフォームを設置する方法です。

プラグインはそもそもWordPressのために作られているので、導入も容易ですしデザインやレイアウトもWordPressで作られたサイトにマッチします。

よほどの理由がない限り、プラグインを使うことをおすすめ致します。

お問い合わせフォームを設置できるプラグインはたくさんありますが、以下の2つが代表的です。

このうち圧倒的にメジャーなのが「Contact Form7」で、有効ダウンロード数は500万以上もあります。

星4.1と比較的高評価で、アップデートも定期的におこなわれており安心して利用することができます。

ちなみにContact Form 7の開発者は日本人のTakayuki Miyoshi氏です。

確認画面がありませんが(これは海外では普通らしい)、後付けでいろいろ柔軟に機能をつけ足したい…というのであればContact Form7で良いでしょう。

MW WP Form」は有効ダウンロード数10万ほどなので、「Contact Form7」ほどの人気ではありませんが、これはこれで良いプラグインです。

確認画面が作成できたり、データベース機能などもデフォルトで存在するので、使い方によってはMW WP Formのほうが良い場合もあります。

ただし2021年11月執筆時点で12ヶ月間も更新されていないため、ちょっと不安なんですよね。

「Googleフォーム」を使ってお問い合わせフォームを作る

プラグイン以外では、「Googleフォーム(Google Form)」を利用してお問い合わせフォームを作るという方法もあります。

Googleフォームは気軽にさまざまな入力フォームを作ることができる無料ツールです。

簡単なのに機能が豊富なので、目的によってはプラグインよりもGoogleフォームのほうが適している場合もありますが、

単純に「氏名」「連絡先」「件名(タイトル)」「本文」…… くらいの入力内容であれば、わざわざプラグインを避けてGoogleフォームを使うメリットはないのかな~ というのが正直なところです。

「自作」でお問い合わせフォームを作る

もっとも自由度が高いのが、自分でPHPなどを使って自作してしまう方法ですが…

これは当然プログラミングの知識が必要なので初心者にはなかなか難しいと思います。

自作できる知識をもっている人は自分で作ってしまうのがベストですね。

「Contact Form7」でお問い合わせフォームを作る手順

WordPressお問い合わせフォーム001_Contact Form 7の公式画像

ここでは実際にプラグインContact Form 7」を利用してWordPressにお問い合わせフォームを作る方法を解説します。

ちなみに、Contact Form 7でフォーム内に設定できる入力項目は以下のとおりです。

(太字部分はデフォルトで設定されている入力項目)

  • 氏名
  • 題名
  • メールアドレス
  • 本文
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承認確認
  • クイズ
  • ファイル
  • 送信ボタン

初期設定の状態では「氏名」「題名」「メールアドレス」「メッセージ本文」「送信ボタン」が既に設定されています。

もちろん必要に応じて表示する入力項目を変更することもできます。

また、送信完了画面を表示したり、自動返信メールを設定もすることも可能です。※後述

Contact Form7を使ってお問い合わせフォームを作る方法は以下の手順です。

  1. Contact Form 7をインストール
  2. お問い合わせフォームを作る
  3. お問い合わせフォームの入力項目を変更する
  4. 固定ページ機能でお問い合わせページを作る
  5. お問い合わせページへのリンクを設置する
  6. お問い合わせフォームからテスト送信する

Contact Form 7をインストール

WordPressお問い合わせフォーム002_プラグインの新規追加画面を開く

WordPressの管理画面左メニューから「プラグイン」 →「 新規追加」の順に進みます。

WordPressお問い合わせフォーム003_Contact Form 7を検索する

画面右上にある検索フォームにプラグイン名「Contact Form 7」を入力します。

WordPressお問い合わせフォーム004_Contact Form 7をインストールし有効化する

検索結果に「Contact Form 7」が表示されるので、「今すぐインストール」ボタンをクリックします。

クリック後、ボタンが「有効化」に変わるので、これもクリックします。

WordPressお問い合わせフォーム005_Contact Form 7の設定画面を開く

プラグイン一覧が表示されますので、その中からContact Form 7を探し、「設定」のテキストリンクをクリックします。

(※プラグインイン一覧が表示されない場合は、管理画面左メニューの「プラグイン」から一覧を開いて「設定」をクリックするか、もし管理画面左メニューに「お問い合わせ」という項目が出現していればそこから入ってもOKです。)

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

WordPressお問い合わせフォーム006_Contact Form 7のコンタクトフォーム1の編集画面を開く

フォームの一覧には初めから「コンタクトフォーム1」というフォームが用意されています。

「コンタクトフォーム1」の部分にマウスポインターを乗せると「編集」「複製」のテキストリンクが表示されます。

左側の「編集」をクリックしましょう。

WordPressお問い合わせフォーム007_Contact Form 7の編集画面

するとフォームの編集画面が表示されています。

すでに「氏名」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」が設定されています。

通常の入力フォームならこれで充分です。

WordPressお問い合わせフォーム008_お問い合わせフォームを保存する

この項目で問題なければ画面左下の「保存」ボタンをクリックします。

後は、この入力フォームを固定ページに表示させる作業になりますが、こちらは後述しています。

もし入力項目を変更・追加したい場合は引き続き以下を参考にしてください。

お問い合わせフォームの入力項目を変更する

WordPressお問い合わせフォーム009_Contact Form 7の入力項目一覧

画面上のタブから「フォーム」を選びます。

追加したい項目がある場合は、赤枠で囲った項目一覧から必要なものを選んでください。

追加できる項目は以下のとおりです。

項目名 説明
テキスト短い文章(1行)を入力できる。郵便番号・住所の入力欄などに使える。
URLURL専用の入力欄。誤った文字列が入力されると自動的に入力のやり直しを求められる。
電話番号電話番号専用の入力欄。誤った文字列が入力されると自動的に入力のやり直しを求められる。
数値数字専用の入力欄。範囲を指定し、その範囲から数字を選択してもらうことができる。購入数の選択などに使える。
日付生年月日など日付の入力欄に使える。範囲指定を行うことが可能。
テキストエリア長い文章を入力することができる。
ドロップダウンメニューあらかじめ選択肢を用意しておくことで、ドロップダウンから選択できるようになる。複数選択も可能。
チェックボックスあらかじめ選択肢を用意しておくことで、チェックボックスから選択できるようになる。複数選択か単一選択かを選べる。
ラジオボタンあらかじめ選択肢を用意しておくことで、ラジオボタンから選択できるようになる。単一選択のみ。
承認確設定s利用規約や個人情報取り扱い規約などに対する承認用チェックボタンを追加できる。
クイズクイズ(問いに対する答えの入力欄)を追加dけいる。
ファイルファイルをアップロードできるようになる。ファイルサイズや形式などを指定できる。

各項目のボタンをクリックすると、それぞれの設定ウィンドウが開きます。

WordPressお問い合わせフォーム010_Contact Form 7でドロップダウンの項目を追加する

たとえは上記は「ドロップダウン」の項目を追加した際の設定ウィンドウです。

必須項目にするかどうか? ドロップダウンで表示される選択肢の入力欄、複数選択にするかどうかのチェックボックスなどが並んでいます。

(ここに表示される内容は各項目によって異なります。)

最後に「タグを挿入」ボタンをクリックすると、フォーム内に今回作った項目が新たに追加されます。

WordPressお問い合わせフォーム008_お問い合わせフォームを保存する

問題なければ画面左下の「保存」ボタンをクリックします。

これでお問い合わせフォームは作成できたので、次は「固定ページ」を使ってお問い合わせページを作る作業に移ります。

固定ページ機能でお問い合わせページを作る

WordPressお問い合わせフォーム011_Contact Form 7のショートコードをコピー

コンタクトフォームの編集画面に表示されているショートコード(赤枠部分)をコピーします。

WordPressお問い合わせフォーム012_固定ページの新規追加画面を開く

WordPressの左サイドメニューから「固定ページ」→「新規追加」の順に進みます。

WordPressお問い合わせフォーム013_固定ページを新規追加

画面左上の「新規追加」ボタンをクリックします。

WordPressお問い合わせフォーム014_固定ページにお問い合わせフォームのコードをペースト

ページタイトルの部分に、問い合わせページのタイトル(名前)を入力します。※上の矢印

ここでは「お問い合わせ」という名前にしました。

続いて本文の入力欄に、先ほどコピーしたお問い合わせフォームのショートコードをペーストします。※下の矢印

WordPressお問い合わせフォーム015_固定ページにお問い合わせフォームのコードをペーストした後

お問い合わせフォームが挿入されました。

プレビューで実際の見た目を確認してみましょう。

WordPressお問い合わせフォーム016_お問い合わせページのプレビュー

実際にはこんな形で表示されます。

シンプルでわかりやすいお問い合わせページですね。

これでお問い合わせフォーム、およびお問い合わせページの作成が完了しました!

しかし、これだけだとページが単体で存在している(どこからもリンクでつながっていない)状態ですので、だれからもお問い合わせページを見つけてもらえません。

この後はWebサイトの「グローバルメニュー」などに、このお問い合わせページのリンクを設置する必要があります。

お問い合わせページへのリンクを設置する

固定ページへのリンクをグローバルメニュー(ヘッダーメニュー、グローバルナビゲーション)に設置する方法はこちらにくわしく解説しています。

以下に簡単に手順を説明しておきましょう。

WordPressお問い合わせフォーム017_お問い合わせページをグローバルメニューに追加

WordPress管理画面の❶「外観」から❷「メニュー」へと進みます。

❸「メニュー項目を追加」の「固定ページ」の中から、先ほど作成したお問い合わせページにチェックを入れ、❹「メニューに追加」ボタンをクリックします。

すると❺メニュー内にお問い合わせが追加されます。

❻メニューを表示したい位置にチェックを入れ、❼「メニューを保存」ボタンをクリックします。

WordPressお問い合わせフォーム018_お問い合わせページのリンクがグローバルメニューに追加された

上記の画像のように、グローバルメニューにお問い合わせページへのリンクを挿入することができました。

ちなみに、❻の設定でメニューの表示位置を変えれば、フッターメニューにお問い合わせページへのリンクを追加することもできます。

また、サイドバー(サイドカラム)に問い合わせページへのリンクを入れることもできます。

単純にプロフィ―ル欄などにリンクを設置する形でもいいですが、下記の方法であればサイドバーに固定ページのリンクを直接設置することができます。

WordPressお問い合わせフォーム019_お問い合わせページのリンクをサイドバーに追加

WordPress管理画面の左サイドメニューから❶「外観」→❷「ウィジェット」へと進みます。

❸画面右側にあるウィジェット一覧のなかから「固定ページ」を探し、サイドバーの任意の位置にドラッグアンドドロップで移動させます。

WordPressお問い合わせフォーム020_お問い合わせページのリンクをサイドバーに追加するための設定

ウィジェットに表示するタイトルを入力します。

このままだと公開している固定ページのリンクがすべて表示されてしまうので、除外したいページがあれば「除外ページ」の項目にページIDを入力します。

最後に「保存」ボタンをクリックします。

WordPressお問い合わせフォーム021_お問い合わせページのリンクがサイドバーに追加された

このようにお問い合わせページへのリンクをサイドバーに表示させることができました。

お問い合わせフォームからテスト送信する

ここまでできたらお問い合わせフォームから実際にテスト送信をおこなってみましょう。

WordPressお問い合わせフォーム022_お問い合わせフォームをテスト送信

お問い合わせフォームの各項目に必要事項を入力し、送信してください。

送信後、問い合わせメールがちゃんと届いているかを確認してください。

WordPressお問い合わせフォーム023_お問い合わせ送信されたメール例

こんな感じでメールが送られてきます。

届いていない場合は迷惑メールフォルダも確認してみてください。

(実際に僕も迷惑メールフォルダに振り分けられていました……)

お問い合わせフォームの応用設定

ライブチャット、チャット、SNS

基本的なお問い合わせフォームの作り方はここまでに説明したとおりです。

ここからはプラグイン「Contact Form 7」を使ったお問い合わせフォームの応用設定・カスタマイズ方法について解説します。

お問い合わせに対して自動返信メールを送る

まずはお問い合わせをしてくれたユーザーに向けて、自動返信メールを返すように設定する方法です。

「回答までに2~3日かかるので少々お待ちください!」的な返事を自動的に送れるようにできるので、ぜひご活用ください。

WordPressお問い合わせフォーム024_Contact Form 7のメール設定タブ

WordPress左サイドメニューの「お問い合わせ」→「コンタクトフォーム」に進み、設定したいコンタクトフォームの編集画面を開きます。

「メール」のタブを選択します。

WordPressお問い合わせフォーム025_Contact Form 7のメール設定でメール(2)にチェックを入れる

下にスクロールすると、「メール(2)」という項目が出てくるので、「メール(2)を使用」にチェックを入れます。

すると自動返信メールの設定項目が表示されます。

WordPressお問い合わせフォーム026_Contact Form 7の自動送信メールの設定

❶「送信先」には既に[your-email]というコードが入力されています。

ここはユーザー(問い合わせする人)のメールアドレスが自動挿入される部分なので、このままにします。

❷「送信元」にはあなたのサイト名(とあなたのメールアドレス)が入っています。ここもこのままにします。

❸「題名」は、この自動送信メールの件名です。

[_site_title]以降の部分を好きな文言(例「お問い合わせありがとうございます」など)に変更してください。

❹「追加ヘッダー」には、Cc:やBcc:で送信先のメールアドレスを追加することができます。

同時に他の運営スタッフにもメールを送りたい、などの場合に使用します。

❺「メッセージ本文」には、自動返信メールの本文に表示させたい文章を入力してください。

(例「お問い合わせいただき誠にありがとうございます。24時間以内に返信させて頂きますので、少々お待ちいただければと思います。」など)

❻最後に「保存」ボタンをクリックします。

これでお問い合わせに対して自動返信メールを送ることができるようになりました。

さまざまな表示メッセージを編集する

送信完了時やエラー発生時などに、さまざまなメッセージを表示させることができます。

デフォルトでもメッセージが表示されますが、その文言を変更する際に参考にしてください。

WordPressお問い合わせフォーム027_Contact Form 7のメッセージタブを選択

WordPress左サイドメニューの「お問い合わせ」→「コンタクトフォーム」に進み、設定したいコンタクトフォームの編集画面を開きます。

「メッセージ」のタブを選択します。

WordPressお問い合わせフォーム028_Contact Form 7のメッセージ編集画面

さまざまな状況の際に表示するメッセージが設定されています。

変更したいものがあれば編集し、最後に画面一番下にある「保存」ボタンをクリックしてください。

サンクスページを表示させる

サンクスページとは、購入完了画面やお問い合わせ完了画面のように、ユーザーがなんらかのアクションを起こした際に感謝の意を伝えるためのページです。

サンクスページを表示するには、まず固定ページでサンクスページ自体を作成しておく必要があります。

固定ページの作り方は下記の記事でくわしく解説しています。

サンクスページを作成したら、URLをコピーして控えておいてください。

WordPressお問い合わせフォーム029_Contact Form 7にサンクスページを表示させるための設定

WordPress左サイドメニューの「お問い合わせ」→「コンタクトフォーム」に進み、設定したいコンタクトフォームの編集画面を開きます。

「その他の設定」のタブを選択します。

赤枠のとおり、入力欄にサンクスページを表示させるためのコードを記載してください。

コードは下記からコピペし、「サンクスページURL」部分に先ほど控えておいたURLを記述してください。

1on_sent_ok: “window.location.href =’サンクスページURL’;”

次に画面左下の「保存」ボタンをクリックします。

WordPressお問い合わせフォーム030_Contact Form 7の設定を保存

最後に、画面右のステータス部分の「保存」ボタンをクリックして完了です。

WordPressでお問い合わせフォームを作る方法まとめ

WordPressにお問い合わせフォームを設置するには、以下の3つの方法があります。

  • プラグインを使う方法
  • Googleフォームを使う方法
  • 自作する方法

この中でももっとも簡単で効率が良いのは「プラグインを使う方法」です。

お問い合わせフォームを設置できるプラグインはたくさんありますが、以下の2つが代表的なプラグインです。

おすすめは「Contact Form7」で、利用者もとても多く評価の高いプラグインです。

Contact Form7を使ってお問い合わせフォームを作るには、以下の手順で進めます。

  1. Contact Form 7をインストール
  2. お問い合わせフォームを作る
  3. お問い合わせフォームの入力項目を変更する
  4. 固定ページ機能でお問い合わせページを作る
  5. お問い合わせページへのリンクを設置する
  6. お問い合わせフォームからテスト送信する

Contact Form 7では下記のようなお問い合わせフォームの応用設定・カスタマイズを行うことができます。

メールによるお問い合わせ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次