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

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

 

後藤です。

 

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

 

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

 

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

 

今回紹介するプラグインは「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の導入方法と設定方法、簡単なカスタマイズについて解説しました。

 

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

 

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

後藤に連絡する

 

自分ライフ
こちらになんでも掲載できます

もしこの記事が役に立った!と思われたら、

SNS等でシェアしていただけるとすごく嬉しいです。(下のボタンからシェアできます)

インターネットを活用した仕組みを構築し、毎月100万円以上の自動収益を得て、

 

「自分らしい生き方」

 

を送る方法を無料メール講座で完全公開!

 

また私の無料メール講座に登録することで、

 

完全オリジナルPDF

【最短距離で成功するネットビジネスレポート】

【数分の作業で数万円から10万円以上稼ぐことが可能な秘密の方法】

 

計127ページをプレゼントします!

 

これらのPDFを読むことで

 

「どうしたらネットビジネスで稼げるのか?」

 

を「思考と実践」することにより、実際にネットビジネスで稼いでもらいます。

 

どんな内容かと言うと・・・

 

1、人生を変える?最短で稼ぐ為に今するべき3つのこと

2、覚えたら一生使えるネットビジネスの本質について

3、考え方を変えるだけでネットで稼げるようになる?その考え方を公開

4、2ヶ月で30万円達成!最短距離で成功して自由になる道筋を教えます

 

など、余すことなく公開してます!

 

また無料メール講座の方では、

 

・初期費用0から始めるネットビジネスの紹介

・家事の片手間で夫に内緒で口座残高をみるみる増やす副業

・昇給するよりも早く毎月3万円収入を増やす方法

・副業が本業を超える日!最高の達成感を味わう生き方

・お金から解放された自由らしい人生

 

などなど、

 

『あなたの仕事に対する価値観、人生に対する価値観をも変えてしまう』

 

ほどの考え方やノウハウを私のメール講座で公開してきます。

 

上記のプレゼントは、人数限定で配布させていただきますので

規定の人数に達し次第配布を終了します。

※予告なく終了する場合がございます。予めご了承ください。

 

下記にメール講座登録フォームがありますので、

 

1、お名前(苗字のみ、ニックネーム可)

2、メールアドレス

 

を入力後、「確認する」ボタンをクリックしてください。

 

折り返し、プレゼント付きのメールを送信しています。

 





※返信がこない場合は、一度迷惑メールをご確認ください。

それでもメールが届かない場合、メールアドレスが間違っている可能性がありますので、再度入力をして登録し直してください

コメントを残す

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