ブログ講座

【初心者向け】Contact Form7で簡単にお問い合わせフォームを作成

マルくん

ワードプレスにお問い合わせフォームを作りたいな

Contact Form7の使い方を知りたい

という悩みを解決する記事を書きました。

この記事では、プラグイン『Contact Form7』を使ってワードプレスのブログにお問合せフォームを作成する方法を紹介します。

具体的には、以下の方法を知ることができます。

この記事でわかること

  • Contact Form7のインストール方法
  • オーソドックスなお問い合わせフォームの設置
  • 自動返信機能の設定
  • 『お問い合わせ』をヘッダーメニューやフッターメニューに表示する方法
  • スパム対策(reCAPCHA使用)

ブログ初心者にもわかりやすいように、必要なものだけ設定できるようにしています。

記事を読んで、お問い合わせフォームの設定を完了させてましょう。

Contact Form 7とは

Contact Form 7とは、お問い合わせフォームを作ることができるプラグインです。

以下のようなお問い合わせフォームが簡単に作れます。

お問合せフォーム
マルくん

お問い合わせフォームを作るとどんないいことがあるの?

お問い合わせフォームを作ると、次のようなメリットがあります。

お問い合わせフォームのメリット

  • 読者があなたとコンタクトを取れるようになる
  • 企業から仕事のオファーがもらえるチャンスが増える
  • アドセンスなどのサービスに合格しやすくなる

ブログを書くことで、仕事のオファーが来るかもしれません♪

そのチャンスを逃さないためにも、お問い合わせフォームを作成しておくことをおすすめします。

Contact Form 7でお問い合わせフォームを作成する方法

ではContact Form 7を使ってお問い合わせフォームを作成していきましょう。

お問い合わせフォームを設置するだけなら、次の3ステップで完了します。

お問い合わせフォーム設置3ステップ

  1. Contact Form 7のインストール
  2. 固定ページにお問い合わせフォーム作成
  3. ブログのヘッダーメニューorフッターメニューに設置

それでは設置していきましょう。

step
1
Contact Form 7のインストール

ワードプレスの管理画面から『プラグイン』→『新規追加』の順でクリック▼

プラグインの新規追加

検索窓に『Contact Form 7』と入力し、富士山マークのプラグインの『今すぐインストール』をクリック▼

Contact Form 7のインストール

『有効化』をクリック▼

プラグインの有効化

これでContact Form 7のインストールは完了です。

マルくん

次はお問い合わせフォームの作成だ!

step
2
固定ページにお問合せフォームを作成

『お問い合わせ』をクリックし、表示されている『コンタクトフォーム1』のショートコードをコピーします▼

Contact Formのショートコードをコピー

次に、『固定ページ』→『新規追加』をクリック▼

固定ページの新規追加

タイトルと本文を入力していきましょう▼

お問い合わせページの作成
タイトル「お問い合わせ」と入力
本文先ほどコピーしたショートコードを貼り付けましょう
(アフィンガー6はそのまま貼り付けてOKでした。うまくいかない場合は、『カスタムHTML』のブロックを挿入して貼り付けましょう)

パーマリンクを設定して、公開しましょう▼

これでお問い合わせフォームができました。

…が、このままではブログに来た人がお問合せフォームにたどり着くのが難しいので、ブログのトップページに表示させていきましょう。

step
3
ブログのトップページに設置

ブログトップページのヘッダーメニューに設置をしてみましょう。

『外観』→『メニュー』の順でクリック▼

メニュー画面の外観設定

すでにヘッダーメニューを作成している方は、ヘッダーメニューを選択(画像の左側の矢印)。

メニューを作ってない人は、『新しいメニューを作成しましょう』をクリック▼

ヘッダーメニューの選択

ヘッダーメニューにお問い合わせページを追加します。

『固定ページ』→『お問い合わせ』→『メニューに追加』の順でクリック▼

固定ページの追加

右側にお問い合わせが追加されたのを確認して、『メニューを保存』をクリックしましょう▼

メニュー画面に追加されたのを確認

これで、トップページのヘッダーにお問い合わせが設置されました。

確認してみましょう▼

ブログトップページのヘッダー

「やっぱりヘッダーメニューに表示したくない」という方は、削除もできます▼

ヘッダーメニューからの削除方法

フッターメニューに表示したい方

フッターメニューに表示したい方は、次の手順でフッターに設定していきましょう。

『新しいメニューを作成しましょう』をクリックします▼

新しいメニューの追加
②メニュー名わかりやすい名前を入力
(私は『フッターメニュー』にしました)
③メニューの位置『フッターメニュー』にチェック

入力したら『メニューを作成』をクリックします。

次に、『固定ページ』→『お問い合わせ』→『メニューに追加』の順でクリック▼

メニュー項目の追加

右側のメニュー構造にお問い合わせが追加されたかどうかを確認して『メニューを保存』をクリックしましょう▼

追加されたのを確認

これで、トップページのフッターにお問い合わせフォームが設置できました。

確認してみましょう▼

ブログトップページのヘッター

「とりあえずコンタクトフォームを設置できればOK」という方は、これでOKです。

Contact Form 7で自動返信機能を使う方法

マルくん

コンタクトフォームに自動返信機能をつけたいんだけど…

自動返信機能というのは、お問い合わせを送信した瞬間に自動でメールを返信する機能です。(お問い合わせフォームでメッセージを送信したら、直後に「お問い合わせありがとうございます。後日、担当のものが返信させていただきます。」的なメール返ってきますよね。アレのことです。)

自動返信機能をつけなくていい人は、ここは飛ばして読んでくださいね。

step
1
編集画面を開く

『お問い合わせ』→『編集』の順でクリック▼

コンタクトフォームの編集画面へ

step
2
メールタブを開き『メール(2)』にチェックを入れる

メールタブの編集

すると、以下のように『メール(2)』の下に入力画面が表示されます。

まるげり

これで自動返信できるようになったんだけど、返信メッセージが味気ないので、それっぽい感じに編集していこう!

step
3
題名の入力

題名の部分に「お問い合わせありがとうございます」を入力▼

題名の入力

step
4
メッセージ本文の入力

メッセージ本文の[your-message]の下に

「このたびはお問い合わせありがとうございます。お問い合わせの内容により、返信に数日ほどお時間をいただくことがありますが、ご了承ください。」

などの文章を入力して、『保存』をクリックしましょう▼

メッセージ本文に加筆

これで、自動返信機能の設定が完了です。

Contact Form 7のスパム対策設定方法

マルくん

お問い合わせフォームに嫌がらせのメールとかが来たら嫌だな…。

最後に、嫌がらせのメールなどの対策をしておきましょう。

『reCAPCHA』というサービスを使うと、スパムの対策ができます。

step
1
reCAPCHAのホームページへ行く

≫ reCAPCHAのホームページへ

『v3 Admin Console』をクリック▼

『reCAPCHA』のホームページ

step
2
必要項目の入力をする

①〜③の入力と『利用規約』にチェックをする▼

必要項目の入力
①ラベルわかりやすい名前を入力
(私は、ブログのドメイン名を入力しました)
②reCAPTCHAタイプ『reCAPTCHA v3』を選択
③ドメインブログのドメイン名を入力
(このブログの場合「blog-susume.com」)

入力と『利用規約の同意』にチェックをいれたら『送信』をクリックしましょう。

step
3
サイトキー・シークレットキーのコピー

サイトキーとシークレットキーが表示されるので、それぞれコピーします▼

キーのコピー画面

step
4
ワードプレスの管理画面から『お問い合わせ』→『インテグレーション』へ

インテグレーションの選択

step
5
インテグレーションのセットアップをクリック

インテグレーションのセットアップ

step
6
サイトキーとシークレットキーの貼り付け

先ほどコピーしたサイトキーとシークレットキーを貼り付ける▼

サイトキーとシークレットキーの貼り付け

これですべての設定が完了です。

マルくん

やったー♪できたー!!

まとめ:Contact Form 7でお問い合わせフォームをサクッと作ろう

Contact Form 7の設定方法を紹介してきました。

お問合せフォームを作ることで、

  • 読者があなたとコンタクトを取れるようになる
  • 企業から仕事のオファーがもらえるチャンスが増える
  • アドセンスなどのサービスに合格しやすくなる

というメリットがあります。

Contact Form 7を使って、サクッとお問い合わせフォームを設置していきましょう。

その他のおすすめプラグインを知りたい方は、「【必須】WordPressに入れておくべきおすすめプラグイン7選」の記事で紹介しています▼

【必須】WordPressに入れておくべきおすすめプラグイン7選

この記事では、WordPressに導入必須のおすすめプラグインを7つ紹介しています。

続きを見る

その他のワードプレスの設定はお済みですか?

「ブログ完全講義」3時間目では、ブログの初期設定についてまとめています。全部終わっているか確認してみてくださいね▼

ブログ完全講義を見てみる

マルくん

じゃあまたね。バイバーイ!

おすすめ記事一覧

1

この記事では、エックスサーバーのWordPressクイックスタートを使って簡単にワードプレスを開設する方法を紹介しています。

2

という悩みを解決する記事を書きました。 WordPressでブログを始めようと思っている  or 始めたのはいいけど、初期設定で何をしたらいいのかわからないですよね。 私も、はじめてブログを立ち上げた ...

3

という悩みを解決する記事を書きました。 教員(公務員)がブログを始めるときに、切っても切れない関係にあるのが「原則副業禁止」というきまりです。 私は教員をしていた頃、「副業」に関わる法律のことをよく理 ...

4

ブログ初心者にとって「アフィンガー6」はおすすめ?この記事では、ブログ初心者のころからアフィンガーを使っている筆者が、アフィンガーのメリット・デメリット、口コミなどを紹介しています。

5

この記事では初心者にも使いやすいおすすめASPを5つ紹介しています。登録方法も詳しく知れます。

-ブログ講座
-