WordPressのサイトに【お問い合わせ】を設置するおすすめの方法

お問い合わせフォーム

サイトを構築し始めたら早い段階で設置しておくべきなのが「お問い合わせフォーム」です。

「お問い合わせ」を作るメリット
  • 読者からの感想や要望を受け取って信頼関係を築けるようになる
  • ASPなどから新しい案件や特単オファーの連絡をもらえる

このページでは、週3日の作業で7桁を稼ぐFUMIが、ワードプレスのサイトにお問い合わせ欄を作る方法と手順について解説していきますので、あなたの運営メディアにもさっそく導入してみてくださいね^^

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

すでにご存知かと思いますが、一応 お問い合わせフォームのサンプルをご紹介しておきますね。

お問い合わせフォームのサンプル2お問い合わせフォーム例

お問い合わせフォームのサンプルお問い合わせフォーム例2

これらがお問い合わせフォームということになりますね。

さっそく作り方を以下から解説していきます^^

お問い合わせフォームを作るオススメの方法

ワードプレスの場合、プラグインを利用すると初めての方でも15分くらいで簡単に設置できて便利です。

プラグインとは?
機能を拡張させるために追加するプログラムのことです。

まず、管理画面の左側にある「プラグイン」→「新規追加」とクリックしてください。

プラグイン→新規追加と進む

 

次に、右上の検索欄に「Contact Form 7」と入力して「今すぐインストール」を押します。

contct form 7の今すぐインストールをクリック

 

「有効化」を押しましょう

有効化を押す

 

成功すると「プラグインを有効化しました。」とメッセージが出て、管理画面の左側に新しく「お問い合わせ」項目が出現します。

お問い合わせプラグインのインストールに成功

 

お問い合わせフォームのプラグインをインストールすることができました。

次からはお問い合わせフォームの作成に入っていきましょう◎

お問い合わせフォームの作り方

「お問い合わせ」 → 「コンタクトフォーム1」と進みます。(※ チェックを入れるのではなく、直接「コンタクトフォーム1」をクリックしてください。)

お問い合わせ→コンタクトフォーム1をクリックする

 

すると「コンタクトフォームの編集」画面に変わりますので、こちらで設定したい項目を編集していきます。

コンタクトフォームの編集画面

 

お問い合わせフォームの項目が「名前・メールアドレス・題名・メッセージ本文」であれば既存のデフォルトのままで構わないため、通常は何もいじらなくてもOKです。

一応、編集画面で調整可能な「フォーム」「メール」「メッセージ」「その他の設定」の項目について簡単に解説しておきますね。

編集項目一覧

 

前述したとおり、フォーム欄では最初から「名前〜メッセージ」内容が網羅されているものの、その他に電話番号やチェックボックス欄、ファイル添付などの欄も追加することができます。

フォームで設置できる項目一覧

 

ただし、(繰り返しになりますが、)通常はデフォルトのままで十分ですし、項目を増やすとお問い合わせの頻度(コンバージョン率)が下がるため、何もいじらないでおくことをオススメします。

 

隣の「メール」項目では、受信するメール内容についての編集が可能です。以下の画像や表を参考に設定してみてください。

メール設定の編集の仕方

送信先 お問い合わせを受け取るためのメールアドレスを入力。
送信元 そのままでOK。
題名 お問い合わせメールを受け取る際の題名を入力。
追加ヘッダー  Cc や Bccを追加して受け取るアドレスを増やせる。
メッセージ本文  そのままでOK。

 

「メッセージ」項目では送信後や失敗時などに表示される文言を編集します。

メッセージ欄の編集

 

例えば、入力必須の項目が入力されていない場合に「必須項目に入力してください」と表示されますが、こうした自動メッセージを任意で変更することができるわけです。

メッセージ内容の例

 

通常は手を加えずにデフォルトのままで構いませんが、変えたい場合には文章を削除して改めて入力するだけでOKです。

 

最後の「その他の設定」では、専用コードを貼り付けると他の機能を追加できます。

コンタクトフォームのその他の設定

 

ここの部分はマニアックな領域ですので、何もしなくて大丈夫です。(※ 詳細を知りたい場合は「その他の設定」ページを参考にしてみてください。)

以上でお問い合わせフォームの編集が終わりました。「保存」ボタンを押して情報を更新しましょう。

保存ボタンを押す

 

次のステップに備えてショートコードをコピーしておいてください。

コピーのショートカットキー
  • Windows → Ctrl+C
  • MAC → Command+C

ショートコードをコピーする

お問い合わせフォームを固定ページに反映させる

先ほど作成し終えたお問い合わせフォームのショートコードを固定ページに貼り付けることでお問い合わせページが完成します。

ここではその手順について解説していきますが、まず管理画面の左側にある「固定ページ」→「新規追加」と進んでください。

固定ページから新規追加

 

タイトル欄には「お問い合わせ」と入力し、本文欄には先ほどコピーしたショートコードをペーストします。

ペーストのショートカットキー
  • Windows → Ctrl+V
  • MAC → Command+V

タイトルを付けてショートコードを貼り付ける

 

ちなみに、新エディターGutenberg(グーテンベルク)をお使いの場合は、以下のような設定画面になりますね。

グーテンベルクの設定画面

 

ここまで来ましたら、右側にある「プレビュー」ボタンを押して一度確認してみましょう。

プレビューで確認

 

お使いのテンプレートによって多少デザインは変わるものの、大体のイメージは以下のようになっているはずです。

お問い合わせフォームのプレビュー画面

 

この段階で実際にテスト入力してお問い合わせ内容が機能するか確認してみることをご提案します。

必須項目の欄に記入して「送信」ボタンを押した後、正常であれば先ほど指定したアドレスまでお問い合わせメールが届いているはずです。

お問い合わせフォームが機能するかテストする

 

問題なければ「公開」ボタンをクリックして正式にスタートさせましょう^^

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

ここでは、閲覧者がお問い合わせフォームにアクセスしやすいようにTOPページなどにお問い合わせ窓口を設ける方法を解説します。

代表的な方法としては、グローバルナビゲーションやサイドバーへの設置で、当サイトのファミリエイトではグローバルナビゲーションの右端に設けてあります。

グローバルメニューにお問い合わせ欄がある例

グローバルナビゲーションにお問い合わせフォームを設置する

それではグローバルナビゲーションに設置する方法を解説していきますね。

管理画面の左側にある「外観」→「メニュー」と進み、メニュー名の欄に「グローバルナビゲーション」と入力してから「メニューを保存」をクリックします。(※ すでにグローバルナビゲーションの項目を追加してある場合はこのステップを飛ばしてOKです。)

グローバルナビゲーションの設定

 

次に、固定ページ欄から「お問い合わせ」にチェックを入れ、「メニューに追加」をクリックします。

お問い合わせにチェックを入れメニューに追加する

 

メニュー構造の中に「お問い合わせ」が追加されたら、メニューの位置にある「Global Navigation」にチェックを入れ、最後に「メニューを保存」をクリックして完了です。

メニューを保存

 

TOPページに行き実際に設置されているかチェックしましょう。

グローバルナビゲーション内のお問い合わせ欄

サイドバーにお問い合わせフォームを設置する

続いてサイドバーにお問い合わせフォームを設置する手順について解説します。

すでにご存知だと思いますが、サイドバーはPC画面で開いたときの端側(主に右側)のエリアを指します。こちらにお問い合わせを置くのも効果的です。

サイドバーの位置

 

まずは先ほどと同じくショートコードをコピーします。

ショートコードをコピーする

 

続いて、管理画面の左側にある「外観」→「ウィジェット」の順にクリック。

外観からウィジェットに移動

 

「利用できるウィジェット欄」にある「テキスト」をサイドバー欄の好きな位置にドロップして移動します。

テキストをサイドバーに設置する

 

移動し終えたテキストのバーをクリックして開き、タイトル欄に「お問い合わせ」と入力、ビジュアルモードのままでショートコードを貼り付け、保存ボタンを押します。

タイトルを入力してショートコードをペーストした後に保存をクリックする

 

はい。ご覧のようにお問い合わせの設定が完了しました。(※ お使いのWPテーマによって外観は多少変わります。)

サイドバーにお問い合わせフォームが設置された

 

ついでに、お問い合わせ窓口だけをサイドバーに設置する方法も最後にお伝えしておきますね。

お問い合わせ窓口だけの例

 

窓口だけを設置しておきたい場合には、使用する画像や矢印のアイコンを準備しておく必要がありますので、まずは「矢印 アイコン 無料」などで検索をかけてお気に入りのアイテムを探しておきましょう。

画像が用意できましたら、ワードプレス内に「メディアを追加」しておきます。

画像をメディアライブラリに追加
WP内に画像を追加しておく

そうしましたら、先ほどと同じく管理画面の左側にある「外観」→「ウィジェット」の順に進んでください。

外観からウィジェットに移動

 

「利用できるウィジェット欄」にある「テキスト」をサイドバー欄の好きな位置にドロップして移動します。

テキストをサイドバーに設置する

 

移動し終えたテキストのバーをクリックして開き、タイトル欄に「お問い合わせ」と入力、テキストモードに切り替えて、以下のように文章とHTMLタグを打ち込みます。

 

サンプル例のようにしたいということであれば、以下のコードをそのままコピーして貼り付けてみてください。

何でもお気軽にお問い合わせください^^
<br>
<center><img src=”ここに矢印画像のURLを貼り付ける” /><img src=”ここに矢印画像のURLを貼り付ける” /><img src=”ここに矢印画像のURLを貼り付ける” /></center>

<center><a href=”ここに飛び先「お問い合わせフォーム」のURLを貼り付ける”><img src=”ここにはクリックしたらお問い合わせページに飛ぶ画像を貼り付ける” alt=”お問い合わせ”></a></center>

<center><b>↑お問い合わせ↑</b></center>

画像URLの見つけ方

メディアライブラリ内の右側にある「URL」欄をコピーすればOKです。

最後に「保存」ボタンを押して、ブラウザで確認してみると、以下のようになっているはずです^^

お問い合わせ窓口だけの例

お問い合わせフォームの作り方まとめ

いかがだったでしょうか?

この記事を見ながら進めていけば、初心者でも15分もかからずにお問い合わせフォームを設置することが可能です。

FUMI自身もアフィリエイトを始めてから1ヶ月以内にお問い合わせを作っておいたところ、3ヶ月目には閲覧者からお問い合わせが来るようになり、半年後にはASPから特単のオファーや案件掲載の依頼が舞い込んでくるようになりました。

あなたも早いうちにお問い合わせフォームを設置しておくなら、同じようにビジネスを加速させたり、コミュニケーションの輪を広めやすくなるはずですよ^^

1 COMMENT

takafumi

おはようございます。
お問合せの設置方法がとてもわかりやすいですね。
「矢印 アイコン 素材 無料」も役に立ちますね^^
ありがとうございます。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください