ブログのお問い合わせページを3ステップで作る方法【Contact Form 7】

このような疑問にブロガーの僕から回答です。

当ブログにおいてもありがたいことに、月に数件企業の方からお問い合わせフォームよりご連絡を頂くことがあります。

フォームとしては最低限の構成にすることで入力する側がスムーズに連絡しやすくしたりなど少し工夫もありです。

作成方法を見ていきましょう！

記事で得られること

• お問い合わせフォームの必要性
• プラグインを使ってお問い合わせフォームを作る方法
• お問い合わせフォームをサイトに設置する手順

実績と信頼性

コンタクトフォームがあるとサイトの信頼度が向上する

コンタクトフォームを作成するメリットと必要性に関してみていきましょう。

ブログサイトを作った直後でコンタクトフォームを作っていない人などはこれから紹介するメリットを参考に作ってみてください。

【メリット】お問い合わせフォーム作る意味は？

お問い合わせフォームを作る利点は次の3つになります。

1. 企業の担当者から直接お問い合わせがある
2. アフィリエイト社からのお問い合わせ
3. サイトのSEO対策と信頼性向上

お問い合わせフォームはサイトを経由してブロガーに対してメールを送るようなイメージだと思ってください。

企業の担当者様から直接仕事依頼が来ることがあったりします。

特にライティング関係の仕事が多い印象です。他にも、アフィリエイトの直接契約のご連絡なども頂きます。

また、サイトの信頼性の向上にも大きく貢献します。サイトに訪れたユーザーからするとお問い合わせページがないのは少し不審に思う方もいらっしゃいます。

こういった理由の他にもSEO的にもサイト全体の評価が下がる傾向にあります。

【Contact Form 7】プラグインの特徴

「Contact Form 7」はWordPressにインストールして指定のコードを固定ページに追加するだけでお問い合わせフォームを数ステップほどで作成することが出来るプラグインの一つです

プラグインとは追加と削除がいつでも可能なプログラムのセットのようなもの

アフィリエイトブログで有名なブロガーの方もこちらのプラグインを使用しているので安心ですね。

【Contact Form 7】プラグインの導入

ここからは実際に導入する手順を解説していきます。

簡単に出来るのでインストールだけでも終わらしておきましょう。

Contact Form 7をダウンロードする

ワードプレスの基本画面から「プラグイン」＞「新規追加」の順にクリックします。

「Contact Form 7」と入力して対象のプラグインを「今すぐインストール」＞「有効化」をクリックします。

たったこれだけですね。

次はカスタマイズ方法を解説します。

【Contact Form 7】プラグインのカスタマイズ

ここではコンタクトフォーム内で使用される要素の細かい設定を行いますが、

初期設定の状態のままでも使用可能な為、次の章から読み進めてもらってもOKです。

コンタクトフォームのカスタマイズを行う【フォーム】

プラグインの有効化が完了したら管理画面に「お問い合わせ」が追加されます。

「コンタクトフォーム1」をクリックして詳細設定を行っていきます。

コンタクトフォームに使用する要素としては次の4つですね。

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

既にデフォルトでこれらの要素は設定済みになるので大きく変更はしなくてOKです。

お問い合わせをするときの手間や手数を出来るだけ少なくし、お問い合わせのハードルを低くするためですね。

最低限でOKです。

コード部分拡大

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

コンタクトフォームのカスタマイズを行う【メール】

こちらも基本的に初期設定のまま使用可能です。

コンタクトフォームのカスタマイズを行う【メッセージ】

こちらも初期設定のままでOKです。

ユーザーがお問い合わせフォームを利用して送信したときに表示されるメッセージ内容です

コンタクトフォームのカスタマイズを行う【その他の設定】

この設定はログインしているユーザー限定でお問い合わせフォームを送れるという機能を利用可能です。

詳細に関しては公式ページに記載されています（→公式サイト「その他の設定」）

【Contact Form 7】お問い合わせページを作成する

プラグインの設定が完了したら指定のコードを固定ページに反映させます。

このステップが完了したら後は設置だけです

お問い合わせフォーム用固定ページを作成する

管理画面の「お問い合わせ」＞「コンタクトフォーム1」をクリックします。

「コンタクトフォームの編集」画面にあるコードをコピーします。

コピーしたコードを次の箇所に貼りつけます

管理画面の「固定ページ」＞「新規追加」でお問い合わせ用の固定ページを作成し貼りつけます。

※最後の「公開」ボタンをクリックは忘れずに

完成後は送信テストを行ってみる

完成したお問い合わせフォームが機能するのか確認してみましょう

「氏名」「メールアドレス」「題名」「メッセージ本文（任意）」の部分に適当な文字列を入力してみましょう。

※任意以外の部分は入力しないと送信できないです

送信が成功すると「ありがとうございます。メッセージは送信されました。」と表示される

実際に届いた本文の内容が送信したものと一致していますね。

メールが届かない場合メールアドレスの設定を行う

もし上記の手順でメールが届かない場合は次の箇所を確認しましょう。

管理画面の「設定」＞「一般」＞「管理者メールアドレス」でご自身のメールアドレスが入力されているのかが分かります。

※入力後は「変更を保存」を忘れず行いましょう。

お問い合わせページをサイトに設置する

当ブログはヘッダーメニューの箇所に設置をしています

管理画面の「外観」＞「メニュー」をクリックして編集するメニューを選択：でトップメニューを選択します。

1. メニュー項目を追加にある固定ページを確認
2. お問い合わせにチェックを入れて「メニューに追加」
3. メニュー構造で並びを整えて（画像は一番下に設置）
4. 「メニューを保存」で完了

お問い合わせフォームからご連絡を頂いたら礼儀正しく返信しよう

今回はContact Form 7を使ったお問い合わせフォームの作り方を解説しました。

サイトの信頼性を上げるためにもぜひ早めに対応しておきましょう。

また、サイトの制作には適切なプラグインが欠かせません、今回使用したコンタクトフォーム用のプラグインの他にもブログ制作で使用するプラグインを紹介しています。

気になる方はご覧ください。

>>【WordPressプラグイン】初心者でもOKおすすめプラグイン一覧と導入方法

読者様や企業様からのお問い合わせの返信について

お問い合わせフォームを設置した後に実際にご連絡があった場合の正しい返信方法などに触れています。

次の記事を参考にしてみてください。

>>ブログでのお問い合わせの返信方法テンプレあり【ContactForm7】