【WordPress】お問い合わせフォームの簡単設置方法を画像解説

ワードプレスのロゴマークと記事タイトル画像 ワードプレス

こんにちわ。

りゅうまるです。

 

この記事では、ワードプレスにお問い合わせフォームを作成する方法(手順)を、画像解説していきたいと思います。

 

ワードプレスにお問い合わせフォームを設置するには、「Contact Form 7」というプラグインを使ったやり方が最も簡単です。

 

今回は、最もシンプルなデフォルト設定のやり方です。

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

  1. 「Contact Form 7」をインストール(有効化)
  2. お問い合わせフォーム設定(デフォルトでOK)
  3. 固定ページにお問い合わせフォームを作成

 

お問い合わせフォームを作成したら、グローバルメニューなどにリンクを設置しないと機能しないので意味がないですよね。

 

「Contact Form 7」のインストールからグローバルメニューへの反映までを一気にやろうとすると、手順が多くなり把握しにくいと思うので、今回はお問い合わせフォームの作成までを解説していきます。

 

グローバルメニューをブログに設置する方法もこの後作成し、この記事内にリンクを設置しておきますので、引き続き作業をされる方は参考にしてくださいね。

 

ちなみに、フォーム設置後のグローバルメニューの設置方法は使用されているテーマによって手順が異なると思いますが、僕は無料テーマの「Cocoon」を使用しているので、「Cocoon」での設定解説になります。

 

ご了承くださいませ(__)

 

それではまず、お問い合わせフォームの作成方法を書いていきます。

 

「Contact Form 7」をインストール(有効化)

ワードプレスのダッシュボード管理画面内の「プラグイン」にカーソルを合わせ、「新規追加」をクリックします。

 

ワードプレスプラグインの新規追加画面

 

プラグインを追加という画面に変わるので、プラグイン検索窓にContact Form 7と入力します。

 

入力すると1~2秒でContact Form 7が表示(左上)されるので、その中の「今すぐインストール」をクリックします。入力後画面が変わらない場合はEnterキーをクリックしてみてください。

 

Contact Form 7プラグインのインストール画面

 

「今すぐインストール」をクリックすると、ボタンが「インスト―ル中」から「有効化」に変わるのでそのまま「有効化」をクリックします。

 

Contact Form 7の有効化画面

 

「有効化」をクリックすると、左管理メニュー内に「お問い合わせ」項目が追加されます。

 

これで「Contact Form 7」のインストールと有効化は完了です。

 

ワードプレス管理メニュー内にお問い合わせ項目が追加された画面

 

次にお問い合わせフォームの項目内容を設定していきますが、基本的な項目はデフォルトで設定されています。

 

今回は、固定ページを使用してお問い合わせページを作成するやり方ですが、以下の項目でよい場合は固定ページ内にコード(ショートコード)を一行貼り付けるだけの簡単な設定です。

 

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

  1. Contact form 7でショートコードをコピー
  2. ワードプレスで新規固定ページ追加
  3. 新規固定ページにショートコードを貼り付ける
  4. タイトル(ページ名)とパーマリンクを設定

 

項目内容の追加や文字列変更、自動返信メールなどの設定は後から自由にできます。

 

「Contact Form 7」のデフォルト設定(項目)

 

以下はフォーム内で入力する項目一覧です。

 

  •  お名前(必須)
  • メールアドレス(必須)
  • 題名
  • メッセージ本文
  • 送信ボタン
  • (送信完了のメッセージ表示もあり)

お問い合わせフォーム作成用のコードをコピー

先ほど「有効化」で追加された管理メニュー内の「お問い合わせ」にカーソルを置くとサブメニューが表示されます。

 

デフォルト設定の場合は、「お問い合わせ」をクリックしてもサブメニュー内の「コンタクトフォーム」をクリックしても同じコンタクトフォームの管理画面が表示されます。

 

Contact form 7の管理画面への移動画面

 

「コンタクトフォーム」をクリックするとContact Form 7の管理画面に変わります。

 

管理画面内を少し下にスクロールし、ショートコードという文字の下のコードの上でワンクリックすると全選択(反転)できるので、右クリックでコピーしておいてください。

 

コピーしたショートコードを、今回は固定ページ内にペースト(貼り付け)するだけで、お問い合わせフォーム(デフォルト)が作成されます。
Contact form 7の管理画面でショートコードをコピー

 

Contact form 7の管理画面内での作業はこれで完了です。

 

お問い合わせページを作成(固定ページ)

ショートコードをコピーしたら、左管理メニュー内の「固定ページ」にカーソルを置き、サブメニューから「新規追加」をクリックします。

 

ワードプレスの新規固定ページ作成画面

 

新規の固定ページが表示されたら、まずは先ほどコピーしておいた「ショートコード」を固定ページに貼り付けます。

 

ショートコードを貼り付ける場所は、テキスト入力スペース(白紙の部分)です。

 

次にタイトル入力欄に「お問い合わせ」や「お問い合わせフォーム」など任意のページ名を入力します。(以下の画像では「お問い合わせフォーム」としています。

 

パーマリンクの設定は、通常の投稿ページと同じ要領で設定してください。

 

僕は、inquiry-form(お問い合わせフォームの英訳)と設定しました。

 

お問い合わせフォームの編集例

 

以上で「Contact Form 7」でのお問い合わせフォーム作成は完了です。

 

お疲れさまでした(*^^*)

 

お問い合わせフォームの確認方法

お問い合わせフォームの作成が完了したので、プレビュー画面で確認してみてください。

 

僕が今回の記事を作成しながら作成したお問い合わせフォームは以下のように出来上がりました。

 

お問い合わせフォームのプレビュー画面
Contact Form 7の入力ミスの表示画面

お問い合わせメールの確認方法

お問い合わせフォームの設置が確認出来たら、プレビュー画面から実際にお問い合わせフォームを使用してみてください。

 

お問い合わせフォームからのメールはご利用のワードプレスをインストールするときに設定したメールアドレスに届きます。

 

ワードプレスに設定してあるメールフォーム画像

 

複数ブログを運用していて、設定したメールアドレスが思い出せないなどの場合は、ダッシュボード左管理メニューから「設定」項目内の「一般」をクリックします。

 

ワードプレスダッシュボード管理メニュー

 

「一般設定」ページ内のメールアドレス項目で確認できます。

 

ワードプレスの一般設定画面

ワードプレスのメールフォーム作成のまとめ

ブログ内にメールフォームを設置するメリットは、いくつかありますが、ユーザー側からブログ管理者へメッセージが送れるという安心感みたいなものが大きいような気がします。

 

一方通行ではないつながり感は、メールフォームの利用頻度にかかわらず、ユーザーからの信用度もアップするんじゃないかなと思います。

 

運営者側の実質的なメリットとしては、アドセンス申請時やAmazonアソシエイト申請時に役立つという意見も多くありますが、それも信用度というところが大きな基準になっているんでしょうね。

 

今回は、このブログではないですが別運用のワードプレスブログにお問い合わせフォームを設置しながら記事を作成しました。

 

表示される画面をほぼすべてキャプション(加工)しながらの記事作成なので場面が多いように思いますが、デフォルト設定でのフォーム設置なら意外と簡単に設置できると思います。

 

「Contact form 7」では、多くの追加項目でカスタマイズすることができますが、メールフォームの利用目的はデフォルト設定でも十分機能すると思いませんか?

 

シンプルイズベストというところかな(‘ω’)ノ

 

それはそうとメールフォームを作成しても、ブログ内でグローバルメニュー等に設置しないと何の役にもたちませんよね。

 

この流れでグローバルナビの設置まで一気にこなすのは特に初心者の方には大変だと思います。

 

というか、僕自身が記事作成に時間がかかりすぎてしんどい状態です。

 

この記事を書きながら、別ウインドウでもう一つのブログにフォームを設置しながら、キャプチャ画像を加工しながらやってます。

 

作業効率が悪すぎて想像以上に時間がかかってるんですが、この記事はこれで終わりたいと思います。(疲れた~~!)グローバルナビの設置方法の記事も設置作業と同時にやっていこうと思うんですがどう思います?

 

 

りゅうまるでした★

 

あわせて読みたい

コメント