WORDPRESS

WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作る方法【ブログにお問い合わせページを設置】

WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作る方法 アイキャッチ



あずきです🐥

WordPressブログにおける代表的なプラグインの1つ…

Contact Form 7

の基本的な使い方について、ブログ初心者さん向けに1から解説していきます

まず「Contact Form 7」は、ブログに必須な「お問い合わせフォーム」の作成ツールとして非常におすすめ(もちろん無料)

プロっぽいお問い合わせページが、いとも簡単に作れるよ!

具体的には、3つのポイントで見ていきます

  • プラグインの導入方法
  • お問い合わせフォームの作成から設置まで
  • 基本的な設定方法(自動返信)

さっそく見ていきましょー🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

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

WordPressブログガイド 第4章「プラグイン」編 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

【WordPressプラグイン】Contact Form 7の基本的な使い方【お問い合わせフォームの作成・設置・基本設定】

「Contact Form 7」の導入方法【インストールと有効化】

WordPressブログ「完全初心者」ガイド 見出し a-01

普通に「インストール&有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです

① WordPress管理画面 > プラグイン > 新規追加

②画面右上の入力欄に「Contact Form 7」と入力

wordpress-contact-form-7-202001-icon

③ ↑ のアイコンが目印のプラグイン「Contact Form 7」が表示されるので、 今すぐインストール > 有効化 の順にクリック

プラグインの導入はこれでOKです🐥

「Contact Form 7」でお問い合わせフォームを作成・設置する方法【2つのステップ】

大きく2つの手順です

  1. 固定ページで、お問い合わせフォームを作成
  2. 作成したお問い合わせページを、任意の場所に設置

順に見ていきますね🐥

ステップ①:固定ページで、お問い合わせフォームを作成

WordPressブログ「完全初心者」ガイド 見出し a-02

まずはWordPress管理画面から…

wordpress-contact-form-7-202001_1-01

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

wordpress-contact-form-7-202001_1-02

↑「コンタクトフォーム1」という項目の右側にあるショートコードを、 [ ] まで含めて丸々コピーします

コピーは、「Ctrl」+「C」!

wordpress-contact-form-7-202001_1-03

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

wordpress-contact-form-7-202001_1-04

↑ 本文の入力欄に、さきほどコピーしたショートコードを貼り付けます(画面はビジュアルエディタのままでOK!)

貼りつけは、「Ctrl」+「V」!

あとは、いつもの記事編集と同じように…

  • ページタイトル(「お問い合わせ」が一般的)
  • パーマリンク(「contact」が一般的)

を入力しましょう

ちなみにお問い合わせページは、「NOINDEX」「NOFOLLOW」に設定しておくのがSEO面を考えると無難です

あとは「公開」をクリックすればOK。 これでもう、固定ページで「お問い合わせフォーム」が作成できました

ここから、ブログ内にこの固定ページを設置していきます(次パートへ!)

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

ステップ②:作成したお問い合わせページを、好きな場所に設置【WING AFFINGER5を例に解説】

WordPressブログ「完全初心者」ガイド 見出し a-03

はじめに

下記は、当ブログでも導入しているWordPressテーマ「WING AFFINGER5」の場合における手順です

使っているWordPressテーマによって、手順は変わる可能性があります(具体的な場所は、下記ステップのなかでご紹介しています)

今回は、お問い合わせページの一般的な設置場所である「フッター」に置いてみたいと思います

フッターは、サイトの1番下側!

wordpress-contact-form-7-202001_2-01

↑ WordPress管理画面 > 外観 > メニュー をクリックします

wordpress-contact-form-7-202001_2-02

↑「メニュー名」入力欄に「フッターメニュー」など任意の名前を入力して、「メニューを作成」をクリックします

この「メニュー名」は、サイト訪問者に見られるものではないから自分のわかりやすい名称でOK!

つづいて、画面左側の「固定ページ」タブをクリックします(最初から開いてる場合は、そのままで大丈夫です)

wordpress-contact-form-7-202001_2-03

↑ 作成した固定ページ「お問い合わせ」が表示されているはずなので、ここにチェックを入れて「メニューに追加」をクリックします

wordpress-contact-form-7-202001_2-04

↑「フッターメニュー(名前は任意)」に、「お問い合わせ」が追加されました

この状態で、その下の「メニュー設定」から「フッター用メニュー」にチェックを入れます

導入しているWordPressテーマによって、この選択肢は変わってきます(上記は「WING AFFINGER5」における例)

最後に、画面右下の「メニューを保存」をクリックすれば完了です🐥

実際に反映されているか、プレビューを見てみましょう

wordpress-contact-form-7-202001_2-05

↑ フッター(ブログ下部)に、「お問い合わせ」が無事設置されているはずです。 クリックしてみると…

wordpress-contact-form-7-202001_2-06

↑ こんな立派なお問い合わせフォームが表示されました

最後に、プラグインの基本的な設定方法について見ていきます🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

基本的な設定方法【自動返信】

WordPressブログ「完全初心者」ガイド 見出し a-04

「Contact Form 7」では、ブログ訪問者さんがいざ「お問い合わせフォーム」からお問い合わせを送ってくださった際に…

お問い合わせありがとうございます

といった旨の「送信確認メール」が(ブログ訪問者さんのメアド宛に)自動で返信されるように設定することができます

またその際の表示内容や形式についても、任意のスタイルにカスタマイズが可能です

この「自動返信」の設定自体は必須ではありませんが、お問い合わせを送ってくださった方に…

  • ちゃんと送信できたこと
  • お問い合わせへの感謝

を即座にお伝えできるようになります

設定方法も簡単!

つづきはこちら

WordPressプラグイン「Contact Form 7」自動返信のおすすめな設定方法 アイキャッチ
WordPressプラグイン「Contact Form 7」自動返信のおすすめな設定方法【コピペOKのテンプレあり】

続きを見る

 

大変お疲れさまでした♪

あずき(Twitter:@azuki_rinrin

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

 ✔ 洗練された美しいデザインと、「変幻自在」な圧巻のバリエーション!

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

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

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ