WORDPRESS

【2021年】「Contact Form 7」の設定方法・使い方を初心者向けに解説【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テーマごとで若干変わってきます

 

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

AFFINGER6「ヘッダー&フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

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

 

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

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

【2021年】「Contact Form 7」の設定方法・使い方を初心者向けに解説【WordPressプラグイン/ブログお問い合わせフォームの作り方】

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

WordPress ヘッダー b-01

 

注意

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

 

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

 

まずはじめに…

プラグイン「Contact Form 7」の導入手順

について

 

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

WordPressプラグイン インストール 1-01

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

 

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

WordPressプラグイン インストール 1-02

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

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

↑ このアイコンが目印のプラグイン「Contact Form 7」を探し、右上の「今すぐインストール」ボタンをクリックします

 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

ステップ2:プラグイン「Contact Form 7」の設定方法・使い方【お問い合わせフォームの作り方】

WordPress ヘッダー b-02

 
 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

つづいて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プラグイン「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テーマなどによって異なります(テーマによっては、個別で設定できない可能性もあります)

 

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

 

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

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

 

ということで!

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

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

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

 

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

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

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

 

ただし!

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

 

参考までに…

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

AFFINGER6「ヘッダー&フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 

ということで、最後に!

 

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

 

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

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

WordPress ヘッダー b-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」では、いざ読者さんがメッセージを送ってくれた際に…

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

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

 

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

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

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

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS