【スマホ】WordPressブログお問い合わせフォームの作り方「Contact Form 7」

WordPressのお問い合わせフォームを無料で作る方法「Contact Form 7」
悩む理由、
WordPressブログお問い合わせフォームの作り方を知りたい!収益化が目的でもブログにお問い合わせフォーム設置は必要でしょうか?作り方も教えてほしい!

こんな悩みを解決します。

ブログで収益化を目指すなら、お問い合わせフォームの設置は必須です。仕事の依頼や読者からの疑問に答える窓口としても、エンゲージメントが高まるお問い合わせフォームは機会損失を防ぐためにも導入するべきです。

しっかりとブログを運営している証拠にもなります。独自ドメインでWordPressでブログを始めるなら信用を大切にしましょう。

お問い合わせフォームで初心者におすすめの「Contact Form 7」の設置手順を紹介します。

しかも、無料で利用できるので設置しない理由がありません。

この記事の内容

  • お問い合わせフォームの作り方「Contact Form 7」
  • お問い合わせフォームの設置「Contact Form 7」
  • お問い合わせを設置する理由

この記事を読むことで得られる利益

  • エンゲージメントが高まるブログの連絡先ができる
  • お仕事依頼の問い合わせから収益化が期待できる
  • クローズドASP案件の問い合わせから収益化が期待できる

お問い合わせフォームの作り方「Contact Form 7」

今からブログを始める初心者がwordpressブログ開設に必要なもの

WordPressブログでお問い合わせフォームを設置するには、初心者に人気の「Contact Form 7」がおすすめです。

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

  1. Contact Form 7のインストール
  2. お問い合わせフォームの作成
  3. お問い合わせフォームの設定
  4. 迷惑メール対策reCAPTCHAの導入
  5. お問い合わせフォームの設置

Contact Form 7のインストール

WordPress管理画面より「プラグイン」をクリックします。

プラグイン管理メニューを押す。
プラグイン管理メニューを押す。

画面上部の「新規追加」をクリック。

新規追加を押す
新規追加を押す

検索窓に「contact form 7」と入力します。

検索窓にcontactform7と入力する
検索窓に「contact form7」と入力する

「今すぐインストール」をクリックすると、しばらくして「有効化」に変わりますのでクリックします。

contact-form7の有効化をクリック
contact-form7の「有効化」をクリック

「プラグインを有効化しました。」と表示されれば、インストール完了です。

お問い合わせフォーム作成「Contact Form 7」

お問い合わせフォーム作成手順3つ

  1. フォーム設定
  2. メール設定
  3. メッセージ設定

※フォームとは・・・IT分野では、Webページなどで、利用者が入力する項目をわかりやすくデザインした様式のこと。

1.フォーム設定

まずは、フォーム設定でお問い合わせに必要な項目を選びます。

管理画面の左メニューに追加された「お問い合わせ」→「コンタクトフォーム1」をクリック。

「コンタクトフォーム1」をクリック
「コンタクトフォーム1」をクリック

お問い合わせフォームの編集画面が表示されます。スマホで編集されている方は下部へスクロールすると表示されます。

フォーム設定、初期状態でも必要項目がそろっています。
フォーム設定、初期状態でも必要項目がそろっています。

お問い合わせで必要な項目4つ

  1. 氏名
  2. メールアドレス
  3. 題名
  4. メッセージ本文

初期状態で設定されています。そのまま利用しましょう。

2.メール設定

自動メールを設定してみよう
自動メールを設定してみよう

メール設定2つ

  • 自動通知メール
  • 自動返信メール

ブログにお問い合わせが入ったら、「ブログ管理者に通知するメール」と、お問い合わせをいただいた本人への「自動返信メール」が必要です。

自動通知メール設定

メール」タブをクリックします。メール設定、初期状態でも必要な設定がされています。

メール設定、初期状態でも必要な設定がされています。
メール設定、初期状態でも必要な設定がされています。

ブログに問い合わせが入った場合にWordPressブログから管理者宛に送信するメールの内容となります。管理者があなただけなら、あなた向けに送信されるメール内容です。

下記の表で項目ごとの設定内容を記載します。必要であれば変更を行ってください。

初期のままでも機能しますので初心者でも安心です。

通知メール設定内容

①送信先
問い合わせがきたときに受け取るメールアドレス(TO)を設定する。初期設定では「WordPress管理者アドレス」が設定されています。
②送信元
送信元メールアドレス(FROM)を設定。初期設定では「wordpress@あなたのドメイン」が設定されています。※@あなたのドメインを含めましょう。
③題名
通知メールタイトルはわかりやすく管理しやすい件名にしましょう。
④追加ヘッダー
基本このまま運用しましょう。
⑤メッセージ本文
このままでもOKですが、改行などで見やすく設定してもよいです。
通知メール設定内容

自動返信メール設定

必ず行ってほしい設定が自動返信メールです。自動返信を行うことで受付が完了している証をつたえましょう。

本人としては、お問い合わせがちゃんと送信できているのか不安です。

自動返信メールを利用するには、メール(2)を利用にチェックをします。初期設定状態でも利用可能です。

自動返信メールの設定
自動返信メールの設定

返信メール設定内容

①送信先
自動返信先のメールアドレスです。初期設定では「your-email」が設定されています。そのまま運用します。
②送信元
読者が受け取るメールに送信元として記載されます。初期設定では「wordpress@あなたのドメイン」が設定されています。※@あなたのドメインを含めましょう。
③題名
読者が受け取るメールタイトルは「お問い合わせありがとうございます」など読者にわかりやすい件名にしましょう。
④追加ヘッダー
基本このまま運用しましょう。読者からの返信を担当別に管理したい場合に設定します。
⑤メッセージ本文
このままでもOKですが、とても簡素です。返信時期など読者を安心させる文を追加編集しましょう。
返信メール設定内容

メッセージ設定

メッセージ設定では、メールが正常に送信された通知と、不適切な入力やエラーが発生した場合にメールフォームに表示させます。

メッセージ設定項目
メッセージ設定項目

基本そのままで運用しましょう。最後に「保存」をクリックします。

メッセージ内容:初期設定メッセージと【例文】おすすめメッセージ

メッセージが正常に送信された
ありがとうございます。メッセージは送信されました。例文「お問い合わせありがとうございます。担当よりご連絡いたします。お時間をいただく場合がありますことをご了承ください。」
メッセージの送信に失敗した
メッセージの送信に失敗しました。後でまたお試しください。例文「通信環境等の理由によりメッセージの送信ができません。セキュリティ管理者やプロバイダ等への確認を行ってください。」
入力内容に不備が見つかった
入力内容に問題があります。確認して再度お試しください。例文「機種依存文字をお使いの場合には送信できません」
送信がスパムと見なされた
メッセージの送信に失敗しました。後でまたお試しください。例文「メーッセージに不備があり送信できません。改めて送信をお試しください。」
承諾が必要な項目が承諾されていない
メッセージを送信する前に承諾確認が必要です。例文「※のついた必要次項への承諾確認をお願いします。」
入力必須の項目が入力されていない
入力してください。例文「※のついた必要事項の入力をお願いします。」
ユーザー入力が最大許容文字数を超える項目がある
入力されたテキストが長すぎます。例文「入力エリアは最大〇〇文字までとなっております。再度編集をお願いいたします。」
ユーザー入力が最小許容文字数に満たない項目がある
入力されたテキストが短すぎます。例文「入力エリアは〇〇文字以上のご記載をお願い致します。」
ファイルのアップロードが何らかの理由により失敗している
ファイルのアップロード時に不明なエラーが発生しました。例文「通信環境等の理由によりメッセージの送信ができません。セキュリティ管理者やプロバイダ等への確認を行ってください。」
アップロードされたファイルが許可されたファイル形式に適合しない
この形式のファイルはアップロードできません。例文「サポートされていないファイル形式となります。対応形式〇〇、〇〇、〇〇」
アップロードされたファイルが大きすぎる
アップロードされたファイルが大きすぎます。例文「アップロードファイルサイズ最大〇〇〇〇までとなっております。」
ファイルのアップロードが PHP のエラーにより失敗している
ファイルのアップロード中にエラーが発生しました。例文「通信環境等の理由によりメッセージの送信ができません。時間をおいても同様のエラーが発生する場合には、セキュリティ管理者やプロバイダ等への確認を行ってください。」
入力された日付の形式が正しくない
YYYY-MM-DD の形式で日付を入力してください。例文「西暦・月・日での入力をお願い致します。」
日付が最小制約日より小さい
入力された日付が早すぎます。例文「〇〇日以内での入力をお願いします。」
日付が最大制約日より大きい
入力された日付が遅すぎます。例文「〇〇日以内での入力をお願いします。」
入力された数値の形式が正しくない
数値を入力してください。例文「半角数字〇〇文字以内で入力してください。」
数値が最小制約値より小さい
入力された数値が小さすぎます。例文「〇〇以上での入力をお願いします。」
数値が最大制約値より大きい
入力された数値が大きすぎます。例文「〇〇以下での入力をお願いします。」
クイズに対する正しい答えが入力されなかった
クイズの答えが正しくありません。
入力されたメールアドレスの形式が正しくない
メールアドレスを入力してください。例文「半角英数字での入力をお願いします。」
入力された URL の形式が正しくない
URL を入力してください。例文「利用できない文字形式が含まれています。半角英数字での入力をお願いします(機種依存文字等は利用できません)」
入力された電話番号の形式が正しくない
電話番号を入力してください。例文「ハイフンを除いた数字のみでご入力ください。」
初期設定メッセージと【例文】おすすめメッセージ

以上でContact Form 7のメール設定は完了です。

お問い合わせフォーム設置「Contact Form 7」

お問い合わせフォームの設置方法をご紹介します。

お問い合わせフォーム設置手順4つ

  1. 「コンタクトフォーム1」のショートコードをコピーする
  2. 「お問い合わせ」固定ページを新規作成する
  3. ショートコードを貼り付ける
  4. 迷惑メール対策reCAPTCHAの利用設定

「コンタクトフォーム1」のショートコードをコピーする

WordPress管理画面→「お問い合わせ」をクリック

WordPress管理画面→「お問い合わせ」をクリック
WordPress管理画面→「お問い合わせ」をクリック

スマホでWordPressを設定しているなら、「お問い合わせ」→「コンタクトフォーム」をクリック

スマホでWordPressを設定しているなら、「お問い合わせ」→「コンタクトフォーム」をクリック
スマホでWordPressを設定しているなら、「お問い合わせ」→「コンタクトフォーム」をクリック

コンタクトフォーム脇のショートコード文字列をクリック。スマホでWordPressを設定しているなら、「▼」をクリックするとショートコードが現れますので文字列をクリック

スマホでWordPressを設定しているなら、「▼」をクリックするとショートコードが現れますので文字列をクリック

ショートコードをコピーします。windowsは「ctrl + c」。Macは「command + C」。スマホは長押しでコピーを選ぶ。

ショートコードをコピーします。windowsは「ctrl + c」。Macは「command + C」。スマホは長押しでコピーを選ぶ。
ショートコードをコピーします。windowsは「ctrl + c」。Macは「command + C」。スマホは長押しでコピーを選ぶ。

次に、固定ページを新規作成して「お問い合わせ」ページを作成します。

「お問い合わせ」固定ページを新規作成する

スマホでお問い合わせフォーム作成する画像も紹介します。

WordPress管理画面→「固定ページ」→「新規追加」をクリック。スマホでWordPress設定をしている方は、左上のハンバーガーメニュー(三本線)のメニューを開きます。

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

ショートコードを貼り付ける

タイトルに「お問い合わせ」と入力する。タイトル下のブロックへ先程コピーしたショートコードを貼り付ける。

タイトル「お問い合わせ」と入力。下ブロックにショートコードを貼り付ける
タイトル「お問い合わせ」と入力。下ブロックにショートコードを貼り付ける

下書き保存」をクリックする。スマホは「クラウドマーク」をクリックする。

「下書き保存」をクリックする。スマホはクラウドマークをクリックする。
「下書き保存」をクリックする。スマホはクラウドマークをクリックする。

投稿パネル」に切り替えてパーマリンクをクリック。URLスラッグのお問い合わせを「contact」と上書き入力する。

URLスラッグのお問い合わせを「contact」と上書き入力する。

スマホでWordPressを設定している場合は、「設定アイコン」をクリック

パーマリンクを開いて、URLスラッグに「contact」と上書き入力する

パーマリンクが変更できない場合の対処方法

WordPress管理画面→「設定」→「パーマリンク」をクリック

WordPress管理画面→「設定」→「パーマリンク」をクリック

パーマリンク設定→「共通設定」→「投稿名にチェック」→「変更を保存」をクリック

パーマリンク設定→「共通設定」→「投稿名にチェック」→「変更を保存」をクリック
パーマリンク設定→「共通設定」→「投稿名にチェック」→「変更を保存」をクリック

※初期設定のままだとURLを好みに設定できません。投稿名とすることで任意にURLを設定できるようになります。

プレビュー」をクリック

プレビューをクリック

お問い合わせフォームの完成です。

お問い合わせフォームの完成です。
お問い合わせフォームの完成です。

このまま利用も可能ですが、実際の運用を考えると迷惑メール(スパムメール)が心配です。

Googleの高度なスパムフィルターを紹介します。無料で利用できます。

迷惑メール対策reCAPTCHAの利用設定

お問い合わせフォームを迷惑メールから防御するには、GoogleサービスreCAPTCHAがおすすめです。

使用するにはGoogleアカウントが必要となりますので用意してから進めて行きましょう。

reCAPTCHAの設定手順2つ

  1. reCAPTCHA登録キーの取得
  2. reCAPTCHAをContactForm7へ設定する

reCAPTCHA登録キーの取得

reCAPTCHAの公式サイトへアクセスします。「v3 Admin Console」をクリック

「v3 Admin Console」をクリック
「v3 Admin Console」をクリック

+」作成をクリック

「+」作成をクリック
「+」作成をクリック

サイト情報の登録

サイト情報を登録する
サイト情報を登録する
ラベル
後でサイトを管理するにもドメイン名でラベル作成をおすすめします。
reCAPTCHAタイプ
reCAPTCHAタイプは最新のV3を選択します。
ドメイン
あなたのドメインを入力します。例:example.com
オーナー
ご自身のGoogleアカウント
reCAPTCHA利用条件に同意する
規約を読みチェックを入れます。
サイト情報登録で必要な項目

必要事項を入力したら「送信」をクリック

reCAPTCHAをContactForm7へ設定する」で利用します。登録キーをメモ帳などにコピーしましょう。

  • サイトキー
  • シークレットキー

登録しただけでは利用できませんので、次項で設定を進めます。

reCAPTCHAをContactForm7へ設定する

Contact Form 7でreCAPTCHAを利用できるように設定します。

WordPress管理画面→お問い合わせ→「インテグレーション」をクリック

WordPress管理画面→お問い合わせ→「インテグレーション」をクリック
WordPress管理画面→「お問い合わせ」→「インテグレーション」をクリック

外部 API とのインテグレーションを下へスクロールしてreCAPTCHA→「インテグレーションのセットアップ」をクリック

スマホでWordPress設定画面を記載しています。

reCAPTCHA→「インテグレーションのセットアップ」をクリック
reCAPTCHA→「インテグレーションのセットアップ」をクリック

サイトキー」「シークレットキー」を入力して「変更を保存」をクリック

「サイトキー」「シークレットキー」を入力して「変更を保存」をクリック
サイトキー」「シークレットキー」を入力して「変更を保存」をクリック

ブログの画面右下に「reCAPTCHAロゴ」が表示されると設定完了です。

ブログの画面右下に「reCAPTCHAロゴ」が表示されると設定完了です。
ブログの画面右下に「reCAPTCHAロゴ」が表示されると設定完了です。

実際に、テスト送信をしてみましょう。

お問い合わせフォームを設置する理由

ブログに連絡先ができる

独自ドメインで運用されているサイトがあるならば、お問い合わせフォームの設置は必須と考えましょう。設置しないことのデメリットの方があまりにも大きいからです。一言で表現するならば「機会損失」です。お問い合わせフォームが設置されていない。分かりづらいだけで連絡が途絶えるからですね。信用のためにもお問い合わせフォームは設置しましょう。

お仕事依頼の問い合わせが期待できる

仕事の幅が増えることは嬉しいことです。思いもよらないところからオファーがきたりすることもあります。副業や独立を考える方には実績も含め受付窓口は必須ですね。

内容としては、

  • 取材依頼
  • 仕事の発注
  • 読者からの質問
  • 広告掲載の依頼

などのような連絡が届きますから、長く運用するとさらに可能性が広がります。

クローズドASP案件の問い合わせが期待できる

ブログをしっかりと運用していると、クローズドASP案件の問い合わせが来ることがあります。お問い合わせフォームを設置することで信用へつながる効果が期待できます。

まとめ

お問い合わせフォームの作り方、お問い合わせフォームの設置、お問い合わせを設置する理由と紹介しました。

注意点として「迷惑メール対策を必ず実施すること」ここだけは忘れずに対策を行いましょう。

お問い合わせフォームを設置するメリット

  • ブログに連絡先ができる
  • お仕事依頼の問い合わせが期待できるようになる
  • クローズドASP案件の問い合わせが期待できる

初心者でも10分程度でかんたんに設置できますので、後回しにせずブログ運営初期からお問い合わせフォームを設置しましょう。

お問い合わせフォームを設置しないだけで、あなたの知らない「機会損失」が発生しているかもしれないのです。

-WordPress, WordPressの使い方, WordPressプラグイン, ブログ
-