目次
後藤です。
今回はブログを運営していく上で、必要な「問い合わせフォーム」の導入の仕方について解説していきます。
私のようなビジネスブログを運営するのであれば、必ず連絡先を記載しておく必要があるからです。
なぜかというと、読者の悩みや質問を受けることもありますし、企業からオファーを受けることもあるので。
今回紹介するプラグインは「Contact Form ７」というプラグインになります。
WordPressプラグイン問い合わせフォームContact Form ７の導入方法
早速、導入方法を解説していきますね。
まず、WordPressの管理画面から「プラグイン」→「新規追加」をクリック。
次に、検索欄に「Contact Form ７」と入力し、検索結果にContact Form ７と表示されたら「今すぐインストール」をクリックします。
インストールが完了したら「有効化」をクリック。
これで、インストールは完了です。
次に、WordPressの管理画面から「お問い合わせ」→「新規追加」をクリックするか「コンタクトフォーム」をクリックして、既存のものを編集してください。
ここからは「新規追加」、「コンタクトフォーム」どちらでも同じ進め方になります。
初期設定のままでも大丈夫であればそのまま進みましょう。
上の画像は初期設定のままです。
ちなみに、編集できる項目はそれぞれ
- フォーム：お問い合わせのページの入力項目の設定
- メール：ユーザーからのお問い合わせ受診に関する設定
- メッセージ：ユーザーがお問い合わせメッセージを送信した後に表示するメッセージの設定
- その他の設定：コードを追加して自由にカスタマイズできる設定
となっていますので、お好みで設定をすることが可能です。
もちろん、初期設定のままでも大丈夫なのですが必ず１つだけチェックしておくことがあります。
それは「メール」の項目です。
問い合わせがあった際に届くアドレスは専用のメールアドレスに変更しておきましょう。
なぜなら、問い合わせ専用のメールアドレスにしておくことで、問い合わせがあったことにも早く気づけますし、対応も早くできます。
「メール」をクリック。
「送信先」に専用のメールアドレスを入力。
設定が完了したら下にある「保存」をクリックで完了です。
保村をクリックしたら、赤枠の「ショートコード」をコピーし、記事に問い合わせフォームを埋め込んでいきます。
WordPressプラグイン問い合わせフォームContact Form ７を記事に埋め込む方法
お問い合わせフォームを設置するのは、「固定ページ」でも、通常記事の「投稿」でも大丈夫です。
この記事では、「固定ページ」で説明していきます。
WordPressの管理画面から「固定ページ」→「新規追加」をクリック。
先ほどコピーした「ショートコード」を本文に貼り付けます。
「プレビュー」でどのように表示されるか確認してみましょう。
このように表示されました。
そして、一度自分のメールアドレスに届くか各項目を入力し、テスト送信してみてください。
たまにエラーになることもありますし、メールが届かないということもあります。
なので、必ずテストをして確認していきましょう。
WordPressプラグイン問い合わせフォームContact Form ７をカスタマイズする
さて、Contact Form７の基本的な設定や仕組みなどわかったところで、もう少し凝ったフォームの作り方をみていきましょう。
問い合わせフォームContact Form ７カスタマイズその１
まずは、「固定ページ」か通常記事の「投稿」に作成した問い合わせフォームに文章を付け足しましょう。
ちなみに、私は下記のように文章を添えています。
文章がある方が丁寧ですし、悩みがあって相談したい読者も安心します。
「必ずこうじゃなきゃダメ」というものはないので、あなたのオリジナルで作成していきましょう。
私の場合は、「メールアドレスの間違いがないように」とお伝えしています。
問い合わせフォームContact Form ７カスタマイズその２：ドロップダウンメニュー
問い合わせフォームは初期設定のままでもいいのですが、私は下記のように設定しています。
「ドロップダウンメニュー」を使えばこのようにオリジナルの問い合わせフォームを作ることができるのです。
「フォーム」の「ドロップダウンメニュー」をクリック。
「項目タイプ」にチェックを入れると必須項目になります。
「名前」タグの名前になりますが、特に変更する必要はありません。
「オプション」に各項目を入力しますが、ここは必ず１行ずつ改行して入力。
「複数選択を可能する」にチェックを入れると、いくつでも選択することができ、「空欄の項目を先頭に挿入する」にチェックを入れると選択する前の項目が「−−−」と表示されます。
「ID属性」と「クラス属性」は、cssでカスタマイズする場合に任意の文字列を入力していくので、空白のままで大丈夫です。
最後に「タグを挿入」で完了。
お問い合わせフォームで確認するとこのように表示されるようになりました。
ちなみに、「質問内容」というのは <p>質問内容<br /> とタグを使えば表示されます。
そして、「メール」の設定も忘れてはいけません。
デフォルトのままだと、「メッセージ本文」しか表示されず、せっかく設定した、「ドロップダウンメニュー」が表示されないままメールが届くことになります。
「お問い合わせフォーム」の「メール」編集画面で、「メッセージ本文」に赤枠で囲っている[title]を挿入しておきましょう。
これで、読者の方が選択したドロップダウンメニューがメールで表示されるようになります。
問い合わせフォームContact Form ７カスタマイズその３：チェックボックス、ラジオボタン
Contact Form ７のチェックボックスを使えば、アンケートフォームを作ることもできます。
例えばこういうのですね。
アンケートは結構便利なのであなたのブログやサイトにも設置してみてください。
アンケートフォームを新規で作成する場合は、WordPressの管理画面から「お問い合わせ」→「新規追加」をクリック。
「フォーム」の「チェックボックス」をクリックします。
「項目タイプ」にチェックを入れると必須項目になります。
「名前」タグの名前になりますが、特に変更する必要はありません。
「オプション」に各項目を入力しますが、ここは必ず１行ずつ改行して入力。
「チェックボックを排他化する」にすると１つしか選択できなくなるようにできるのでチェック。
「ラベルを前に、チェックボックスを後に配置する」はチェックボックスが後ろにきて、「個々の項目をlabel要素で囲む」は文字列をクリックしてもチェックが入るようになるので、必要に応じて使いましょう。
ドロップダウンメニューと同じで「ID属性」と「クラス属性」は、cssでカスタマイズする場合に任意の文字列を入力していくので、空白のままで大丈夫です。
最後に「タグを挿入」で完了です。
「保存」をして、「ショートコード」を「固定ページ」か通常記事の「投稿」に貼り付けます。
この様に表示されればOKです。
チェックボックスの前の「ネットビジネスで稼ぎたい金額」は <p>ネットビジネスで稼ぎたい金額<br /> タグを使えば表示されます。
ちなみに、ラジオボックスの設定の仕方も基本同じです。
表示はこのようにされます。
こちらも「ドロップダウンメニュー」同様、「メール」の「メッセージ本文」に各タグを挿入しましょう。
私の場合ですと、アンケートフォームに２つのチェックボックスを追加しているので、赤枠の２つのタグを「メッセージ本文」に追加することで、アンケート結果が表示されるようになります。
まとめ
Contact Form ７の導入方法と設定方法、簡単なカスタマイズについて解説しました。
冒頭でもお伝えしたように、問い合わせフォームは設置しておいたほうが信頼度が違ってきますし、ユーザーに親切なのでブログ立ち上げ時には導入していきましょう。
何か相談、質問等あれば気軽に連絡ください。
