WordPress

【一瞬で出来る!】お問い合わせフォームの作り方【2021年版】【Contact Form 7】

お問い合わせフォーム作り方サムネイル


お問い合わせフォームを作りたいなぁ...

今回はそんなお悩みを抱える方に、お問い合わせフォームの作り方をご紹介します。

操作方法について、実際の画面を用いて分かりやすく解説していますのでPC作業が苦手な人も簡単に導入できます。

それでは、早速見ていきましょう!
Let' GO バナー

お問い合わせフォームとは何か?必要性は?

メール

まず、お問い合わせフォームとは何か?について再確認します。

お問合せフォームはこれからブログ活動を始めていく人にとっては、連絡の窓口になります。
(閲覧者からの質問・苦情などや企業案件を受ける為)

逆に言うと、

サリュー
お問合せフォームが存在しないと連絡を取る手段がないとも言えますね。

以上の事からブログで本格的に活動していきたい方にとって、お問合せフォームを作成することは「必須の作業」です!

また、お問合せフォームを設けることによってグーグルアドセンスの審査を通りやすくなったり、サイトの信頼性を高めることができます。

これからサイト運営をより良くしていこうと思っている方は、ぜひ参考にしてみてください。


当サイトでは、ブログ初心者のサイト運営を応援しています。
ブログ初心者を応援しています。

本記事でのお問い合わせフォーム作成方法

それでは、お問い合わせフォームについて作成を行っていきます。

今回のお問い合わせフォーム作成では、「Contact Form 7(コンタクトフォーム7)」というプラグインを使用して作成していきます。
Contact Form7の公式サイトはコチラ

サリュー
難しい知識は必要ありませんので、簡単に覚えられます!

それでは最初にContact Form 7(コンタクトフォーム7)の説明をした上で、作業に入っていきます!

Contact Form 7(コンタクトフォーム7)とは?

コンタクトフォーム7とは?

Contact Form 7は簡単にお問い合わせフォームを作成することができるWordPress(ワードプレス)のプラグインになります。

ダウンロード数が500万回以上かつ多くのブロガーの方も使用しているプラグインなので安心感があります。
Contact Form 7ダウンロード数
2021年2月時点

これから複数サイト運営を行っていたい場合には、何回も使うことになると思いますので覚えておいてくださいね!

お問い合わせフォームの作成(Contact Form 7)

山
出典:Contact Form7の公式サイト

それでは、早速お問い合わせフォームの作成に入っていきましょう!

一つ一つ手順を踏んでいけば、一瞬で作成することができますので落ち着いて頑張っていきましょう!

ハンズオン方式で作業するようにすることをオススメします!

作業時間は10分程度で終わります。

STEP.1:Contact Form 7(コンタクトフォーム7)のインストール

最初のステップはContact Form 7(コンタクトフォーム7)のインストールです。

WordPress管理画面 > プラグイン > 新規追加 をクリック!

プラグインの新規追加クリックの様子

プラグインの検索窓をクリック > 「ContactForm7」と入力 > Enter!

検索フォームへの入力の様子
※検索結果に表示されない場合には適宜空白を入れたりなど、入力内容を変えてみてください。

今すぐインストールをクリック!

Contact Form 7(コンタクトフォーム7)をインストール
※富士山のマークのヤツです!

クリックすると...

インストール中になります。
少し経つとインストール完了が表示されますので、

そうすれば「インストール完了」になります。

Contact Form 7(コンタクトフォーム7)をインストール完了まで

STEP.2:Contact Form 7(コンタクトフォーム7)の有効化

Contact Form 7(コンタクトフォーム7)をインストールしただけでは、フォームを作成することができません

Contact Form 7(コンタクトフォーム7)を有効化することで、フォームを作成することが可能になります

有効化をクリック!

プラグインを有効化

有効化が成功した場合、画面が再読み込みされ「プラグインを有効化しました。」というメッセージが表示されたら、
有効化完了」です。

プラグインを有効化のメッセージ

STEP.2:Contact Form 7(コンタクトフォーム7)の設定

それでは次にContact Form 7の設定を行っていきます。

大きく分けて「フォームの設定」、「メールの設定」、「メッセージの設定」、「その他の設定」の4つに分類されます。

WordPress管理画面 > プラグイン > インストール済みプラグイン をクリック!

インストール済プラグインの画面へ遷移する様子

インストールされているプラグイン一覧の画面に遷移します。

次に、Contact Form 7を見つけてください!

設定をクリック!

クリックすると、Contact Form 7の設定画面に遷移します。

初期状態で用意されているフォームがありますのでそちらを利用していきましょう!

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

初期状態フォームの場所確認
※ 初期状態の場合の表示になります。

クリックすると、「コンタクトフォーム編集画面(フォームの設定)」に移動します。

1.フォームの設定(フォームの入力項目のカスタマイズ)

ここで、新規でフォームを作成する為のフォームを編集することが可能です。

お問い合わせフォームの編集画面

デフォルト設定では、「氏名」、「メールアドレス」、「題名」、「メッセージ本文(任意)」がフォームに用意されています。

基本的にはデフォルトの状態で問題はありませんが、もしこだわりがある方はご自身の好きなようにカスタマイズしてみてください。

人気ブロガーのマナブログさんやヒトデブログさんも上記の4項目を現在も使用されていますので、安心して進めていただければと思います。
manabloghitodeblog

それでは次に進みます。

2.メールの設定(フォームからの送信から受信までの様々なカスタマイズ)

メールの設定では、作成したフォームの内容が、「どこへ送信されるのか?」、「どこから送信されるのか?」をはじめ、送られてくるメールの「題名の形式」や「メッセージ本文の形式」などを設定することができます。

「メール」 をクリック!

メールの設定の選択

メール設定画面

デフォルトの状態で問題はないのですが、

フォームから送信されてくるメールは、どのメールアドレスに送られてくるのか?

が気になった方もいらっしゃるのではないでしょうか?

Contact Form 7公式サイトでは、以下のように述べています。

[_site_admin_email] — このタグはウェブサイトの管理者ユーザーのメールアドレスで置き換えられます。

出典:Contact Form 7公式サイト

サリュー
どのメールアドレスで設定したかな?

と気になった方は、

WordPress管理画面 > ユーザー > ユーザー一覧をクリック!


をして、権限グループが管理者になっているユーザーのメールアドレスを確認してください。

もし、登録されているメールアドレスにフォームからのメールを受信させたくない場合には、Contact Form 7のメールの設定に戻って入力されている[_site_admin_email]を全て消して、ご自身が保有している別のメールアドレスを入力してください。

送信先について

もし、他の項目が気になる方は、Contact Form 7公式サイトを参考にしてカスタマイズしてみてください。(こだわりが無ければ何もしなくてもOK!)

それでは3つ目の設定に進んでいきましょう!

3.メッセージの設定(送信時に考えられる様々なケースに対してのメッセージ)

メッセージの設定では、ユーザーがフォームを全て入力し、送信したときに考えられる様々なケースに対してのメッセージをカスタマイズすることができます。

「メッセージ」 をクリック!

メッセージの設定の選択

メッセージ設定画面

ここもデフォルト状態で特段問題がないのですが、もしこだわりがあるようでしたら、お好みにカスタマイズしてみてください。

ここに関しては、特別説明がなくても理解できる点だと思いますので詳細な内容については省略させていただきます。

4.その他の設定(上級者向け設定)

その他の設定では、ブログの購読者のみフォーム送信を可能にしたり、実際にメールの送信をせずに挙動のみを確認することができるデモモードなどを設定することができます。

「その他」 をクリック!

その他の設定の選択

以下の画面にコードを貼ることによって、カスタマイズすることができます。

その他設定画面

こだわりがある人は、Contact Form 7公式サイトを参考にしてみてください。

以上でContact Form 7におけるフォームの設定4つの確認が終了しました。

最後に、これまでの設定を保存するために、保存をしましょう!

「保存」 をクリック!

保存ボタンの場所確認

保存ボタンをクリックして「コンタクトフォームが保存されました。と表示されれば「フォーム設定完了」です。

以上で、フォームを作成することができました。

保存完了のメッセージ

次は、実際のホームページにお問い合わせフォームを設置する方法について解説していきます。

作成はできても、設置ができないとアナタのホームページには表示することができません。

あと少しで全ての作業が完了します。頑張りましょう!

サリュー
もう少し頑張ろう!

お問い合わせフォームの設置

それでは、ご自身のホームページにお問い合わせフォームを設置していきましょう!

フォームのショートコードのコピー

先程のコンタクトフォーム編集画面にショートコードがありますので、それをコピーしておきましょう!

これをペーストするだけで、ペーストした箇所にお問い合わせフォームが作成されます!

素晴らしいプラグインですよね!

ショートコードをすべて選択 → コピー

ショートコードのコピーの様子

ここからは、どこに設置したいか?によって手順が変わってくるのですが、今回は「お問い合わせフォーム専用のページ」を作成していきたいと思います。

以下のように、お問い合わせページのリンクから飛ぶことを想定します。

お問い合わせページへのリンク参考

お問い合わせフォームのページ作成

それではまず、お問い合わせのページを作成していきましょう!

WordPress管理画面 > 固定ページ > 新規追加 をクリック!

固定ページ新規追加の様子

クリックすると、新規固定ページを作成するページが表示されます。

次に、お問い合わせページのタイトルを入力していきます。

タイトル名は何でもいいのですが、誰が見てもお問い合わせのフォームだと認識できるタイトル名が良いと思います。

タイトル名を入力!

固定ページタイトル入力の様子

ここで、先程コピーしたショートコードを貼り付けます。

ショートコードをペースト!

ショートコードのコピペ

後は、公開ボタンを押しましょう!

公開ボタンの明示

はい 。これで「お問い合わせページ」が完成しました!

簡単でしたね!

今後、複数サイトを運営する場合には、この動作を繰り返すだけでOKです。

作業自体は頭に入れる必要はありません。

ぜひ、この記事をブックマークしてご自身の記事作成に頭を切り替えていただければと思います!

お問い合わせフォームページへのリンク設置

現在の状態では、ユーザーがお問合せフォームページのURLを入力しなければ、お問い合わせページへ到達する方法がありません。

これでは、ダメなので...

作業の最後は、お問い合わせフォームページへのリンク設置になります。

設置場所はどこでも問題ないのですが、今回はフッターに設置します。

WordPress管理画面 > 外観 > メニュー をクリック!

ここからはテーマごとにメニューの作成方法が変わってきます。

テーマの数は膨大な為、ご自身のテーマに合わせてメニューの作成を行ってください。

Googleの検索窓に「ご自身のテーマ + フッターメニューの作成方法」と調べれば、ほとんどのテーマはやり方が掲載されていると思いますので、ここからの作業は各自でお願いします。

めちゃくちゃ簡単なので頑張ってください!

 お問い合わせフォームのテスト

最後に、設置したお問合せフォームが正常に機能しているかのテストを行います。

実際にフォームへ入力→送信する

それではフォームへ入力を行い、送信をボタンを押してください!

メールボックスを確認する

メール内容の確認

下記のようなメールが届いたら、お問い合わせフォームは正常に機能しています。

まとめ【お問い合わせフォーム】

以上でContact Form7(コンタクトフォーム7)を用いたお問い合わせフォーム作成についてご紹介させていただきました。

お問い合わせフォームは、今ではほとんどのWEBサイトに必ず設置されています。

アドセンス審査や、ユーザビリティの高いサイト作成の為には、必要不可欠な要素とも言えますので、ぜひご活用ください。

当サイトでは、ブログ初心者の方を応援しております。

何かご不明な点については、お問い合わせフォームからご連絡をください。

アナタのより良いサイト作成のお力になれれば、嬉しいです。

それでは!


テックキャンプに行ったら人生が変わった話

スポンサーリンク

-WordPress
-, ,

© 2021 プロワク