ブログ

【10分で完成】Contact Form7を使ってお問い合わせフォームを作ろう!

 

相談犬
WordPressでブログを始めたのですが、お問い合わせフォームを作りたいです!詳しく教えてください!

 

こんな疑問にお答えします!

 

本記事の内容

 

今回はプラグイン「Contact Form7」を使った、お問い合わせフォームの作り方を解説します。

 

お問い合わせフォームとは、サイト運営者に質問をしたい時や、連絡をしたい時に使う連絡手段のひとつです。

 

下記は当ブログの「お問い合わせフォーム」なのですが、実際にお問い合わせから連絡は来ます。

 

内容として、記事に関する質問や、広告掲載の依頼が多いです。

 

たく
お問い合わせフォームは無料でサクッと設置ができるので、初心者の方でも10分程度で完成出来ます。

 

本記事を読みつつ、実際にお問い合わせフォームを作って見てください。

 

では、紹介してきます。

Contact Form7とは

Contact Form7」とは、WordPressでお問い合わせフォームを設置するための無料のプラグインです。

 

プログラミング知識が無い人でも、操作ひとつで簡単に設置できるのがContact Form7のメリットです。

 

企業のホームページでも、Contact Form 7でお問い合わせフォームが作られていることが多いです。

 

また、プラグイン制作者は日本人であることから、ネット情報が多いのも特徴のひとつです。

 

お問い合わせフォームを作る理由

 

お問い合わせフォームを作る理由について説明します。

 

※作り方だけを知りたい人はコチラをクリックして飛んでください。

 

理由は以下の2つです。

  • 連絡先として使える
  • プライバシー面の安心

 

1:連絡先として使える

 

お問い合わせフォームを作る理由は、連絡先として使えるからです。

 

たく
TwitterのDMやFacebookのメッセンジャーみたいなもんですね。

 

お問い合わせフォームは、あなたの記事を読んだ読者が質問したい場合などの連絡する手段として使われます。他にも、企業から広告掲載の依頼などの連絡がきたりします。

 

 

正直、お問合せフォームが無い時点では、サイトの信用性に欠けてしまいます。

 

なので、ブログを開設した時点で最初にお問合せフォームは作っておきましょう!

 

2:プライバシー面の安心

 

お問い合わせフォームを設置することで、プライバシー面の安心を得ることもできます。

 

理由はシンプル、メールアドレスを掲載しなくて良いからです。

 

もし、メールアドレスをネットに公開してしまうと、毎日迷惑メールやスパムメールが届くでしょう。

 

たく
お問い合わせフォームを作れば、メールアドレスの掲載は不要でプライバシー面での安心ができますね。

 

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

 

では、ここから実際に手を動かして、お問合せフォームを作っていきます。

 

手順は以下の3つになります。

  • プラグインをインストール
  • お問い合わせフォームの作成
  • お問い合わせフォームの設置

 

手順➀:プラグインをインストール

 

まずはプラグインの「Contact Form7」をインストールします。

サイドバーの「プラグイン」→「新規追加」をクリックしましょう。

 

 

以下の画面が出たら「Contact Form 7」と検索します。

 

 

上記赤枠内の富士山のアイコンが入ったのがContact Form 7になります。

 

出てきたら、「今すぐインストール」を押して、完了したら「有効化」をクリックします。

※当ブログは既にダウンロード済みです。

 

もし、検索しても出ない場合は公式HPからダウンロードし、Zipファイルをアップロードしましょう。

 

アップロード方法は「プラグイン」のページより、「プラグインのアップロード」をクリックします。

 

 

ファイルを選択後、ダウンロードしたZipファイルを選択して「今すぐインストール」をクリックすれば完了です。

 

 

たく
作業が完了したら同じく「有効化」を押しましょう!

 

「有効化」が終わると管理画面サイドバーにメールアイコンの「お問い合わせ」項目が表示されます。

 

手順➁:お問い合わせフォームの作成

 

プラグインを有効化したら、次はお問い合わせフォームを作成していきます。

 

管理画面サイドバーの「お問い合わせ」を選択します。

 

 

有効化した時点で、サイドバーにお問い合わせのアイコンが出ているので選択しましょう。

 

まずは、インストールした時点で入っている初期データの、コンタクトフォームを選択して編集していきます。

 

たく
分かりやすいように「お問い合わせ」とタイトルをつけて先に保存しておきましょう。

 

選択すると、以下の編集画面が出てきます。

 

 

お問い合わせフォームに設置すべき基本項目は4つです。

  • 名前
  • メールアドレス
  • 題名
  • お問い合わせ内容

 

なるべくシンプルな作りで、お問い合わせしやすいフォームにしましょう。

 

本記事では元からある項目をそのまま利用し、お問い合わせフォームを作成していきます。

 

たく
「氏名」「メールアドレス」など、テキスト部分は好きなワードに変更してみましょう!

 

次は「メール」設定を行います。

 

 

確認する場所は以下の5か所です。

➀:送信先

WordPressで登録した、管理者のメールアドレス宛に送るという意味になります。

※「管理画面」→「設定」→「管理者メールアドレス」を選択して、自分のメールアドレスが登録されているか確認をしましょう。

➁:送信元

WordPress@サイト名のアドレスから、お問い合わせが送られてくるという意味になります。

➂:題名

お問い合わせの件名になります。

➃:追加ヘッダー

CC:やBCC:で送りたいメールアドレスを追加することができます。

➄:メッセージ本文

お問い合わせのメールや内容の設定ができます。

 

たく
基本的に変更する部分はありません。初期設定のままでも機能します。

 

しかし、管理者メールアドレスが空白だと、メールが届きませんので注意が必要です。

 

最後に「メッセージ」設定です。

 

このように既にメッセージは設定されています。

 

ゆる
送信された際に、表示される「ありがとうございます。メッセージは送信されました。」こちらのサンキューメッセージは、自分好みのテキストに変更しても良いかもしれません。

 

なお、送信後のメッセージは以下のように表示されます。

 

たく
設定変更後は保存ボタンを忘れずに押しましょう。

 

最後に、お問い合わせフォーム部分になる記事を作ります。

 

先ほど編集した初期データのコンタクトフォームを開きます。

 

下記の画像、青色部分のコードをコピーします。

 

 

次に固定ページを新しく作成し、お問い合わせフォームを作ります。

 

たく
固定ページのタイトル名は好きなワードで問題ありません。

 

管理画面」→「固定ページ」→「新規作成」の流れで、先ほどコピーしたコードを貼り付け、保存します。

このような感じになります。

 

プレビューで確認すると、以下のようにしっかりと反映されている事が分ります。

 

お問い合わせフォームの完成はこちら

 

問題ない場合は、保存ボタンを押して完了です。

 

実際に届くか、テスト送信をしてみましょう! 登録した自分のメールアドレス宛に届けば成功です。
ゆる

 

実際に届いたテストメールはコチラ

 

たく
上記のようにメールアドレスが届けば完了です。お疲れさまでした。

 

届かない場合は以下を考えてみましょう

  • 迷惑メール設定をしていないか?
  • 登録されたメールアドレスはあっているか?
  • 管理者メールアドレスは登録されているか?
    ※「管理画面」→「設定」→「一般」→「管理者メールアドレス」で確認してみましょう!

 

迷ってしまった場合は「お問い合わせフォームの作り方」に戻って、手順を再確認してみましょう。

 

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

最後にお問い合わせフォームをトップページに設置する方法を紹介します。

 

設置場所は以下の2点です。

  • グローバルナビゲーション
  • サイドバー・フッターなど

 

せっかくお問い合わせフォームを作ったのに、設置しなければ、誰にも見られません。

 

たく
サクッと配置していきましょう! それぞれ解説してきます。

 

➀:グローバルナビゲーション

 

グローバルナビゲーションは、いわゆるヘッダーと言われるメニュー部分になります。

 

 

※当ブログのお問い合わせはヘッダー・フッター・プロフィールカードの3ヶ所に設置しています。

 

設置方法

管理画面より、「外観」→「メニュー」をクリックして、グローバルナビゲーションを作っていきます。

 

以下の画面「新しいメニューを作成しましょう。」をクリックします。

 

今回は「テストメニュー」という名前でメニューを作り、「メニューを作成」を押します。

 

 

作った「テストメニュー」に、先ほど作った固定ページのお問い合わせを追加してきます。

 

※お問い合わせ以外にも他の項目も入れてみましょう!

 

 

手順は以下のとおりです

  • 先ほど作った「テストメニュー」を選択
  • お問い合わせにチェックを付ける(固定ページの一覧から選択)
  • メニューに追加をクリック
  • お問い合わせの位置を調整

 

今回はトップページ上部のヘッダーに配置するので「ヘッダーメニュー」にチェックを入れます

 

 

最後に「メニューを保存」を押して完了になります。

 

たく
同じような手順で行えば、サイドバーやフッターにも設置することができます。

 

➀サイドバー・フッターなど

 

次の設置方法は、ダイレクトにお問い合わせが出来るように、目立つ配置方法です。

 

ここでは「ヴィジェット」を活用します。

 

外観」→「ヴィジェット」を選択しアクセスします。

 

ヴィジェット一覧の「テキスト」を選択し、コードを貼り付けます。

※お問い合わせを作った際のコードになります。

 

今回はサイドバートップに配置してみます。コードをコピーした、テキストのヴィジェットを「ドラッグ&ドロップ」で動かしましょう。

 

 

忘れずに「保存」も押しましょう!
ゆる

 

完了すると、サイドバーにお問い合わせが配置されます。

 

たく
こちらも同じ手順で行えば、フッターにも表示させることが可能です!

 

まとめ:お問い合わせフォームは簡単に誰でも作れる

 

今回はプラグインContact Form 7を使った、お問い合わせフォームの作り方を紹介しました。

 

WordPressでブログを運営するなら、お問い合わせフォームの設置は必須です。

 

本記事に沿ってぜひ、設置してみましょう!

 

今回は以上です。

 

\ この記事が気に入ったらフォローしてね /

Twitter


-ブログ