WordPressプラグイン 問い合わせフォームの導入【Contact Form 7】

WordPressプラグイン問い合わせフォームの導入【Contact Form7】
Pocket

 

後藤です。

 

今回はブログを運営していく上で、必要な「問い合わせフォーム」の導入の仕方について解説していきます。

 

私のようなビジネスブログを運営するのであれば、必ず連絡先を記載しておく必要があるからです。

 

なぜかというと、読者の悩みや質問を受けることもありますし、企業からオファーを受けることもあるので。

 

今回紹介するプラグインは「Contact Form 7」というプラグインになります。

 

WordPressプラグイン問い合わせフォームContact Form 7の導入方法

 

早速、導入方法を解説していきますね。

 

コンタクトフォーム説明画像1

 

まず、WordPressの管理画面から「プラグイン」→「新規追加」をクリック。

 

コンタクトフォーム説明画像2

 

次に、検索欄に「Contact Form 7」と入力し、検索結果にContact Form 7と表示されたら「今すぐインストール」をクリックします。

 

インストールが完了したら「有効化」をクリック。

 

これで、インストールは完了です。

 

コンタクトフォーム説明画像3

 

コンタクトフォーム説明画像4

 

次に、WordPressの管理画面から「お問い合わせ」→「新規追加」をクリックするか「コンタクトフォーム」をクリックして、既存のものを編集してください。

 

ここからは「新規追加」、「コンタクトフォーム」どちらでも同じ進め方になります。

 

初期設定のままでも大丈夫であればそのまま進みましょう。

 

コンタクトフォーム説明画像8

 

上の画像は初期設定のままです。

 

ちなみに、編集できる項目はそれぞれ

 

  • フォーム:お問い合わせのページの入力項目の設定
  • メール:ユーザーからのお問い合わせ受診に関する設定
  • メッセージ:ユーザーがお問い合わせメッセージを送信した後に表示するメッセージの設定
  • その他の設定:コードを追加して自由にカスタマイズできる設定

 

となっていますので、お好みで設定をすることが可能です。

 

もちろん、初期設定のままでも大丈夫なのですが必ず1つだけチェックしておくことがあります。

 

それは「メール」の項目です。

 

問い合わせがあった際に届く、アドレスは専用のメールアドレスに変更しておきましょう。

 

なぜなら、問い合わせ専用のメールアドレスにしておくことで、問い合わせがあったことにも早く気づけますし、対応も早くできます。

 

コンタクトフォーム説明画像6

 

「メール」をクリック。

 

「送信先」に専用のメールアドレスを入力。

 

設定が完了したら下にある「保存」をクリックで完了です。

 

コンタクトフォーム説明画像7

 

保村をクリックしたら、赤枠の「ショートコード」をコピーし、記事に問い合わせフォームを埋め込んでいきます。

 

WordPressプラグイン問い合わせフォームContact Form 7を記事に埋め込む方法

 

お問い合わせフォームを設置するのは、「固定ページ」でも、通常記事の「投稿」でも大丈夫です。

 

この記事では、「固定ページ」で説明していきます。

 

コンタクトフォーム説明画像9

 

WordPressの管理画面から「固定ページ」→「新規追加」をクリック。

 

コンタクトフォーム説明画像10

 

先ほどコピーした「ショートコード」を本文に貼り付けます。

 

「プレビュー」でどのように表示されるか確認してみましょう。

 

コンタクトフォーム説明画像11

 

このように表示されました。

 

そして、一度自分のメールアドレスに届くか各項目を入力し、テスト送信してみてください。

 

たまにエラーになることもありますし、メールが届かないということもあります。

 

なので、必ずテストをして確認していきましょう。

 

WordPressプラグイン問い合わせフォームContact Form 7をカスタマイズする

 

さて、Contact Form7の基本的な設定や仕組みなどわかったところで、もう少し凝ったフォームの作り方をみていきましょう。

 

問い合わせフォームContact Form 7カスタマイズその1

まずは、「固定ページ」か通常記事の「投稿」に作成した問い合わせフォームに文章を付け足しましょう。

 

ちなみに、私は下記のように文章を添えています。

 

タクトフォーム説明画像12

 

文章がある方が丁寧ですし、悩みがあって相談したい読者も安心します。

 

「必ずこうじゃなきゃダメ」というものはないので、あなたのオリジナルで作成していきましょう。

 

私の場合は、「メールアドレスの間違いがないように」とお伝えしています。

 

問い合わせフォームContact Form 7カスタマイズその2:ドロップダウンメニュー

問い合わせフォームは初期設定のままでもいいのですが、私は下記のように設定しています。

 

タクトフォーム説明画像13

 

「ドロップダウンメニュー」を使えばこのようにオリジナルの問い合わせフォームを作ることができるのです。

 

タクトフォーム説明画像15

 

「フォーム」の「ドロップダウンメニュー」をクリック。

 

タクトフォーム説明画像16

 

「項目タイプ」にチェックを入れると必須項目になります。

 

「名前」タグの名前になりますが、特に変更する必要はありません。

 

「オプション」に各項目を入力しますが、ここは必ず1行ずつ改行して入力。

 

「複数選択を可能する」にチェックを入れると、いくつでも選択することができ、「空欄の項目を先頭に挿入する」にチェックを入れると選択する前の項目が「−−−」と表示されます。

 

「ID属性」と「クラス属性」は、cssでカスタマイズする場合に任意の文字列を入力していくので、空白のままで大丈夫です。

 

最後に「タグを挿入」で完了。

 

タクトフォーム説明画像14

 

お問い合わせフォームで確認するとこのように表示されるようになりました。

 

ちなみに、「質問内容」というのは <p>質問内容<br /> とタグを使えば表示されます。

 

そして、「メール」の設定も忘れてはいけません。

 

デフォルトのままだと、「メッセージ本文」しか表示されず、せっかく設定した、「ドロップダウンメニュー」が表示されないままメールが届くことになります。

 

タクトフォーム説明画像21

 

「お問い合わせフォーム」の「メール」編集画面で、「メッセージ本文」に赤枠で囲っている[title]を挿入しておきましょう。

 

これで、読者の方が選択したドロップダウンメニューがメールで表示されるようになります。

 

問い合わせフォームContact Form 7カスタマイズその3:チェックボックス、ラジオボタン

Contact Form 7のチェックボックスを使えば、アンケートフォームを作ることもできます。

 

タクトフォーム説明画像20

 

例えばこういうのですね。

 

アンケートは結構便利なのであなたのブログやサイトにも設置してみてください。

 

タクトフォーム説明画像17

 

アンケートフォームを新規で作成する場合は、WordPressの管理画面から「お問い合わせ」→「新規追加」をクリック。

 

タクトフォーム説明画像18

 

「フォーム」の「チェックボックス」をクリックします。

 

タクトフォーム説明画像19

 

「項目タイプ」にチェックを入れると必須項目になります。

 

「名前」タグの名前になりますが、特に変更する必要はありません。

 

「オプション」に各項目を入力しますが、ここは必ず1行ずつ改行して入力。

 

「チェックボックを排他化する」にすると1つしか選択できなくなるようにできるのでチェック。

 

「ラベルを前に、チェックボックスを後に配置する」はチェックボックスが後ろにきて、「個々の項目をlabel要素で囲む」は文字列をクリックしてもチェックが入るようになるので、必要に応じて使いましょう。

 

ドロップダウンメニューと同じで「ID属性」と「クラス属性」は、cssでカスタマイズする場合に任意の文字列を入力していくので、空白のままで大丈夫です。

 

最後に「タグを挿入」で完了です。

 

「保存」をして、「ショートコード」を「固定ページ」か通常記事の「投稿」に貼り付けます。

 

タクトフォーム説明画像20

 

この様に表示されればOKです。

 

チェックボックスの前の「ネットビジネスで稼ぎたい金額」は <p>ネットビジネスで稼ぎたい金額<br /> タグを使えば表示されます。

 

ちなみに、ラジオボックスの設定の仕方も基本同じです。

 

タクトフォーム説明画像21

 

表示はこのようにされます。

 

こちらも「ドロップダウンメニュー」同様、「メール」の「メッセージ本文」に各タグを挿入しましょう。

 

タクトフォーム説明画像22

 

私の場合ですと、アンケートフォームに2つのチェックボックスを追加しているので、赤枠の2つのタグを「メッセージ本文」に追加することで、アンケート結果が表示されるようになります。

 

まとめ

 

Contact Form 7の導入方法と設定方法、簡単なカスタマイズについて解説しました。

 

冒頭でもお伝えしたように、問い合わせフォームは設置しておいたほうが信頼度が違ってきますし、ユーザーに親切なのでブログ立ち上げ時には導入していきましょう。

 

何か相談、質問等あれば気軽に連絡ください。

後藤に連絡する

 

mail
こちらになんでも掲載できます

コメントを残す

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