WORDPRESS

【2021年】WordPressプラグイン「Contact Form 7」の使い方を1から解説【ブログのお問い合わせフォームを作成するやり方/送信先の設定方法まで】

WordPressプラグイン「Contact Form 7」の使い方 アイキャッチ
 

あずきです🐥

WordPressをやるなら欠かせない定番プラグインの1つ…

Contact Form 7

について、その導入手順と使い方をブログ初心者さん向けに1から解説していきます

 

まず!

この「Contact Form 7」は、WordPressのブログで…

お問い合わせフォーム

を作成するためのプラグインです

もちろん無料のプラグインで、使い方も超簡単!
 

具体的には…

WordPressプラグイン「Contact Form 7」の使い方 top-01

↑ このような「お問い合わせフォーム」をサクッと作ることができ、一般的には…

WordPressプラグイン「Contact Form 7」の使い方 top-02

↑ こういった「フッター」メニューなどに設置しておくのが定石です

フッターっていうのは、ブログの「1番下側」エリアのこと!
 

ということで、今回は「3つ」のステップで丁寧に解説していきます

  1. 「Contact Form 7」の導入手順【インストールと有効化】
  2. 「Contact Form 7」で、お問い合わせフォームを作成するやり方
  3. お問い合わせメッセージの「送信先メールアドレス」を設定する方法

関連

作成したお問い合わせフォームを実際に「ヘッダー」や「フッター」へ設置する手順というのは、使用しているWordPressテーマごとで若干変わってきます

 

このブログでも使用中のテーマ「WING AFFINGER5」におけるヘッダー・フッターメニューへの設置方法は、こちらをどうぞ ↓

AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順 アイキャッチ
【スマホ用もあり】AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順【WordPressブログ】

続きを見る

※「ヘッダー」とは、ブログの最上部エリアのことを言います

 

ということで、さっそく見ていきましょー🐥

 

\ 本気で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

 

【2021年版】WordPressプラグイン「Contact Form 7」の基本的な使い方【ブログのお問い合わせフォームを作成・設置する/送信先メールアドレスの設定方法まで】

ステップ①:プラグイン「Contact Form 7」をWordPressに導入する手順【インストール&有効化】

WordPressブログ「完全初心者」ガイド 見出し a-01

まずはじめに…

Contact Form 7

の導入手順について

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン「Contact Form 7」の使い方 1-1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン「Contact Form 7」の使い方 1-1-02

↑ こちらの検索フォームに Contact Form 7 と入力し、その下の検索結果から…

WordPressプラグイン「Contact Form 7」の使い方 1-1-03-a

↑ このアイコンが目印のプラグイン「Contact Form 7」を探します

 

無事見つかったら…

WordPressプラグイン「Contact Form 7」の使い方 1-1-03-b

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

WordPressプラグイン「Contact Form 7」の使い方 1-1-03-c

↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了になります🐥

お次は肝心の、「お問い合わせフォームを作成する方法」について見ていこう!
 

 

ステップ②:プラグイン「Contact Form 7」で、お問い合わせフォームを作成するやり方【固定ページを使用】

WordPressブログ「完全初心者」ガイド 見出し a-02

 

はじめに

この記事では、「クラシックエディタ」の場合を前提に解説していきます。 もう1つの投稿編集タイプ「グーテンベルグ」をお使いの方は、あしからずご了承ください

 

関連:クラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】

関連:クラシックエディタはいつまで使える?2021年末でサポート終了って本当?【少なくとも2022年までは使えそう/代替プラグインもあり】

 

つづいて2つ目のステップは、「Contact Form 7」を使って…

ブログの「お問い合わせフォーム」を作成する手順

について

 

まずはWordPress管理画面の一覧メニューから…

WordPressプラグイン「Contact Form 7」の使い方 1-2-01-top

↑ お問い合わせ > コンタクトフォーム をクリックしましょう

 

すると…

WordPressプラグイン「Contact Form 7」の使い方 1-2-01-01

↑ このような画面になるので、画面中央に表示されている…

WordPressプラグイン「Contact Form 7」の使い方 1-2-01-02

↑ こちらの「ショートコード」を、両端の [ ] という記号まで含めて、丸々コピーしておきます

コピーは Ctrl + C!
 

「ショートコード」をコピーできたら、今度はWordPress管理画面の…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-top

↑ 固定ページ > 新規追加 をクリックしましょう

 

ここから、この「ショートコード」を使って…

「お問い合わせフォーム」の固定ページ

を作成していきます

 

関連

 

「固定ページ」の編集画面が開いたら、まずは1番上側に表示されている…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-01-a

↑ こちらの「タイトル」欄に、お問い合わせフォームの「ページタイトル」となる任意の名称を入力しましょう

 

このタイトル名は、特にこだわりがなければ…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-01-b

↑ このように、 お問い合わせ といったシンプルな名称が無難でおすすめです

このタイトルはあとからいつでも変更できるよ!
 

タイトル名を入力すると、その下に…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-02-a

↑ このように「パーマリンク」という設定欄が表示されるので、「編集」というボタンをクリックします

 

補足

タイトル名を入力しても「パーマリンク」欄が表示されない場合は、編集画面の右側にある「下書き保存」ボタンを一旦クリックすると表示されます

 

「編集」ボタンをクリックしたら…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-02-b

↑ このように「パーマリンク」の入力フォームが開くので、このなかを「任意の文字列」に入力し直してから、「OK」ボタンをクリックしましょう

 

ここは特にこだわりがなければ、上の画像例のように「お問い合わせ」を意味する contact といった文字列が、シンプルでわかりやすいと思います

日本語のパーマリンクは「文字化け」しちゃうから、「英数字」に直すのが基本だよ!
 

ちなみに!

この「パーマリンク」は、さきほどの「ページタイトル」と違って…

1度そのページを「公開」したら、基本的にはあとから変更しない

のが鉄則です

 

関連

「公開した後のパーマリンク変更はなんでダメなの?」「そもそもパーマリンクってなに…?」という場合は、こちらをどうぞ ↓

WordPressの「パーマリンク設定」とは?3つの注意点と「初期設定」手順 アイキャッチ
【2021年】WordPressの「パーマリンク設定」とは?3つの注意点と「初期設定」手順を初心者向けに解説【日本語スラッグは文字化けする】

続きを見る

 

ということで!

「パーマリンク」の設定もできたら、その下側に表示されている…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-03-a

↑ こちらの本文エリアを見ていきます

 

まず、本文エリアの「右上」に並んでいる…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-03-b

↑ この…

  • ビジュアル
  • テキスト

という2つのタブについては、「ビジュアル」モードのままでOKです

最初から「テキスト」が選択されている場合は、「ビジュアル」タブに切りかえよう!
 
 

「ビジュアル」タブが選択されていることを確認したら、この本文エリア内に、さきほどコピーしておいた「ショートコード」を…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-03-c

↑ このように、両端の [ ] という記号まで含めて、丸々貼りつけましょう

貼りつけは Ctrl + V!
 

「ショートコード」を貼りつけたら、あとはこのページを「公開」すればOKなんですが…

ちなみに!

自分はこの「お問い合わせフォーム」ページについては、「SEO」面を考慮して…

NOINDEX

に設定しています

つまり、検索結果にはあえて「載せない」設定!
 
 

「SEO」の観点をふまえると、ブログのページはなんでもかんでも「INDEX=検索結果に掲載」させればいいわけではなく…

検索からのアクセスをそもそも見込んでいないページ

については、サイト全体のSEO評価を考慮して「NOINDEX=検索結果からあえて除外」させる方が無難という判断からです

※あくまで一般論をふまえたうえでの個人的な見解になります。 当該ページを「NOINDEX」させることが必ずしもSEO面でプラスであることを断定、保証するものではありません。最終的な判断はご自身の責任で行ってください。

 

補足

ページごとで個別に「NOINDEX」を設定する手順については、導入しているWordPressテーマなどによって異なります(テーマによっては、個別で設定できない可能性もあります)

 

参考までに、このブログでも使用中のテーマ「WING AFFINGER5」の場合だと、投稿・固定ページの編集画面で…

 
WordPressプラグイン「Contact Form 7」の使い方 1-2-02-04

↑ 画面の右側にある、こちらのフォームから設定可能です

 

ということで!

本題に戻って、さきほどの「ショートコード」を本文エリアに貼りつけたら、画面の右側にある…

WordPressプラグイン「Contact Form 7」の使い方 1-2-02-05

↑ こちらの「公開」ボタンをクリックして、「お問い合わせフォーム」ページの作成は完了となります🐣

 

あとは、この作成した「固定ページ」をブログの…

  • 「ヘッダー」メニュー
  • 「フッター」メニュー

など、任意のエリアに設置すればOKです

 

ただし!

この作成したページをヘッダーやフッターに設置する手順というのも、導入している「テーマ」によって若干異なる可能性があるんですね

 

参考までに…

WordPressテーマ「WING AFFINGER5」における、作成したページを「ヘッダー・フッター」メニューへ設置する手順についてはこちらをどうぞ ↓

AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順 アイキャッチ
【スマホ用もあり】AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順【WordPressブログ】

続きを見る

 

ということで、最後に!

実際にお問い合わせメールが送信されたとき

の、「送信先」となるメールアドレスの設定方法を見ていきましょう🐥

 

 

ステップ③:「Contact Form 7」のお問い合わせフォームから送信されたメッセージの、「送信先」メールアドレスを設定する方法【デフォルト設定は、管理者メールアドレス】

WordPressブログ「完全初心者」ガイド 見出し a-03

最後のステップは、「Contact Form 7」で作ったお問い合わせフォームから実際に「メール」が送信されたときの…

「送信先」メールアドレスの設定方法

について

つまり、読者さんからのメッセージを受け取る「自分のメアド」のこと!
 

というのも…

「Contact Form 7」のお問い合わせフォームから送信されたメッセージというのは、「WordPress管理画面」のなかで確認や返信ができるわけではなく…

wordpress@ドメイン名
(例 wordpress@azuki-moomoo.com )

という「送信元」メールアドレスから、あらかじめ「Contact Form 7」側で設定してある…

「送信先」メールアドレス

に、自動で届くようになっているんですね

 

で!

「Contact Form 7」のデフォルト設定では、WordPressを開設(=インストール)した際に自分で登録した…

管理者メールアドレス

というのが、そのまま「送信先」メールアドレスとして設定されています

 

ちなみにこの「管理者メールアドレス」は、WordPress管理画面の…

WordPressプラグイン「Contact Form 7」の使い方 1-3-01-01

↑ 設定 > 一般 をクリックしたなかにある…

WordPressプラグイン「Contact Form 7」の使い方 1-3-01-02

↑ こちらの項目のこと

 

とはいえ…

メッセージの送信先に、この「管理者メールアドレス」を使いたくない

という人も、正直多いんじゃないかと思います

 

特に!

読者さんからのメッセージを受け取った「送信先」メールアドレスでそのままメールのやり取りを始めてしまった場合…

自分の「管理者メールアドレス」が、相手方にバレてしまう

ので、「Contact Form 7」側の「送信先」メアドについては最初に変更しておいた方が安心です

「管理者メアド」と「お問い合わせ用メアド」はちゃんとわけておきたい…
 

手順は簡単で、まずはWordPress管理画面から…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-01

↑ お問い合わせ > コンタクトフォーム をクリックし、そのなかにある…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-02

↑ こちらの「コンタクトフォーム 1」という場所をクリックします

 

つづいて、画面上部の…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-03

↑「メール」というタブをクリックして開きましょう

 

すると…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-04

↑ このような設定画面が開くので、1番上側にある…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-05-a

↑ こちらの「送信」というフォームを見てみます

 

この「送信先」、つまりブログ運営者から見た場合の「受信するメアド」となる項目に、デフォルトの状態では…

[_site_admin_email]

というタグが設定されていて、このタグによって「WordPressの管理者メールアドレス」がそのまま適用されるようになっています

「admin」は管理者という意味!
 

この最初から入っている「タグ」を丸々消して…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-05-b

↑ このように、メッセージを受信したい「任意のメールアドレス」を直接入れ直しましょう

ブログ訪問者さんに教えても大丈夫な、「お問い合わせ」専用のメアドがおすすめ!
 

「送信先」のフォームを変更できたら、画面の右側もしくは下側にある「保存」ボタンをクリックして、設定は完了です🐥

 

ちなみに!

お問い合わせを送信された「読者さん」側のお名前とメアドについては、その下の「メッセージ本文」というフォームに最初から入っている…

WordPressプラグイン「Contact Form 7」の使い方 1-3-02-06

↑ こちらの…

  • [your-name] → お問い合わせの【お名前】欄に入力された、読者さんのお名前
  • [your-email] → 同じく【メールアドレス】欄に入力された、読者さんのメアド

というタグによって、それぞれ自動で適用されるようになっています

つまりこの【your】は、自分ではなくブログ訪問者さんのこと!
 

そして、最後にもう1点!

この「Contact Form 7」では、いざ読者さんがメッセージを送ってくれた際に…

メッセージを受け付けました!

といった旨の「確認メール」を自動で返信するよう、追加で設定することも可能です

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS

© 2019 あずきのぶろぐ