12.WordPressにお問い合わせページを設置する方法

WordPressにはお問い合わせの機能が標準搭載されていません！お問い合わせを設置するにはご自身でページや機能として追加する必要があります。今回はWordPressにお問い合わせ機能を追加する方法についてご説明します。

お問い合わせページとは

お問い合わせページは、サイトを閲覧する方が、サイトの所有者に何かしらのメッセージを送るための機能です。

WEBサイト上に入力項目や送信ボタンを設置することで、閲覧者は見ているWEBサイトから直接メッセージを送ることが出来ます。

一般的な入力項目は以下の通りです。

基本的にはサイト閲覧者からサイト所有者へと一方通行の流れとなり、サイト所有者は、登録メールアドレスでメッセージを受け取ります。

その後連絡を取る場合は、メールを受け取ったサイト所有者が、入力してもらったメールアドレスに返信をする、という流れになります。

もちろんやり方は様々ありますので、入力フォームに電話番号を入力させて、サイト管理者は電話で回答を行うということなども可能です。

WordPressにお問い合わせはない？

WordPressはインストールするだけで最低限のWEBサイトの形としてスタートできます。

沢山の機能が搭載されているので、お問い合わせ機能も標準搭載されていそうですよね？

しかし、冒頭でも説明していますが、お問い合わせ機能はWordPressに最初から搭載されていることはありません。

本来お問い合わせ機能を設置するには、フォームという仕組みをプログラムとして組んだりする必要がありますが、WordPressでは便利なプラグインがありますので、初心者の方でも簡単に設置することが出来ます。

WordPressでのお問い合わせ設置方法

WordPressで簡単にお問い合わせ機能を設置するには、プラグインを利用します。

お問い合わせプラグインは多数存在していますが、今回は最も人気で手軽に利用できる「Contact Form 7」で説明をしていきます。

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

プラグインの追加

まずは、お使いのWordPressに「Contact Form 7」というプラグインを追加しましょう。

WordPress管理画面左メニューにある、「プラグイン」にマウスを乗せて、さらに表示されるメニューから「新規追加」をクリック。

プラグインの新規追加画面が表示されるので、画面右上の「プラグインの検索」という入力項目に、「Contact Form 7」と入力します。

以下からコピペしてください。

入力するとすぐに検索が始まり、最初に表示されたプラグインが今回導入する「Contact Form 7」なので、「今すぐインストール」して、そのまま「有効化」ボタンまでクリックしましょう。

お問い合わせページ作成までの流れ

WordPressにお問い合わせを設置するための操作には、いくつかの段階があります。

まずは全体的な流れをしっかりと把握しましょう。

まずは「Contact Form 7」の編集画面でフォームを作成します。

フォームは、閲覧者がメッセージを送るための入力項目などのことです。

次に、閲覧者から送信されたメッセージの受け取り方などを決めます。

ここでは、受信するメールアドレスを決めたり、メッセージ受け取り時のメールのテンプレートを作成したりします。

フォームを作成しただけでは、WordPress上のページとしての存在がまだないので、新しい固定ページを新規追加し、その中に、作っておいたフォームを挿入します。

さらに、固定ページも、作成しただけでは、WEBサイト上のどこにも現れないので、メニュー機能やウィジェット機能などを利用して、固定ページへの誘導リンクを作成し、完了となります。

フォームの作成

まずは、サイト閲覧者がメッセージなどを入力するためのフォームを作成します。

管理画面左メニュー「お問い合わせ」もしくは、さらに表示される「コンタクトフォーム」をクリックします。

すると、作成済みのお問い合わせフォームが一覧表示されるページに移動します。

まだ作成していないのに、すでに1件のフォームがあると思います。

これはプラグインをインストールした段階で用意されているサンプルフォームのようなものです。

このフォームを編集して使っても良いですし、画面上部の「新規追加」から新たなフォームを作成することも可能です。

複数のフォームを作成できるようになっているので、「ご依頼フォーム」「購入希望フォーム」「ご意見フォーム」など、用途に合わせてフォームを分けることが可能となっています。

今回はすでに用意されているフォームを利用してフォームを作成します。

一覧にある「コンタクトフォーム１」をクリックして編集画面に移動します。
※「編集」ボタンでも同じページへ移動します。

ここではお問い合わせフォームの内容や様々な設定を行うことが出来ます。

入力させる内容などの「フォーム」と、閲覧者からのメッセージをどのように受け取るかの「メール」、お問い合わせを送信した後のメッセージの内容などを変更できる「メッセージ」などが設定できるので、それぞれ見ていきましょう。

フォーム

フォームでは本来必要なHTMLなどの知識が無くても、簡単に入力項目を設置できるように、独自のコードを入れてフォームを作成することが出来ます。

サンプルで用意されているフォームには、すでに最低限必要なコードが記載されています。

<label></label>というタグで囲まれた項目が一つの入力項目の区切りとなります。

「氏名」や「メールアドレス」などと書かれている部分は、必要に応じて変更可能です。

[ ]（半角カッコ）で囲まれた部分はフォームを表示するために必要なコードなので、細かい設定を自分自身で調整できる方以外は触らないようにしましょう。

このフォームを利用すれば、「ご予約フォーム」「商品購入フォーム」などのお問い合わせも作成ができます。

また、フォーム入力欄の上部にある「テキスト」などのボタンを利用すると、多少複雑なチェックボックスやドロップダウンでの選択や、選択内容から条件分岐したフォームなども設置することが可能となります。

今回は試しに、住所入力欄を追加してみましょう。

基本的には、他の項目を真似して作ると、初心者の方でも作りやすくなります。

まずは、すでに存在している「氏名」の項目をそのままコピーして、「氏名」の下に用意します。

そして、「氏名」と書かれた部分を「住所」に変更します。

次に、住所入力欄を用意します。

「[text* your-name]」という部分が氏名入力欄を表示するためのコードなので、貼り付けた方の「[text* your-name]」は一度削除しましょう。

削除した部分にカーソルがあることを確認して、上部にある「テキスト」をクリックします。

すると、入力欄作成用のダイアログボックスが表示されます。

これは、「どんな内容でテキストタイプの入力欄を作成しますか？」と聞かれている状態なので、「入力必須項目にする」だったり、「最初からこの文字を入力しておく」などと答えるように作成していきましょう。

「項目タイプ」では、この住所入力欄を必須項目にするかどうかを選択できます。

必須項目にした入力欄は、お問い合わせ時に入力しないと送信できない状態になります。

「名前」部分は、この住所入力欄に項目名を付けてあげるようなイメージで、半角英数でつけることをおすすめします。

何の項目かがすぐにわかるように付けましょう。

例えば、住所入力欄であれば、「address」などとつければ、コードを見ただけでも住所入力欄であることがわかると思います。

「デフォルト値」では、最初から文字を入力しておく文字を決めることが出来ます。

入力内容によっては利用する場面があるので覚えておきましょう。

「デフォルト値」に文字を入力して、その下にある「このテキストを項目のプレースホルダーとして使用する」にチェックを付けると、プレースホルダーとして利用することが可能になります。

今回は、プレースホルダーとして「郵便番号なしで番地まで入力」と入れてみます。

これで、入力する人は、郵便番号は不要で番地までは入力が必要なんだな！と理解することが出来ます。

やり方は他にも様々ありますが、入力者にミスをさせない設計などを考慮することも大事です。

他の項目は中級者以上向けの設定なので一旦ここまででOKです。

入力が出来たら、画面下の方に、すでにコードが表示されているのがわかります。

この状態で、「タグを挿入」をクリックしましょう。

すると、最初にカーソルを置いておいた場所に、先ほどのコードが挿入されたと思います。

これで住所入力欄が完成しました。

他のコードと見比べてみましょう。

ある程度形が決まっているのがわかります。

「[]（半角カッコ）」でくくり、中には、「入力欄のタイプ」、必須項目には「*（アスタリスク）」、次に、「項目の名前」という形になっています。

この要領で他の項目も追加できるので、項目を増やしたい場合はチャレンジしてみましょう。

入力内容などを追加や編集などを行ったら、必ず保存の作業をしましょう。

内容を保存するには、画面右上の「保存」をクリックします。

今回は簡易的な項目のみの追加でしたが、複雑なフォームを作成したい、一部カスタマイズしてほしい、全部作ってほしい、作り方を教えてほしいという場合は、ホームページからSolabotスクールまでご依頼ください。

エラーが出る場合：準備中

メール

次に、「メール」タブについて見ていきます。

画面上部の「メール」のタブに切り替えると、閲覧者が送信したメッセージの受け取り方を決めることが出来ます。

設定項目は主に以下の通りです。

今回は最低限必要な項目を見ていきます。

初めて設定する方は、少し混乱してしまう場合が多いので、実際の状況をイメージしながら作成してみましょう。

それぞれの項目が既に入力されていると思います。

よく見ると、先ほどのフォーム作成同様[ ]（半角カッコ）で独自のコードが記載されています。

このメールの受け取り方でもContact Form 7独自のコードが利用できるようになっています。

まずは、「送信先」という項目です。

これは、お問い合わせを入力するサイトの閲覧者が、お問い合わせフォームを入力したら、「どのメールアドレスに送信するか」ということなので、サイト管理者が「何のメールアドレスで受取るか」という意味合いになります。

[_site_admin_email]と入力されていますが、これは、WordPress自体に設定しているメールアドレスに送信しますよ、という意味合いになります。

WordPress自体に設定したメールアドレスとは、WordPressを最初にインストールした際に、登録したメールアドレスで、管理画面左メニューの「設定」をクリックして、「管理者メールアドレス」という項目で確認することが出来ます。

この項目では直接メールアドレスを入力することも可能なので、管理者メールアドレスとは別のメールアドレスに送りたい場合は、直接メールアドレスを入力しましょう。

「送信元」という項目では、メールを受け取る際に、「誰が送ってきたか」を表示するための項目で、あくまでもWordPressが閲覧者からのメッセージを受け取り、間接的にサイト管理者にメールとして送るということから、WordPress自体が送信元になります。

入力されているコードでは、「サイトのタイトル」と「wordpress@○○○」と入っていて、自分のサイトからメールが来たことを知らせるように設定されています。

問題がなければそのままで構いません。

次に、題名を見てみます。

ここでは、メールを受け取る際の件名をどうするか設定します。

同じようにサイトタイトルが入ることはわかると思います。

その後に、[your-subject]と入力されていますが、ここで一度、作成したフォームを見てみます。
※説明用なので実際に切り替える必要はありません。

フォーム作成時に、「項目名」を決める必要があったと思います。

すでに入力されていた項目にも必ず「項目名」は必要になっていて、「題名」部分で[text* your-subject]となっているので、題名の項目名は「your-subject」という設定をしていることになります。

それでは、メールのタブに戻ります。

題名部分で“[your-subject]”とありますが、つまりは、閲覧者がフォームで題名を入力すると、“[your-subject]”という部分に自動的に挿入してくれるという設定になっています。

””はコードではないので、”入力された題名”という様に”はそのまま出力されます。

例えば、題名：[your-subject]と入れれば、「題名：入力された題名」という風にメールを受け取ることが可能になります。

フォームと、メールはこのように項目名で繋がっているので、閲覧者から入力された内容をメールに反映するには、しっかりと項目名を設定して、メールの方でも間違えないように転記しましょう。

これを理解すれば、「追加ヘッダー」部分や「メッセージ本文」部分も同じなので簡単だと思います。

[項目名]という形式で入力しておけば、フォームで使った項目をそのまま出力可能ということです。

ちなみに、「メール」項目の上部には、「フォーム」で作成した項目の「項目名」が一覧で表示されます。

フォーム側で作成したけど、メール側で転記していない項目があれば、太字で表示してくれます。

例えば、先ほどフォームで作成した「住所」項目は、まだメール側で転記していません。

そのため、親切にも太字で「address」と表示してくれています。

それでは、試しに、「メッセージ本文」に住所を自動挿入させてみましょう。

このようになりました。

これで、サイト閲覧者がお問い合わせフォームから住所を入力すると、メールで受け取る際の本文に、「住所：入力された住所」という形で表示されます。

編集を行ったら必ず保存の作業を行いましょう。

画面右上の「保存」をクリックして保存します。

エラーが出る場合：準備中

お問い合わせを機能させるためにはこれだけでも十分ですが、他にも「メッセージ」と「その他の設定」というタブがあるので簡単に見ておきましょう。

メッセージ

メッセージのタブでは、閲覧者がお問い合わせフォームを入力したり、送信した時に表示されるメッセージを決めることが出来ます。

例えば、お問い合わせを送信した際は、「ありがとうございます。メッセージは送信されました。」と表示されるように設定されているので、必要に応じて、他のメッセージも変更などができます。

その他の設定

その他の設定タブでは、CSSというデザインカスタマイズ用のコードを入力することが出来るようになっていますが、こだわりがなければ現段階で設定などをする必要はありません。

固定ページの作成

ここまでの操作でお問い合わせの入力欄にあたるフォームを作成しましたが、このフォームを表示するためのページを用意していません。

次は、実際のお問い合わせページとなる固定ページを作成していきましょう。

管理画面左メニューの「固定ページ」にマウスを乗せて、さらに表示される「新規追加」をクリック。

すると、白紙の固定ページが表示されます。

タイトルはお好みですが、今回は「お問い合わせ」と入力します。

本文の部分に先ほど作成したお問い合わせフォームが入ればいいということになります。

ブロックエディターをお使いの場合は、新しいブロックを追加するだけで簡単にお問い合わせフォームを挿入することが出来ます。

「ブロックの追加」から「すべて表示」をクリックして、すべてのブロックを表示します。

表示されたブロックのメニューからスクロールして「Contact Form 7」を探してクリックします。

すると、ブロックとしてお問い合わせフォームが挿入されるので、作成したフォームをドロップダウンから選択してください。

お問い合わせ内容に合わせて複数のフォームを作成している場合は、必要に応じてフォームの種類を変更します。

フォームが挿入出来たら、このお問い合わせページのスラッグを決めていきます。

スラッグは、このページのURLの一部になる文字列のことです。

画面右側の設定項目上部にあるタブから、「固定ページ」を選択して、「URL スラッグ」という項目にこのページのスラッグを入力しましょう。

お問い合わせページであれば、「contact」などにするのが一般的です。

これで、このページは「https://ドメイン名/contact」というURLになります。

スラッグまで入力出来たら、このページを公開しましょう。

画面右上の「公開」ボタンからページを公開します。

これで2つ目の段階である、お問い合わせフォームが入った固定ページが作成できました。

ここまでSolabotスクールの説明を見てきた方であれば簡単だと思いますが、この固定ページも作成しただけでは、サイト上のどこにも表示されません。

そのため、実際にお問い合わせページに移動できるように誘導するリンクを作成しましょう。

お問い合わせへ誘導するためのリンク設置

お問い合わせページへのリンクはWEBサイトのナビゲーションやサイドバー、フッターなどに設置するのが一般的です。

WordPressのメニュー機能や、ウィジェット機能を利用して、WEBサイトの好みの場所にお問い合わせページへの誘導リンクを設置しましょう。

＼ メニュー・ウィジェットの設置ガイドはこちら ／

[mycardlink id=”1442″]

[mycardlink id=”1076″]

メールで受取る

お問い合わせページを作成したら、実際に機能する状態になっているか確認の為、自身でテスト送信を行いましょう。

設置したお問い合わせページからフォームを入力して送信します。

実際にメールを受け取るとこのような状態でメールが届きます。

受け取るメールが迷惑メールなどに入ってしまう場合は、こちらの記事を参考にしてください。

＼ メニュー・ウィジェットの設置ガイドはこちら ／

[mycardlink id=”773″]

[mycardlink id=”1563″]

WP Mail SMTPというプラグインを利用すると、迷惑メールに振り分けられないようにすることが出来ます。
記事自体は、Gmailを利用される場合のキーコード取得方法ですが、Gmail以外の方でも有効なプラグインです。

まとめ

お疲れ様でした。

これでWordPressのサイトにお問い合わせページを設置することが出来ました。

手順のポイントは以下の通り

これらのポイントを押さえると簡単にお問い合わせページを作成することが出来るのでぜひやってみましょう。

また、エラーなどが出る場合は、以下のページから対処できないか見てみてください。

エラーの場合：準備中