広告 WORDPRESS

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】

専業ブロガー7年目のあかね猫です

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

Contact Form 7

の導入手順からおすすめな設定方法&使い方まで、実際の画像(20枚超)付きでブログ初心者さん向けに徹底解説していきます

 



 

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 top-01

 

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

お問い合わせフォーム

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

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

具体的には…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 top-02-a

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 top-02-b

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

フッターは、ブログの「最下部エリア」のことだね!
 

そんな「Contact Form 7」について、3つのステップで丁寧に解説していきます

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

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

 

補足

 

Contact Form 7で設定すると便利な「自動返信」のやり方については、別途こちらをどうぞ ↓

Contact Form 7の「自動返信」設定方法を画像たっぷりで徹底解説【WordPressのお問い合わせフォーム作成プラグイン/雛形付き】
Contact Form 7の「自動返信」設定方法を画像たっぷりで徹底解説【WordPressのお問い合わせフォーム作成プラグイン/雛形付き】

続きを見る

 

Contact Form 7における代表的なセキュリティ対策「reCAPTCHA v3」の登録・設定方法は、こちらから ↓

 

関連

 

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

 

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

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド】
AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド】

続きを見る

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

 

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】

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

WordPress ヘッダー b-01

はじめに

 

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】
BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】

続きを見る

 

まず1つ目のステップは…

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

について

 

WordPress管理画面の左側一覧から…

WordPressプラグインの導入手順(インストールと有効化) 1-01

↑【プラグイン】という項目にカーソルを合わせ、その右側に表示される【新規追加】をクリックしましょう

 

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

WordPressプラグインの導入手順(インストールと有効化) 1-02

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-1-01

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

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

【今すぐインストール】ボタンが【有効化】という表示に切り替わったら、つづいて…

有効化

というボタンもクリックしましょう

 

WordPressプラグインの導入手順(インストールと有効化) 1-03

↑ このように「プラグインを有効化しました」というメッセージが表示されたら、プラグインの「インストール&有効化」はもう完了です

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

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

WordPress ヘッダー b-02

 

注意

 

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

 

つづいて2つ目のステップは、WordPressプラグイン「Contact Form 7」における…

おすすめな設定方法&使い方

つまり、「Contact Form 7」を使って…

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

についてです

 

まずは、WordPress管理画面の左側一覧から…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-01-top

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

 

すると…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-01-01

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-01-02

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

コピーは Ctrl + C!
 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-top

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

 

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

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

を作成していきます

 
 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-01-a

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

 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-01-b

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

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

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-02-a

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

 

補足

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

 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-02-b

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

 

ここは特にこだわりがなければ、画像例のように「お問い合わせ」を意味する…

contact

といった文字列がシンプルでわかりやすいと思います

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

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

 

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

 

のが鉄則です

 
 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-03-a

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

 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-03-b

↑ この…

  • ビジュアル
  • テキスト

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

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

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-03-c

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

貼りつけは Ctrl + V!
 

「ショートコード」を本文エリアに貼りつけたら、画面の右側にある…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-2-02-04

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

 

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

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

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

 

参考までに…

 

当ブログでも使用中の「ACTION AFFINGER6」における、「ヘッダー&フッターメニュー」への固定ページ設置手順についてはこちらをどうぞ ↓

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド】
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管理画面の…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-01-01

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-01-02

↑ こちらの「管理者メールアドレス」という項目で設定してあるメールアドレスのこと

 

とはいえ…

 

この「管理者メールアドレスをメッセージの送信先としてそのまま使う」という状態は、正直おすすめしません

 

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

 

自分の「管理者メールアドレス」が、相手方に知れ渡ってしまうため

 

ですね

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

なので結論!

 

この「送信先メールアドレス設定」については、最初に変更しておくのが無難でおすすめです

 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-01

↑ お問い合わせ > コンタクトフォーム をクリックし、さらに…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-02

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

 

つづいて、画面上部の…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-03

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

 

すると…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-04

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-05-a

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

 

この「送信先」つまりブログ管理者から見たときの ”受信アドレス” に、デフォルトの状態では…

[_site_admin_email]

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

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

この最初から入っているタグを削除して…

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-05-b

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

第三者に知られても問題ない、「お問い合わせ専用」のメアドがおすすめ!
 

ということで…

 

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

 

ちなみに!

 

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

Contact Form 7のおすすめな設定方法&使い方を20枚超の画像付きで徹底解説【WordPressのお問い合わせフォーム作成プラグイン】 1-3-02-06

↑ こちらの…

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

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

つまりこの【your】は、運営者自身ではなく読者さんのこと!
 

補足

 

Contact Form 7で設定すると便利な「自動返信」のやり方については、別途こちらをどうぞ ↓

Contact Form 7の「自動返信」設定方法を画像たっぷりで徹底解説【WordPressのお問い合わせフォーム作成プラグイン/雛形付き】
Contact Form 7の「自動返信」設定方法を画像たっぷりで徹底解説【WordPressのお問い合わせフォーム作成プラグイン/雛形付き】

続きを見る

 

Contact Form 7における代表的なセキュリティ対策「reCAPTCHA v3」の登録・設定方法は、こちらから ↓

 

関連

 

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

 

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

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド】
AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド】

続きを見る

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

 

-WORDPRESS