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

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

お問い合わせページとは

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

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

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

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

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

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

  • メッセージのタイトル
  • メッセージ本文
  • メールアドレス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プラグインの追加

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

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

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

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

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

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

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

\ コピーするボタンでコピーできます! /
コピーしました!
コピーする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォームの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォーム

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

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

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

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

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

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

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

12.WordPressにお問い合わせページを設置する方法
[ ](半角カッコ)で囲まれた部分はフォームを表示するために必要なコードなので、細かい設定を自分自身で調整できる方以外は触らないようにしましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12.WordPressにお問い合わせページを設置する方法
プレースホルダーとは

プレースホルダーとは、実際には入力されていないけど、入力欄にうっすらと表示されたりする文字で、入力欄のヒントとして使われることが多いです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

わからないときは相談してみよう!

Solabotスクールでは、WordPress全般についてご依頼を承っております。中には無料でお答えしているものもありますので困ったらまず、「どうしたらいいのか」を聞いてみましょう。

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

メール

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

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

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

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

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

  • どのメールアドレスで受取るか
  • どんなタイトルで受取るか
  • どんな本文で受取るか

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このようになりました。

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

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

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

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

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

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

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

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

メッセージ

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

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

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

その他の設定

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

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

固定ページの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12.WordPressにお問い合わせページを設置する方法 10.【メニュー】WordPressのメニュー作成と設置方法の説明 この記事では、WordPressのメニューについてご説明しています。画面上部のメニューバーだけでなく、サイドバーやフッターなどでも複数パターンで好きなようにメニューを設置できるように学んでいきましょう。 12.WordPressにお問い合わせページを設置する方法 9 【ウィジェット】WordPressの新旧ウィジェットと使い方 ワードプレスをインストールして、記事も書けるようになったら、サイト全体のレイアウトが気になりますよね? 今回は、サイドバーやフッターなどサイトのあらゆる場所に便利なパーツを配置できる「ウィジェット」について説明していきま ...

メールで受取る

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

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

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

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

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

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

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

12.WordPressにお問い合わせページを設置する方法 【2021年最新】Wp Mail SMTPのクライアントIDとクライアントシークレットの取得 この記事では、ワードプレスのプラグインWP Mail SMTPの「Client ID」「Client Secret」がよくわからないという質問が多いので説明をしていきます。 12.WordPressにお問い合わせページを設置する方法 【2022年最新】Gmail用クライアントID・クライアントシークレット入手手順 以前「【2021年最新】Wp Mail SMTPのクライアントIDとクライアントシークレットの取得」という記事を作成しましたが、クライアントIDとクライアントシークレットの入手手順が一部変更になったようなので、この記事で ...

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

まとめ

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

お疲れ様でした。

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

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

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

Contact Form 7のプラグインを追加して、フォームを作成

メール受信設定

Contact Form 7のプラグインを追加して、メールの受信内容を設定

作成したフォーム入れるページを用意

固定ページに作成したフォームを挿入

サイト上に「お問い合わせボタン」を設置

メニューやウィジェットで固定ページへの誘導リンクを設置

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

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

エラーの場合:準備中

コメントを残す

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

CAPTCHA