「ワードプレス」お問い合わせフォームの作り方！。ブログでアフィリエイトするのであれば、お問い合わせフォームぐらいは作った方が良いです。今回は「ワードプレス」お問い合わせフォームの作り方！について書いていきます。
ビジネスとしてブログを運用する場合、ユーザーがお問い合わせなどに使用する送信フォームの設置は欠かせません。こうした送信フォームは「Contact Form 7」と言うプラグインによって実装することが安易にできます。
| 結論を先に話ししておきます |
| ブログでアフィリエイトする場合、お問い合わせフォームを設置することで、新規の顧客を獲得できる可能性があります。具体的に言うと、個人は勿論、企業から業務提携など、ビジネス拡大の話しがくるかも知れません。
読者にどのようなビジネスチャンスがあるかイメージして貰う為にも、ブログではなく、Webサイトの場合、お問い合わせフォームと合わせて「会社の概要」や「商品紹介のページ」を作成しておくと良いでしょう。
読者の中には、オープンな場に於いて、ビジネスの話しをしたくない方も一定数存在するでしょう。そんな読者を新たな顧客に繋げる為にも、クローズな連絡手段として、お問い合わせフォームを用意しておきましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【お問い合わせ「Contact Form 7」とは(動画付き)】
「Contact Form 7」は、あなたのワードプレスにお問い合わせページを作成する際、非常に便利で役立つプラグインです。通常であれば自分でお問い合わせページを作成する時、HTMLやCSSの専門的な知識が必要となります。
ですが「Contact Form 7」のプラグインを使えば、誰でも簡単に設定することが可能になり、専門的な知識のない方でも、お問い合わせページを作成することができます。その為、国内のみならず、海外でも、広く使われています。
また「Contact Form 7」の開発者は、日本人の「Takayuki Miyoshi」さんである為、日本語で様々な情報を得ることができるのも特徴と言えます。具体的に「Contact Form 7」のメリットとしては、下記を参考にしてみて下さい。
| Contact Form 7のメリット |
|
ではここで動画を視聴してみて下さい。題して「【Contact Form 7の使い方・その1】WordPressで問い合わせフォーム作成」です。
【お問い合わせ「Contact Form 7」の設定】
この章から、あなたのワードプレスにお問い合わせページとして「Contact Form 7」の設定をしていくやり方について図解入りで解説していきます。その前に、一番大事なことを言います。それは、プラグインの導入です。
「Contact Form 7」をワードプレスにインストールしていなければ、お問い合わせページを作ることはできません。まずは、下記の図解を参考に「Contact Form 7」をインストールし、有効化までやってみて下さい。
- まず初めに、サイドメニューの「プラグイン」→「新規追加」と進み、右上部にある「プラグインの検索」ボックス内に「Contact Form 7」と入力後、下記の画面が左上部辺りに表示されます。
下記のような画面が見つかったら「桃色枠」で囲まれている「今すぐインストール」を押しましょう。
- 今すぐインストールが完了したら「緑色枠」で囲まれている「有効化」を押しましょう。
- 有効化すると、サイドメニューの中に「黄色枠」で囲まれている「お問い合わせ」が追加され、そこを開くと「桃色枠」で囲まれている「コンタクトフォーム1」が表示されます。
- コンタクトフォーム1を開くと、コンタクトフォームの編集画面へ移動します。まず初めに「オレンジ色枠」で囲まれている「コンタクトフォーム1」のタイトル名を変更します。タイトル名には「お問い合わせ」と入力しましょう。
タイトル名を変更したら「緑色枠」で囲まれている「保存」を押しましょう。
- 保存をしたら「赤色枠」で囲まれている「ショートコード」をコピーし、メモ帳などに張り付けておきましょう。
- 基本的にお問い合わせページは、固定ページで作成します。では次に「紫色枠」で囲まれている「固定ページ」を選択すると、プルダウンが開くので「オレンジ色枠」で囲まれている「新規追加」を押しましょう。
- 下記の図解は、ブロックエディターの新規追加画面です。ブロックエディターとして設定されていない方は、以前投稿した「ワードプレスにアニメーション機能をプラグインを使って設定しよう！」の中のブロックエディターの設定をご覧下さい。
では、ブロックエディター側で話ししていきます。「オレンジ色枠」で囲まれている「タイトルを追加」には、タイトル名を入力し「ブロックを選択するには「/」を入力」には、コピーしておいたショートコードを貼り付けます。
- 下記の図解を見てもお分かりのように「水色枠」で囲まれている箇所には「お問い合わせ」と入力されており「黄色枠」で囲まれている箇所には、貼り付けたショートコードの「フォーム」が表示されています。
- 次に、右上部にある「赤色枠」で囲まれている「プレビュー」を押してみましょう。すると「桃色枠」で囲まれているプルダウンが表示され、その中の「紫色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- 下記の図解は、トップページから確認した画面です。すると「お問い合わせページ」が作成されていることが分かるかと思います。基本的にお問い合わせとしてはこれで完成であり、メールのやり取りもできます。
【お問い合わせ「Contact Form 7」内のフォーム確認】
お問い合わせページは、デフォルトのままでもメールのやり取りはできますが、中には、カスタマイズしてみたいと思っている方もいるのではないでしょうか。そこで、カスタマイズ可能なボタンを紹介しておきます。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- では編集していきましょう。初めに「黄色枠」で囲まれている「お問い合わせ」にマウスを移動すると、プルダウンが開くので「オレンジ色枠」で囲まれている「コンタクトフォーム」を押しましょう。
- 次に「紫色枠」で囲まれている「編集」を開きましょう。
- 編集を開くと「桃色枠」で囲まれている「フォーム」が開きます。「水色枠」で囲まれている枠内には「label」としていくつか表示されています。「緑色枠」で囲まれている箇所は、カスタマイズした内容となります。
基本的には、次の内容がデフォルトとなります。「お名前もしくは氏名」「メールアドレス」「題名」「メッセージ本文」です。
- 上記の図解で表示されている内容をトップページから見てみた感じです。
フォーム変更(性別編)
この章では、上記の図解でカスタマイズしている箇所のやり方を解説していきます。私の方では、過去に於いて「性別」と「年齢」を追加したかったのでカスタマイズしてみました。まずは練習だと思ってやってみて下さい。
- カスタマイズする前に、実際のページを見てみましょう。「赤色線」で引かれている箇所に「性別」を表示させたいと思います。
- では、サイドメニューから「お問い合わせ」→「コンタクトフォーム」を開きます。開いたら「オレンジ色枠」で囲まれている「フォーム」を選択します。次に「緑色枠」で囲まれている枠内に「性別」を追加していきます。
その際、図解の通り先に「性別 (必須)」と入力し、改行しておきましょう。その後「水色枠」で囲まれている「ラジオボタン」を開きます。
- 次の画面が開いたら「桃色枠」で囲まれている枠内に「男性もしくは男」改行して「女性もしくは女」と入力しましょう。最後に「紫色枠」で囲まれている「タグを挿入」を押しましょう。
- すると「水色枠」で囲まれている枠内に、タグが表示されていることが確認できたら、左下にある「保存」を押して保存しましょう。
- では、実際のページで見てみましょう。「黄色枠」で囲まれている箇所に性別覧として「男性」と「女性」が追加されていることが分かるかと思います。
| 私の場合、性別覧の箇所には「男性」「女性」の他「LGBTQ」も載せています。また、ラジオボタンを使う際、性別覧だけではなく、いろんな用途で使えるのでやってみて下さい。 |
フォーム変更(年齢編)
ラジオボタンを使って、性別を追加するやり方については分かって頂けたかと思います。この章では「ドロップダウンメニュー」を使って「年齢」を追加するやり方について書いていきます。それでは見ていきましょう。
- 今回もフォームの中を触っていきます。初めに、性別の下に「緑色枠」で囲まれている枠内に予め「年齢 (必須)」と記載し、改行しておきます。次に「桃色枠」で囲まれている「ドロップダウンメニュー」を押します。
- 次の画面が開いたら「緑色枠」で囲まれている枠内に「10代、20代、30代、40代、50代」と改行しながら記載し「赤色枠」で囲まれている「タグを挿入」を押しましょう。
- タグを挿入すると、性別の下の「紫色枠」で囲まれている枠内に、タグが表示されていることが分かるかと思います。最後に、左下にある「保存」を押して保存しましょう。
- では、プレビュー画面を開いて確認してみて下さい。「紫色枠」で囲まれているように「年齢 (必須)」が表示されていることが分かるかと思います。
| ここでは「ラジオボタン」と「ドロップダウンメニュー」のみ、使ってみましたが、他にもいろいろあるので触ってみて下さい。まずは何でも触ってみることが大事です。 |
【お問い合わせ「Contact Form 7」内のメール確認】
続いては、メール内の「確認」と「設定」について書いていきますが、メールの場合、自動返信メールが使えるのでユーザーには、優しい設定となっています。但し、設定を間違えると機能しないので注意しましょう。
前回、フォームの設定方法について解説してきましたが、この章では、図解通りに真似して設定していけばキチンとメールの送受信ができるようになるので心配はいりません。それでは早速見ていきましょう。
- では「黄色枠」で囲まれている「メール」を開いて下さい。各色で選択されている箇所のみを設定していきます。設定方法については、図解下にあるボックス内をご覧下さい。
| メール内の設定 | |
|
ユーザーから、お問い合わせが届いた際、受け取る為のメールアドレスです。(私の場合、エックスサーバーで受け取る設定をしています)。 |
|
お問い合わせをしてきたユーザーの名前を表示します。 |
|
メールを受け取る際、その件名を指しています。 |
|
他のメールアドレスの追加を指しています。ここは特に触る必要はありません。 |
|
受け取るメールの内容を指しています。 |
| 基本的に、図解の通り設定していけば問題ありませんが、どうしても分からない場合、お問い合わせ頂ければ答えさせて頂きます。お問い合わせ先は「コチラ」。 | |
自動返信メールの設定方法
「Contact Form 7」には、自動返信メール機能が付いています。この機能は、ユーザーが、あなたのブログにお問い合わせした際、その内容がユーザーへも送られる機能となっているので使ってみて下さい。
自動返信メールを使う際、設定方法に間違いがあると、ユーザーに届かなくなるので正しい方法でしっかり設定するようにして下さい。下記の図解を見ながら設定すれば間違いありませんのでやってみて下さい。
- 自動返信メール機能を使うには「水色枠」で囲まれているボックス内にチェックを入れる必要があります。その後の設定方法については、図解下にあるボックス内をご覧下さい。
| 自動返信メール機能の設定 | |
|
[your-email]と入力しましょう。[your-email]以外の宛先にしてしまうと、自動返信メールがユーザーに届かなくなってしまうので気を付けて下さい。 |
|
「miブログ」のように、あなたのブログ名を入力しておきましょう。 |
|
図解のように「お問い合わせありがとうございます。」などのように、自動返信メールであることが分かる件名に設定しましょう。 |
|
「Reply-To:」の後に、あなたのメールアドレスを入力します。(私の場合、エックスサーバーで受け取る設定をしています)。 |
|
自動返信メールの中身を入力します。メッセージ本文内に入力した内容がそのまま自動返信メールとしてユーザーに送信されます。 |
| 全ての設定が終わったら、必ずテストを実施して下さい。あなたがお持ちのメールアドレス宛にメールを送って、キチンと届くかどうかの確認と、確認後は、そのメールに対し、返信してみて下さい。 | |
今回は以上となります。「ワードプレス」お問い合わせフォームの作り方！については理解できたかと思います。ブログで何らかのビジネスをおこなうのであれば必ず「お問い合わせ」は設置するようにしていきましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
