あずきです🐥
WordPressをやるなら欠かせない定番プラグインの1つ…
Contact Form 7
について、その導入手順から設定方法・使い方までブログ初心者さん向けに1から解説していきます
まず！
この「Contact Form 7」は、WordPressのブログで…
お問い合わせフォーム
を作成するためのプラグインです
具体的には…
↑ このような「お問い合わせフォーム」をサクッと作ることができ、一般的には…
↑ こういった「フッター」メニューなどに設置しておくのが定石です
ということで、今回は「3つ」のステップで丁寧に解説していきます
- 「Contact Form 7」の導入手順【インストールと有効化】
- 「Contact Form 7」の設定方法・使い方【お問い合わせフォームの作り方】
- お問い合わせメッセージの「送信先メールアドレス」を設定する方法
関連
作成したお問い合わせフォームを実際に「ヘッダー」や「フッター」へ設置する手順というのは、使用しているWordPressテーマごとで若干変わってきます
このブログでも使用中のテーマ「ACTION AFFINGER6」におけるヘッダー・フッターメニューへの設置方法は、こちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
※「ヘッダー」とは、ブログの最上部エリアのことを言います
ということで、さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
Contents
【2021年】「Contact Form 7」の設定方法・使い方を初心者向けに解説【WordPressプラグイン／ブログお問い合わせフォームの作り方】
ステップ１：プラグイン「Contact Form 7」をWordPressに導入する手順【インストール＆有効化】
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
まずはじめに…
プラグイン「Contact Form 7」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Contact Form 7 と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Contact Form 7」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ２：プラグイン「Contact Form 7」の設定方法・使い方【お問い合わせフォームの作り方】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
つづいて2つ目のステップは、「Contact Form 7」を使って…
ブログの「お問い合わせフォーム」を作成する手順
について
まずはWordPress管理画面の一覧メニューから…
↑ お問い合わせ ＞ コンタクトフォーム をクリックしましょう
すると…
↑ このような画面になるので、画面中央に表示されている…
↑ こちらの「ショートコード」を、両端の [ ] という記号まで含めて、丸々コピーしておきます
「ショートコード」をコピーできたら、今度はWordPress管理画面の…
↑ 固定ページ ＞ 新規追加 をクリックしましょう
ここから、この「ショートコード」を使って…
「お問い合わせフォーム」の固定ページ
を作成していきます
関連
「そもそも固定ページってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPress「投稿・固定ページ」の違いとは？使い分けの実践的なポイントを初心者向けに解説【具体例あり／ブログの記事作り】
続きを見る
「固定ページ」の編集画面が開いたら、まずは1番上側に表示されている…
↑ こちらの「タイトル」欄に、お問い合わせフォームの「ページタイトル」となる任意の名称を入力しましょう
このタイトル名は、特にこだわりがなければ…
↑ このように、 お問い合わせ といったシンプルな名称が無難でおすすめです
タイトル名を入力すると、その下に…
↑ このように「パーマリンク」という設定欄が表示されるので、「編集」というボタンをクリックします
補足
タイトル名を入力しても「パーマリンク」欄が表示されない場合は、編集画面の右側にある「下書き保存」ボタンを一旦クリックすると表示されます
「編集」ボタンをクリックしたら…
↑ このように「パーマリンク」の入力フォームが開くので、このなかを「任意の文字列」に入力し直してから、「OK」ボタンをクリックしましょう
ここは特にこだわりがなければ、上の画像例のように「お問い合わせ」を意味する contact といった文字列が、シンプルでわかりやすいと思います
ちなみに！
この「パーマリンク」は、さきほどの「ページタイトル」と違って…
1度そのページを「公開」したら、基本的にはあとから変更しない
のが鉄則です
関連
ということで！
「パーマリンク」の設定もできたら、その下側に表示されている…
↑ こちらの本文エリアを見ていきます
まず、本文エリアの「右上」に並んでいる…
↑ この…
- ビジュアル
- テキスト
という2つのタブについては、「ビジュアル」モードのままでOKです
「ビジュアル」タブが選択されていることを確認したら、この本文エリア内に、さきほどコピーしておいた「ショートコード」を…
↑ このように、両端の [ ] という記号まで含めて、丸々貼りつけましょう
「ショートコード」を貼りつけたら、あとはこのページを「公開」すればOKなんですが…
ちなみに！
自分はこの「お問い合わせフォーム」ページについては、「SEO」面を考慮して…
NOINDEX
に設定しています
関連
「NOINDEXってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPress「INDEX・NOINDEX」とは？記事ごとの設定方法を初心者向けに解説【検索エンジンへのインデックス設定】
続きを見る
「SEO」の観点をふまえると、ブログのページはなんでもかんでも「INDEX＝検索結果に掲載」させればいいわけではなく…
検索からのアクセスをそもそも見込んでいないページ
については、サイト全体のSEO評価を考慮して「NOINDEX＝検索結果からあえて除外」させる方が無難という判断からです
※あくまで一般論をふまえたうえでの個人的な見解になります。 当該ページを「NOINDEX」させることが必ずしもSEO面でプラスであることを断定、保証するものではありません。最終的な判断はご自身の責任で行ってください。
補足
ページごとで個別に「NOINDEX」を設定する手順については、導入しているWordPressテーマなどによって異なります（テーマによっては、個別で設定できない可能性もあります）
参考までに、このブログでも使用中のテーマ「ACTION AFFINGER6」の場合だと、投稿・固定ページの編集画面で…
↑ 画面の右側にある、こちらのフォームから設定可能です
ということで！
本題に戻って、さきほどの「ショートコード」を本文エリアに貼りつけたら、画面の右側にある…
↑ こちらの「公開」ボタンをクリックして、「お問い合わせフォーム」ページの作成は完了となります🐣
あとは、この作成した「固定ページ」をブログの…
- 「ヘッダー」メニュー
- 「フッター」メニュー
など、任意のエリアに設置すればOKです
ただし！
この作成したページをヘッダーやフッターに設置する手順というのも、導入している「テーマ」によって若干異なる可能性があるんですね
参考までに…
WordPressテーマ「ACTION AFFINGER6」における、作成したページを「ヘッダー・フッター」メニューへ設置する手順についてはこちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
ということで、最後に！
実際にお問い合わせメールが送信されたとき
の、「送信先」となるメールアドレスの設定方法を見ていきましょう🐥
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ３：「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年】「Contact Form 7」で自動返信を設定するやり方を1から解説【WordPressプラグイン／返信文の雛形あり】
続きを見る
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020