あずきです🐥
WordPressブログにおける代表的なプラグインの1つ…
Contact Form 7
の基本的な使い方について、ブログ初心者さん向けに1から解説していきます
まず「Contact Form 7」は、ブログに必須な「お問い合わせフォーム」の作成ツールとして非常におすすめ（もちろん無料）
具体的には、3つのポイントで見ていきます
- プラグインの導入方法
- お問い合わせフォームの作成から設置まで
- 基本的な設定方法（自動返信）
さっそく見ていきましょー🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします
Contents
【WordPressプラグイン】Contact Form 7の基本的な使い方【お問い合わせフォームの作成・設置・基本設定】
「Contact Form 7」の導入方法【インストールと有効化】
普通に「インストール＆有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです
① WordPress管理画面 ＞ プラグイン ＞ 新規追加
②画面右上の入力欄に「Contact Form 7」と入力
③ ↑ のアイコンが目印のプラグイン「Contact Form 7」が表示されるので、 今すぐインストール ＞ 有効化 の順にクリック
プラグインの導入はこれでOKです🐥
「Contact Form 7」でお問い合わせフォームを作成・設置する方法【2つのステップ】
大きく2つの手順です
- 固定ページで、お問い合わせフォームを作成
- 作成したお問い合わせページを、任意の場所に設置
順に見ていきますね🐥
ステップ①：固定ページで、お問い合わせフォームを作成
まずはWordPress管理画面から…
↑ お問い合わせ ＞ コンタクトフォーム をクリックします
↑「コンタクトフォーム１」という項目の右側にあるショートコードを、 [ ] まで含めて丸々コピーします
↑ 固定ページ ＞ 新規追加 をクリックします
↑ 本文の入力欄に、さきほどコピーしたショートコードを貼り付けます（画面はビジュアルエディタのままでOK！）
あとは、いつもの記事編集と同じように…
- ページタイトル（「お問い合わせ」が一般的）
- パーマリンク（「contact」が一般的）
を入力しましょう
ちなみにお問い合わせページは、「NOINDEX」「NOFOLLOW」に設定しておくのがSEO面を考えると無難です
あとは「公開」をクリックすればOK。 これでもう、固定ページで「お問い合わせフォーム」が作成できました
ここから、ブログ内にこの固定ページを設置していきます（次パートへ！）
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
ステップ②：作成したお問い合わせページを、好きな場所に設置【WING AFFINGER5を例に解説】
はじめに
下記は、当ブログでも導入しているWordPressテーマ「WING AFFINGER5」の場合における手順です
使っているWordPressテーマによって、手順は変わる可能性があります（具体的な場所は、下記ステップのなかでご紹介しています）
今回は、お問い合わせページの一般的な設置場所である「フッター」に置いてみたいと思います
↑ WordPress管理画面 ＞ 外観 ＞ メニュー をクリックします
↑「メニュー名」入力欄に「フッターメニュー」など任意の名前を入力して、「メニューを作成」をクリックします
つづいて、画面左側の「固定ページ」タブをクリックします（最初から開いてる場合は、そのままで大丈夫です）
↑ 作成した固定ページ「お問い合わせ」が表示されているはずなので、ここにチェックを入れて「メニューに追加」をクリックします
↑「フッターメニュー（名前は任意）」に、「お問い合わせ」が追加されました
この状態で、その下の「メニュー設定」から「フッター用メニュー」にチェックを入れます
導入しているWordPressテーマによって、この選択肢は変わってきます（上記は「WING AFFINGER5」における例）
最後に、画面右下の「メニューを保存」をクリックすれば完了です🐥
実際に反映されているか、プレビューを見てみましょう
↑ フッター（ブログ下部）に、「お問い合わせ」が無事設置されているはずです。 クリックしてみると…
↑ こんな立派なお問い合わせフォームが表示されました
最後に、プラグインの基本的な設定方法について見ていきます🐥
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
基本的な設定方法【自動返信】
「Contact Form 7」では、ブログ訪問者さんがいざ「お問い合わせフォーム」からお問い合わせを送ってくださった際に…
お問い合わせありがとうございます
といった旨の「送信確認メール」が（ブログ訪問者さんのメアド宛に）自動で返信されるように設定することができます
またその際の表示内容や形式についても、任意のスタイルにカスタマイズが可能です
この「自動返信」の設定自体は必須ではありませんが、お問い合わせを送ってくださった方に…
- ちゃんと送信できたこと
- お問い合わせへの感謝
を即座にお伝えできるようになります
つづきはこちら
-
WordPressプラグイン「Contact Form 7」自動返信のおすすめな設定方法【コピペOKのテンプレあり】
続きを見る
大変お疲れさまでした♪
あずき（Twitter：@azuki_rinrin）
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^