あずきです🐥
WordPressをやるなら欠かせない定番プラグインの1つ…
Contact Form 7
について、その導入手順と使い方をブログ初心者さん向けに1から解説していきます
まず！
この「Contact Form 7」は、WordPressのブログで…
お問い合わせフォーム
を作成するためのプラグインです
具体的には…
↑ このような「お問い合わせフォーム」をサクッと作ることができ、一般的には…
↑ こういった「フッター」メニューなどに設置しておくのが定石です
ということで、今回は「3つ」のステップで丁寧に解説していきます
- 「Contact Form 7」の導入手順【インストールと有効化】
- 「Contact Form 7」で、お問い合わせフォームを作成するやり方
- お問い合わせメッセージの「送信先メールアドレス」を設定する方法
関連
作成したお問い合わせフォームを実際に「ヘッダー」や「フッター」へ設置する手順というのは、使用しているWordPressテーマごとで若干変わってきます
このブログでも使用中のテーマ「WING AFFINGER5」におけるヘッダー・フッターメニューへの設置方法は、こちらをどうぞ ↓
-
【スマホ用もあり】AFFINGER5で「ヘッダー＆フッターメニュー」を作成する手順【WordPressブログ】
続きを見る
※「ヘッダー」とは、ブログの最上部エリアのことを言います
ということで、さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
【愛用】「WING AFFINGER5」って実際どうなの？気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ／専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が発生してしまう可能性があります。 プラグインの使用に際しては、あらかじめデータを「バックアップ」されたうえでご自身の判断と責任のもと行ってください
-
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】
続きを見る
※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます
【2021年版】WordPressプラグイン「Contact Form 7」の基本的な使い方【ブログのお問い合わせフォームを作成・設置する／送信先メールアドレスの設定方法まで】
ステップ①：プラグイン「Contact Form 7」をWordPressに導入する手順【インストール＆有効化】
まずはじめに…
Contact Form 7
の導入手順について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Contact Form 7 と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Contact Form 7」を探します
無事見つかったら…
↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…
↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了になります🐥
ステップ②：プラグイン「Contact Form 7」で、お問い合わせフォームを作成するやり方【固定ページを使用】
はじめに
この記事では、「Classic Editor（クラシックエディタ）」の場合を前提に解説していきます。 もう1つの投稿編集タイプ「Gutenberg（グーテンベルグ）」をお使いの方は、あしからずご了承ください
「グーテンベルグとクラシックエディタってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
続きを見る
「クラシックエディタの今後のサポート状況」については、こちらから ↓
-
【2021年版】WordPressクラシックエディタはいつまで使える？2021年末でサポート終了って本当？【少なくとも2022年までClassic Editorは使えそう／代替プラグインもあり】
続きを見る
つづいて2つ目のステップは、「Contact Form 7」を使って…
ブログの「お問い合わせフォーム」を作成する手順
について
まずはWordPress管理画面の一覧メニューから…
↑ お問い合わせ ＞ コンタクトフォーム をクリックしましょう
すると…
↑ このような画面になるので、画面中央に表示されている…
↑ こちらの「ショートコード」を、両端の [ ] という記号まで含めて、丸々コピーしておきます
「ショートコード」をコピーできたら、今度はWordPress管理画面の…
↑ 固定ページ ＞ 新規追加 をクリックしましょう
ここから、この「ショートコード」を使って…
「お問い合わせフォーム」の固定ページ
を作成していきます
関連
「そもそも固定ページってなに…？」という場合は、こちらをどうぞ ↓
-
WordPressブログの「投稿」と「固定ページ」の違いって？どう使い分けるの？【記事作成の超基本】
続きを見る
「固定ページ」の編集画面が開いたら、まずは1番上側に表示されている…
↑ こちらの「タイトル」欄に、お問い合わせフォームの「ページタイトル」となる任意の名称を入力しましょう
このタイトル名は、特にこだわりがなければ…
↑ このように、 お問い合わせ といったシンプルな名称が無難でおすすめです
タイトル名を入力すると、その下に…
↑ このように「パーマリンク」という設定欄が表示されるので、「編集」というボタンをクリックします
補足
タイトル名を入力しても「パーマリンク」欄が表示されない場合は、編集画面の右側にある「下書き保存」ボタンを一旦クリックすると表示されます
「編集」ボタンをクリックしたら…
↑ このように「パーマリンク」の入力フォームが開くので、このなかを「任意の文字列」に入力し直してから、「OK」ボタンをクリックしましょう
ここは特にこだわりがなければ、上の画像例のように「お問い合わせ」を意味する contact といった文字列が、シンプルでわかりやすいと思います
ちなみに！
この「パーマリンク」は、さきほどの「ページタイトル」と違って…
1度そのページを「公開」したら、基本的にはあとから変更しない
のが鉄則です
関連
「公開した後のパーマリンク変更はなんでダメなの？」「そもそもパーマリンクってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPressの「パーマリンク設定」とは？3つの注意点と「初期設定」手順を初心者向けに解説【日本語スラッグは文字化けする】
続きを見る
ということで！
「パーマリンク」の設定もできたら、その下側に表示されている…
↑ こちらの本文エリアを見ていきます
まず、本文エリアの「右上」に並んでいる…
↑ この…
- ビジュアル
- テキスト
という2つのタブについては、「ビジュアル」モードのままでOKです
「ビジュアル」タブが選択されていることを確認したら、この本文エリア内に、さきほどコピーしておいた「ショートコード」を…
↑ このように、両端の [ ] という記号まで含めて、丸々貼りつけましょう
「ショートコード」を貼りつけたら、あとはこのページを「公開」すればOKなんですが…
ちなみに！
自分はこの「お問い合わせフォーム」ページについては、「SEO」面を考慮して…
NOINDEX
に設定しています
関連
「NOINDEXってなに…？」という場合は、こちらをどうぞ ↓
-
WordPressブログの「INDEX」と「NOINDEX」とは？設定手順と、使い分けのポイント【記事作成の超基本】
続きを見る
「SEO」の観点をふまえると、ブログのページはなんでもかんでも「INDEX＝検索結果に掲載」させればいいわけではなく…
「検索からのアクセスをそもそも見込んでいない」ような役割
のページについては、サイト全体のSEO評価を考慮して「NOINDEX＝検索結果からあえて除外」させる方が無難という見解からです
※あくまで一般論をふまえたうえでの個人的な見解になります。 当該ページを「NOINDEX」させることが必ずしもSEO面でプラスであることを断定、保証するものではありません。最終的な判断はご自身の責任で行ってください。
補足
ページごとで個別に「NOINDEX」を設定する手順については、導入しているWordPressテーマなどによって異なります（テーマによっては、個別で設定できない可能性もあります）
参考までに、このブログでも使用中のテーマ「WING AFFINGER5」の場合だと、投稿・固定ページの編集画面で…
↑ 画面の右側にある、こちらのフォームから設定可能です
ということで！
本題に戻って、さきほどの「ショートコード」を本文エリアに貼りつけたら、画面の右側にある…
↑ こちらの「公開」ボタンをクリックして、「お問い合わせフォーム」ページの作成は完了となります🐣
あとは、この作成した「固定ページ」をブログの…
- 「ヘッダー」メニュー
- 「フッター」メニュー
など、任意のエリアに設置すればOKです
ただし！
この作成したページをヘッダーやフッターに設置する手順というのも、導入している「テーマ」によって若干異なる可能性があるんですね
参考までに…
WordPressテーマ「WING AFFINGER5」における、作成したページを「ヘッダー・フッター」メニューへ設置する手順についてはこちらをどうぞ ↓
-
【スマホ用もあり】AFFINGER5で「ヘッダー＆フッターメニュー」を作成する手順【WordPressブログ】
続きを見る
ということで、最後に！
実際にお問い合わせメールが送信されたとき
の、「送信先」となるメールアドレスの設定方法を見ていきましょう🐥
ステップ③：「Contact Form 7」のお問い合わせフォームから送信されたメッセージの、「送信先」メールアドレスを設定する方法【デフォルト設定は、管理者メールアドレス】
最後のステップは、「Contact Form 7」で作ったお問い合わせフォームから実際に「メール」が送信されたときの…
「送信先」メールアドレスの設定方法
について
というのも…
「Contact Form 7」のお問い合わせフォームから送信されたメッセージというのは、「WordPress管理画面」のなかで確認や返信ができるわけではなく…
wordpress@ドメイン名
（例 wordpress@azuki-moomoo.com ）
という「送信元」メールアドレスから、あらかじめ「Contact Form 7」側で設定してある…
「送信先」メールアドレス
に、自動で届くようになっているんですね
で！
「Contact Form 7」のデフォルト設定では、WordPressを開設（＝インストール）した際に自分で登録した…
管理者メールアドレス
というのが、そのまま「送信先」メールアドレスとして設定されています
ちなみにこの「管理者メールアドレス」は、WordPress管理画面の…
↑ 設定 ＞ 一般 をクリックしたなかにある…
↑ こちらの項目のこと
とはいえ…
メッセージの送信先に、この「管理者メールアドレス」を使いたくない
という人も、正直多いんじゃないかと思います
特に！
読者さんからのメッセージを受け取った「送信先」メールアドレスでそのままメールのやり取りを始めてしまった場合…
自分の「管理者メールアドレス」が、相手方にバレてしまう
ので、「Contact Form 7」側の「送信先」メアドについては最初に変更しておいた方が安心です
手順は簡単で、まずはWordPress管理画面から…
↑ お問い合わせ ＞ コンタクトフォーム をクリックし、そのなかにある…
↑ こちらの「コンタクトフォーム 1」という場所をクリックします
つづいて、画面上部の…
↑「メール」というタブをクリックして開きましょう
すると…
↑ このような設定画面が開くので、1番上側にある…
↑ こちらの「送信先」というフォームを見てみます
この「送信先」、つまりブログ運営者から見た場合の「受信するメアド」となる項目に、デフォルトの状態では…
[_site_admin_email]
というタグが設定されていて、このタグによって「WordPressの管理者メールアドレス」がそのまま適用されるようになっています
この最初から入っている「タグ」を丸々消して…
↑ このように、メッセージを受信したい「任意のメールアドレス」を直接入れ直しましょう
「送信先」のフォームを変更できたら、画面の右側もしくは下側にある「保存」ボタンをクリックして、設定は完了です🐥
ちなみに！
お問い合わせを送信された「読者さん」側のお名前とメアドについては、その下の「メッセージ本文」というフォームに最初から入っている…
↑ こちらの…
- [your-name] → お問い合わせの【お名前】欄に入力された、読者さんのお名前
- [your-email] → 同じく【メールアドレス】欄に入力された、読者さんのメアド
というタグによって、それぞれ自動で適用されるようになっています
そして、最後にもう1点！
この「Contact Form 7」では、いざ読者さんがメッセージを送ってくれた際に…
メッセージを受け付けました！
といった旨の「確認メール」を自動で返信するよう、追加で設定することも可能です
▼ 上記の「自動返信」設定については、こちらをどうぞ ▼
-
【2021年】WordPressプラグイン「Contact Form 7」で自動返信を設定するやり方【おすすめなテンプレ設定】
続きを見る
関連
▼ WordPressの「おすすめプラグイン一覧」についてはこちら ▼
-
【2021年】WordPressで愛用中のおすすめプラグイン14選と、設定方法＆使い方を初心者向けに1から解説【専業ブロガー4年目が厳選】
続きを見る
今回の記事はこちらの章に属しています
＼ このブログでも愛用中！／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^