WordPressにお問い合わせフォームを設置するには?おすすめプラグインと設置方法も解説

WordPressにお問い合わせフォームを設置するには?おすすめプラグインと設置方法も解説

SEO対策のこと、どの会社に相談していいか分からない。業界事情をまずは把握したい。具体的な見積もりがほしい。お気軽にご連絡ください。連絡は無料相談・お問い合わせよりどうぞ。Web業界10年以上のキャリアを持つメンバーが対応いたします。

Wordperessとは?

WordPressとはCMSと呼ばれるシステムのひとつです。CMSは略称であり、正しくはContents Management System(コンテンツ・マネジメント・システム)といいます。

プログラミングなどの専門知識を持たない人でも、簡単にWebサイトを構築・管理・更新できるソフトのことです。

CMSには3種類あり、それぞれ問い合わせフォームの設置方法が異なります。

CMSの種類 特徴 問い合わせフォームの設置方法
オープンソース型
  • プログラムのソースコードが無償で公開(オープン)されている
  • カスタマイズの自由度が高い反面、機能を拡張する際は、原則自力で行う
  • 設置されていない場合が多い
  • 必要な時は自分で導入する
パッケージ型
  • ソフトウェアベンダー(システムの開発企業)より有償ライセンスを購入して利用する
  • 基本機能がパッケージに含まれているため、自力でカスタマイズする必要性が低い
  • あらかじめ、自動で組み込まれている場合が多い
クラウド型
  • サーバー・ドメイン・ソフトウェアを使用せず、ネットがあれば導入可能
  • 一般的には無料ではなく、月額を支払う
  • 必要な機能を選んで使用できる
  • 必要だと判断した際に機能を選択して導入する

WordPressは上記の表においてオープンソース型と呼ばれるCMSです。そのため問い合わせフォームが必要な場合は、別途自分で導入することになります。

パッケージ型やクラウド型と呼ばれるCMSであれば、問い合わせフォーム導入の手間は省ける場合が多いです。反面、利用料がかかるなどのデメリットが発生します。

問い合わせフォームはなぜ必要なのか

サイトを制作した際、問い合わせフォームを設置しておくことは重要です。ユーザーが質問やビジネスの話を行いたいときはもちろん、何かトラブルがあった際の緊急連絡先としても問い合わせフォームは必要です。また、問い合わせフォームが設置されているのを見て、ユーザーは「何かあれば連絡を頂けたら対応します」という管理者の態度を感じ取り、安心してサイトに訪れるようになります。

特にサイトをビジネス目的で制作する場合、問い合わせフォームは顧客の窓口になります。導入の手間がかかったとしても後回しにせず、サイトを公開する前に設置しておいた方が良いでしょう。

WordPressに問い合わせフォームを導入する方法について

WordPressに問い合わせフォームを導入する方法は2つあります。それぞれにメリットとデメリットがあるため、自分に適した方法を選ぶことが大切です。

導入方法 メリット デメリット
プラグイン
(Contact Form 7など)
  • 多くは無料で使用できる
  • 導入や設置が簡単
  • 状況に応じて必要な機能を付けられる
  • プラグインを使用するため、サイトの表示速度が遅くなったり、ハッカーに狙われる隙を増やすことに繋がる
  • プラグインそのものは無料でも、有料プランに入らなければいけない場合がある
googleフォーム
  • 個人の場合は無料で使用できる
  • プラグインを使用しない
  • 複数の管理者がフォームを編集できる
  • Googleのアカウントが別途で必要
  • Googleのビジネスプランに入っている場合は有料になる
  • ファイルのアップロードができない

特徴と導入フロー:Contact Form 7

WordPressにプラグインで問い合わせフォームを設置する場合、Contact Form 7(コンタクトフォーム7)がおすすめです。導入が比較的簡単であり、初心者でも順を追って設定していけば問い合わせフォームを設置できます。開発者が日本人であり、情報量が多い点も魅力です。ただし、プラグインそのものは無料ですが、インストールにはWordpressの有料プランに入っていなければならないため、注意してください。

以下に導入フローを記載します。

  1. インストールと有効化を行う
  2. フォームの設定を行う
  3. メールの設定を行う
  4. メッセージの設定を行う
  5. その他の設定を行う
  6. 問い合わせフォームをサイトのページに反映させる
  7. カスタマイズする

なおWindowsやMac、Wordpressのバージョンなどの理由により、人によって管理画面の状態は違います。そのため解説画像と細部が異なる場合がありますが、導入には問題ありません。

インストールと有効化

まずはWordpressの管理画面より、Contact Form 7のインストールが必要です。管理画面の左にある黒い背景の部分に、「プラグイン」というリンクがあるのでクリックします。

クリックするとプラグインの画面に移るため、次に検索フォームの部分に「Contact Form 7」と打ち込みます。

打ち込んで検索すると、左下にContact Form 7が検索されて出てくるため、「今すぐインストール」をクリックしてください。

インストールが終了すると、「今すぐインストール」とあった部分が「有効化」に変わるため、クリックします。これでインストールと有効化は終了です。

管理画面へ移行する

インストールと有効化が終わったら、管理メニューの左側の黒い部分に、「問い合わせ」のリンクが新たにできていることを確認してください。問い合わせフォームの設定はここから行います。

「問い合わせ」をクリックすると、問い合わせ画面に移ります。移ったら、画面上部の「新規追加」をクリックしてください。

クリックすると編集画面に移ります。問い合わせフォーム設置後も、編集したい場合はこの画面から行ってください。

フォームの設定を行う

問い合わせフォームの設定を行います。まず表示されているのは「フォーム」のタブです。これは、ユーザー側から見た問い合わせフォームの項目を表しています。

「名前」という部分はユーザーが入力する名前のことであり、「メールアドレス」も同様です。

<lavel>の後に続く「名前(必須)」などの文字列はこの画面で任意に変更できます。例えば海外の顧客向けに、「名前」ではなく「NAME」に変更したりなど、必要に合わせて修正してください。

手を加えず初期設定のままにした場合、問い合わせフォームはユーザー側から見て以下のようなものになります。

最低限の項目は自動で設定されているため、このままで構わないという人はフォームタブで手を加える必要はありません。

メールの設定を行う

メールの設定を行います。実際にサイトから問い合わせがあった場合、Wordpressから管理者に通知のメールが送られます。Contact Form 7におけるメールの設定とは、その通知メールの設定です。ユーザーからは見えず、管理者のためのものとなります。

「メール」のタブに遷移すると画面が移ります。

送信先とは、問い合わせメールが来た際に、通知のメールを受け取るアドレスのことです。任意のアドレスを指示できるほか、「,」で区切ることで、複数のアドレスを設定可能です。初期設定では、Wordpressインストール時に設定したアドレスが使用されます。

送信元とは、具体的に誰が送信してきたのかを表示する項目です。初期設定では、Wordpressが送信元として表示されます。必要に応じて変更しても構いませんが、この欄で設定したドメインがサイトドメインと一致していない場合、偽装メールと判断されエラーが出ることがあります。エラーが出ても動く場合もありますが、動作は保証されないため、ドメインを一致させましょう。

題名とは、Wordpressから送信される通知メールのタイトルのことです。問い合わせしてきたユーザーが入力した題名ではないため、注意してください。初期設定ではサイトの名前と、ユーザー側が入力した題名が続けて表示されます。導入後でも、必要に応じて適宜変更できます。

追加ヘッダーは、問い合わせメールに返信する際に使用される宛先です。初期設定では自動的に、問い合わせしてきたユーザーのメールアドレスが宛先になっています。また、CCやBCCの追加設定が可能です。「CC:〇〇(メールアドレス)」という風に入力し、下の行に追記すれば設定できるため、状況に応じて変更してください。「,」で区切ると複数のアドレスを設定できます。

本文は通知メールの本文です。手を加えなければ、問い合わせてきたユーザーの名前、メールアドレス、題名、本文が続けて表示されます。初期設定でも最低限のことは記載されていますが、任意で変更しても構いません。

メッセージの設定を行う

メッセージの設定を行います。メッセージとは、ユーザーが問い合わせフォームを使用した後に表示されるメッセージのことです。

メッセージタブをクリックすると、画面が移ります。

初期設定であっても自動的に適切な文言は入っていますが、変更も可能です。修正したいときはこの画面から編集してください。

その他の設定を行う

その他の設定を行います。メッセージ送信後のサンクスページ表示など、適宜追加したい機能がある場合はその他タブにて設定してください。

初期設定では空白になっており、特にカスタマイズの必要がない場合は、そのままにしておいて構いません。

フォームを保存し、ページに反映させる

問い合わせフォームの設定が終わったら、右の方にある「保存する」をクリックしてください。すると、問い合わせフォームの設定が保存されます。

保存が終わると、問い合わせフォームのショートコードが表示されます。

コードをコピーして、表示させたい部分に貼り付ければ完了です。貼り付け後はサイトを表示させて、イメージした通りに表示されているか確認しましょう。

カスタマイズする

Contact Form 7は必要に応じてある程度カスタマイズすることもできます。もっとも簡単な方法は、フォームのタブを開くと上部に表示されているタグを使用することです。

それぞれのタグをクリックすると、項目ごとの設定画面と、項目を挿入するためのショートタグが表示されます。

それぞれのタグと追加される機能は以下の通りです。

テキスト
  • 任意の入力欄を一行分新規で作成できる
日付の設定
  • 年/月/日を入力する欄を追加できる
  • 生年月日などを知りたい際に有効
テキストエリア
  • 任意の入力欄を新規で作成できる
  • テキストタグと異なり、入力欄を数行分に広げることが可能
  • 問い合わせの詳細など、長文を入力してもらう際に有効
ドロップダウンメニュー
  • ドロップダウンメニューを作成できる
  • 性別や職業など、決まった選択肢の中からユーザーに選んでもらう際に有効
チェックボックス
  • チェックボックスメニューを作成できる
  • アンケートなどを取りたい際に有効
ラジオボタン
  • ラジオボタンメニューを作成できる
  • アンケートなどを取りたい際に有効
承諾確認
  • 承諾確認を取るチェック欄を作成できる
  • ユーザーに同意して欲しい自社の規約や、個人情報の取り扱いについて承諾を得る際に有効
ファイルアップロード
  • ファイルのアップロード欄を作成できる
  • ユーザーに写真や資料などを送付してもらう際に有効

また、それぞれの設定画面は微妙に異なりますが、複数の項目で共通している部分もあります。主に共通している項目は以下の通りです。

項目タイプ
  • 必須項目にするかどうかを設定できる
  • チェックを入れると必須項目として扱われる
デフォルト値
  • あらかじめ項目に入力値を入れておくことができる
  • 入力例などを表示させたい時に有効
  • 入力例などに使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェックを入れておく
Akismet
  • チェックすることでスパムの可能性を軽減させる
  • WordPressに自動で入っているスパム対策プラグインであり、あらかじめ有効化しておかなければならない。
ID属性/クラス属性
  • CSSと連動させる場合に必要
  • プログラミングなどの知識がない場合は、触れない方が良い
オプション
  • ドロップダウンやチェックボックスなど、管理側が任意の選択肢を設定する際に使用
  • 1行あたりひとつの選択肢を入力する
  • 改行すると別の選択肢として設定される
  • 「複数選択を可能にする」にチェックを入れると、ユーザー側が複数選択可能になる
  • 「ラベルを前に、チェックボックスを後に配置する」にチェックを入れると、チェックボックスが選択肢の右側に移動する
  • 「個々の項目をlabel要素で囲む」にチェックを入れると、コーディングを行う際に便利になる
  • 「チェックボックスを排他化する」にチェックを入れると、複数項目へのチェックができなくなる

上記の他にも、問い合わせフォームを使用したユーザーに自動返信メールを送付したり、サンクスページを表示したりということもできます。自分に合わせた追加機能を組み込んでください。

特徴と導入フロー:Google Formを利用する場合

WordPressに問い合わせフォームを設置する場合、プラグイン以外にGoogleフォームを使用するという方法もあります。Googleアカウントの取得は必要であるものの、無料で使用でき、導入手順も複雑ではありません。

また、プラグインを導入するとサイトの処理速度が遅くなってしまう場合がありますが、Googleフォームの場合はプラグインではないため動作スピードに影響しない場合がほとんどです。また、設置したアンケートなどはフォームの機能で自動集計してもらうことが可能です。

以下に導入フローを記載します。

  1. Googleにログインし、Googleフォームにアクセスする
  2. フォームのタイトル・名前・メールアドレス・タイトル・本文の設定を行う
  3. 必要に応じてアンケートを設置する
  4. WordPressに組み込む

GoogleにログインしGoogleフォームにアクセスする

Googleフォームの設置フローを説明します。まず、Googleにログインした状態でブラウザを開いてください。

ドライブボタンをクリックすると簡易メニューが表示されます。スクロールして、Googleフォームのアイコンをクリックしてください。すると画面が移り、Googleフォームのトップページが表示されます。

「新しいフォームを作成」をクリックするとテンプレートを使用せず自分で新規のフォームが作成可能です。自由度が高い反面、質問の設定などをすべて自分で行わなければならないため、多少の手間はかかります。作成したフォームはドライブに保存されるため、一度作成すれば何度でも使用可能です。

「テンプレートギャラリー」をクリックすると、あらかじめGoogleが作成したテンプレートが一覧になって表示され、任意のものを選んで使用できます。テンプレートは目的別にさまざまな種類があるため、自分の希望と合致しているものを選んでください。また、選んだフォームをさらにカスタマイズすることも可能です。

本記事では例として、①の新規作成を選んだと仮定し、設置フローを説明していきます。

フォームのタイトル・名前・メールアドレス・本文を設定する

Googleフォーム画面左上部の空白をクリックすると、「無題のフォーム」という問い合わせフォームの画面に移ります。

このフォームをカスタマイズして、

  • 名前
  • メールアドレス
  • 題名
  • 本文

をユーザーが入力できる、一般的な問い合わせフォームに設定していきましょう。

まず、フォームのタイトルを変更します。初期値では「無題のフォーム」となっています。

任意のタイトルで構いません。ユーザーにとって、何に対するフォームであるのかわかりやすいタイトルにしてください。

続いての画面で「無題の質問」の部分をクリックすると文字列を変更できるため、修正してください。

「ラジオボタン」の部分をクリックすると、入力方法が一覧となって表示されます。ユーザーが任意の文字列を入力できるようにするため、「記述式」を選択します。

「必須」項目の入力を必須にするかどうかを選べます。初期値では必須になっていないため、適宜必須項目にするかどうか選択してください。

この段階ではまだ「名前」しか入力できないフォームとなっているため、上記画像の右にある+マークをクリックしてください。すると項目が一つ下に追加されます。

あとは同じ要領で、項目を追加しつつ「メールアドレス」「題名」「本文」を設定していきます。

なお、「本文」の項目は「記述式」ではなく「段落」を選択してください。「記述式」は短文での回答が前提であるため、長文が想定される項目には適していません。

これで一般的な問い合わせ機能を持ったフォームが完成しますが、この他にも「会社名」など記入項目を追加したい場合は+マークをクリックすると好きな数だけ項目を追加できます。項目を削除したい場合は、下記画像の位置にあるごみ箱のマークをクリックして削除できます。

アンケートを設定する

Googleフォームではアンケートも設置できます。

「選択肢1」とある部分をクリックすると、任意の選択肢名に変更可能です。選択肢の追加は、2行目にある「選択肢を追加」とある部分をクリックして行ってください。また、「その他を追加」をクリックすると、「その他」という名前の選択肢が自動的に追加されます。

「ラジオボタン」の部分をクリックすると、アンケートの選択方法を設定できます。画像では「ラジオボタン」になっていますが、「チェックボックス」に変更しても選択肢の設定方法は同様です。「プルダウン」もほぼ同様に設定できますが、「プルダウン」の場合は「その他」を自動で追加する機能がありません。

ファイルのアップロードについて

Googleフォームではファイルをアップロードする項目を追加することもできます。しかし、ファイルをアップロードする項目を増やした場合、Wordpressにフォームを組み込むためのコードが作成されません。

プログラミングなどの知識がなく、自力でのコーディングが困難と思われる場合は、プラグインのフォームを使用するなどしてファイルのアップロードが可能なソフトを選びましょう。

WordPressに組み込む

フォームが完成したら、最後にWordpressに組み込みます。まず、画面右上にある「送信」のボタンをクリックします。

するとフォームの送信画面が表示されるため、「<>」と表記されているタブをクリックしましょう。

クリックすると更に画面が移ります。

上から順に

1.フォームのコードです。このコードをWordpressの任意の場所に貼り付けることで、設定したフォームが表示されます。

2.問い合わせフォームのサイズです。変更したい場合はこの画面で行います。

内容を調整したら下部の「コピー」クリックすると、フォーム埋め込み用コードがクリップボードにコピーされます。

コピーまで完了したらWordpressの管理画面に移動し、表示させたいページのエディターにコードを貼り付ければ完成です。

フォーム設置後はテストを行う

問い合わせフォームの導入方法はいくつかありますが、どのような方法であっても、設置が完了したら自分でテストを行いましょう。具体的には、自分がユーザーになったつもりでサイトを訪れ、実際に問い合わせフォームを動かしてみることです。

何らかのトラブルで上手く設置出来ていない場合でも、見た目だけではわからないというケースは少なくありません。特に問い合わせフォームは常に稼働している機能というわけではないため、設置してから不備に気づくまで時間がかかってしまう場合もあります。

Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。

  • 人材育成領域

    人材育成領域

    サイト流入
    2.3倍
    (6,843セッション→16,001セッション)
    反響
    2.1倍(12→25件)
    上位表示キーワード例
    「人材育成(検索Vol.8,100)」
  • 婚活領域

    婚活領域

    サイト流入
    2.1倍
    (52,945セッション→110,164セッション)
    反響
    1.3倍(412→536件)
    上位表示キーワード例
    「婚活(検索Vol.40,500)」
  • 日常用品領域

    日常用品領域

    サイト流入
    3.3倍
    (31,874セッション→105,514セッション)
    反響
    3.4倍(84→293件)
    上位表示キーワード例
    「お水(検索Vol.4,400)」

Web集客・制作・PRのご相談はこちらよりどうぞ

以下の内容でよろしければ、送信ボタンを押して下さい。

会社名
氏名
メールアドレス必須
電話番号
お問い合わせの種類
お問い合わせ内容

個人情報保護方針に同意の上、
送信ください

この記事の監修者

株式会社ブランディングワークス編集部

株式会社ブランディングワークス編集部

SEO対策・コンテンツマーケティングの支援事業者。SEO支援を中心に、伴うWeb制作修正やコンテンツ制作まで一気通貫した支援を実施。実績のあるパートナー会社と連携してその他Webマーケティング(広告運用・SNS・メディアのマネタイズetc.)も幅広くカバーし、戦略立案から実行までを総合的に支援も可能。

LIGブログに掲載されました