ブログ

カスタマイズ方法も紹介!Contact Form7でお問い合わせを作ろう!

 

相談犬
Contact Form7でお問い合わせフォームを作りたいです!カスタマイズ方法も詳しく教えてください!

 

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

 

本記事の内容

※青字をクリックすると、読みたい項目までジャンプできます。

本記事の信頼性

この記事を書いている僕は、副業ブログ歴4年目のブロガーです。当ブログでは「AFFINGER6」を使用しております。当ブログ含め3つのメディア運営をしており、ブログ収益で月収30万円を継続しています。

 

今回はプラグイン「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ファイルを選択して「今すぐインストール」をクリックすれば完了です。

 

 

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

 

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

 

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

 

次はお問い合わせフォームを作成していきます。

 

管理画面のサイドバーより、「お問い合わせ」→「コンタクトフォーム」を選択します。

 

 

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

 

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

 

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

 

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

 

 

 お問い合わせフォームに設置される項目は4つになります。

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

 

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

 

今回は、初期データ使ってお問い合わせフォームを作成します。

 

 メール設定

 

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

➀:送信先

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

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

➁:送信元

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

➂:題名

お問い合わせの件名になります。好きなテキストに変更OK。

➃:追加ヘッダー

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

こちらも何もせず、スルーでOKです。

➄:メッセージ本文

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

 

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

 

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

 

 メッセージ本文を作りたい方は以下をコピペで使用してください。

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

この度はお問い合わせありがとうございます。

折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。

何卒こ了承くださいませ。

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

 

お問い合わせが来ると以下のように表示されます。

 

 

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

 

 

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

 

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

 

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

 

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

 

手順③:お問い合わせフォームの設置

 

先ほど編集した初期データを開きます。

 

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

 

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

 

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

 

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

 

※ビジュアルモードで問題ありません。

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

 

 設置方法

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

 

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

 

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

 

 

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

 

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

 

 

 手順は以下の通りです

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

 

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

 

 

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

 

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

 

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

 

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

 

今回はサイドバートップに配置してみます。

 

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

 

管理画面サイドバーより「外観」→「ヴィジェット」を選択します。

 

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

 

テキストヴィジェットをサイドバートップに入れましょう。

 

※ヴィジェットはドラッグ&ドロップして動かせます。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

今回は以上です。

-ブログ