contact-form-7-setting

WordPressブログ運営

Contact Form 7とは?使い方を優しく解説【お問い合わせフォーム・WordPressプラグイン】

更新日:

この記事では、

  • WordPressプラグイン「Contact Form 7」とは?
  • 「Contact Form 7」の導入方法(インストールと有効化)
  • 「Contact Form 7」の使い方(お問い合わせフォームの作成)

この3点について、わかりやすく見ていきます。ちなみに「Contact Form 7」は通常無料のプラグインです。

初心者向けな内容です。

【この記事の執筆者について】まるといいます。主にブログ・アフィリエイトで生きています。

はじめに

プラグインの種類によっては、導入済みのテーマやプラグインとの相性、プラグイン自体の問題などにより、WordPressに不具合が発生する可能性があります。プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任でお願いいたします。

【関連記事】⇒BackWPUpの設定方法と使い方を優しく解説【バックアップ・WordPressプラグイン】

WordPressプラグイン「Contact Form 7」とは?

「Contact Form 7」は、WordPressの固定ページで「お問い合わせフォーム」を作成できる代表的なプラグインです(富士山のアイコンが目印)。

例えば ↓↓↓ こんな感じのお問い合わせフォームが作れます♪

画像はクリックで拡大されます

使い方も簡単です。さっそく見ていきましょう。

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

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

普通に「インストールと有効化」をするだけなので、わかる場合は飛ばしてください♪

WordPress管理画面 > プラグイン > 新規追加 をクリックします。

contact-form-7-setting_01

画像はクリックで拡大されます

検索入力欄に「Contact Form 7」と入力します。

プラグイン「Contact Form 7」が表示されるので、 今すぐインストール > 有効化 の順にクリックします。

contact-form-7-setting_02

画像はクリックで拡大されます

これでインストールと有効化はOKです♪

「Contact Form 7」の使い方(お問い合わせフォームの作成)

WordPress管理画面 > お問い合わせ > コンタクトフォーム をクリックします。

contact-form-7-setting_03

画像はクリックで拡大されます

「コンタクトフォーム1」という表記の右側に、ショートコードが表示されます。

このショートコード [contact-form-7 ~ title="コンタクトフォーム1"] までを、丸々コピーしておきます(この後すぐ使います)。

contact-form-7-setting_04

画像はクリックで拡大されます

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

contact-form-7-setting_05

画像はクリックで拡大されます

固定ページのタイトル名に「お問い合わせ」など、お問い合わせフォームページのタイトルとなる任意の名前を入力します。

テキストモードに切り替えるため、「テキスト」をクリックします。

contact-form-7-setting_06

画像はクリックで拡大されます

本文入力欄の一行目に、先ほどコピーしておいたショートコードを貼り付けます。

contact-form-7-setting_07

画像はクリックで拡大されます

あとは通常の記事や固定ページと同じように、パーマリンクを設定して「公開」をクリックします。

【関連記事】⇒パーマリンクとは?理想的なWordPressパーマリンク・スラッグの設定方法【初心者向け】

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

「お問い合わせフォーム」をトップページに設置する方法

やり方は、大きく次の2つです。

  • 【パターン1】「メニュー」から設置する方法
  • 【パターン2】「ウィジェット」から設置する方法

順に見ていきましょう♪

【パターン1】お問い合わせフォームを「メニュー」から設置

例として、トップページのヘッダー(つまり上部)に「お問い合わせフォーム」を設置してみます。

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

contact-form-7-setting_12

画像はクリックで拡大されます

「メニュー名」入力欄に、「トップページヘッダーメニュー」など任意の名前を入力して、「メニューを作成」をクリックします。

※フッターに設置したければ「トップページフッターメニュー」などの名前がわかりやすいです。

ちなみにこの「メニュー名」はサイト上には表示されませんので、あまり深く考える必要はありません。

「メニューを作成」をクリックします。

contact-form-7-setting_13

画像はクリックで拡大されます

左側の「固定ページ」の項目をクリックして開きます。

※最初から開いている場合は、そのままで大丈夫です。

先ほど作成した「お問い合わせ」が表示されているのでチェックを入れます。

「メニューに追加」をクリックします。

contact-form-7-setting_14

画像はクリックで拡大されます

↓↓↓ の画面のように、先ほど作成した新規メニュー「トップページヘッダーメニュー」の項目に、「お問い合わせ」が追加されていることを確認します。

「メニュー設定」の項目で、「トップメニュー」にチェックを入れます。

「メニューを保存」をクリックします。

contact-form-7-setting_15

画像はクリックで拡大されます

これでOKです♪

【パターン2】お問い合わせフォームを「ウィジェット」から設置

今度はトップページのフッター(つまり下部)に設置してみます。

WordPress管理画面 > 外観 > ウィジェット をクリックします。

contact-form-7-setting_19

画像はクリックで拡大されます

「利用できるウィジェット」一覧から「固定ページ」をドラッグして、右側の「フッター1」、もしくは「フッター2」の上でドロップします。

※「ドラッグ」はクリックを押しっ放し、「ドロップ」はクリックを放すことです。

contact-form-7-setting_20

画像はクリックで拡大されます

contact-form-7-setting_21

画像はクリックで拡大されます

「タイトル」:例として「サブメニュー」と名付けています(これがどこに表示されるのかは、このあと見ていきますね)。

「並び順」:ひとまずここでは、そのままでOKです(このあと見ていきます)。

「除外ページ」:ひとまずここでは、そのままでOKです(このあと見ていきます)。

「保存」をクリックします。

contact-form-7-setting_22

画像はクリックで拡大されます

プレビュー画面を見てみましょう。

WordPress管理画面の左上に表示されている「サイトタイトル名」をクリックして、プレビュー画面を表示させます。

contact-form-7-setting_23

画像はクリックで拡大されます

プレビュー画面を一番下までスクロールすると、↓の画面のように「サブメニュー」の項目に「お問い合わせ」が表示されています。

contact-form-7-setting_24

画像はクリックで拡大されます

先ほどの手順 ③ ~ ⑤ で設定した内容が、↓の画面 ③ ~ ⑤ の場所にそれぞれ反映されています。

「タイトル」で設定しておいた「サブメニュー」という名前が、↓の画面のように反映されています。

先ほどの「並び順」で設定した順番が、↓の画面のように反映されています。

今回トップページに設置したかったのは「お問い合わせページ」のみでしたが、↓の例では「サンプルページ」という関係ないページまで設置されてしまっています。

その理由は、今回行った方法では「すでに公開済みのすべての固定ページ」が設置されることになるからです。

contact-form-7-setting_25

画像はクリックで拡大されます

ということで、「お問い合わせ」とは無関係な「サンプルページ」の設置を解除していきます。

まず、WordPress管理画面に戻ります。

※戻るときは、プレビュー画面左上の「サイトタイトル名」をクリックで戻れます。

WordPress管理画面 > 固定ページ > 固定ページ一覧 をクリックします。

contact-form-7-setting_26

画像はクリックで拡大されます

設置を解除したい固定ページタイトル名(今回の例では「サンプルページ」)にカーソルを合わせます。

※ここではカーソルを合わせるだけで、クリックはしません。

↓の画面のように、画面一番下に長いURLが表示されます。その中の「post=〇〇&action」の 〇〇 にあたる数字を確認します。これがページIDです(2桁とは限りません)。

contact-form-7-setting_27

画像はクリックで拡大されます

WordPress管理画面 > 外観 > ウィジェット をクリックします。

contact-form-7-setting_28

画像はクリックで拡大されます

先ほどの フッター1 > 固定ページ:サブメニュー の順にクリックして開きます。

「除外ページ」で、先ほどチェックしたページID番号を入力します。

「保存」をクリックします。

contact-form-7-setting_29

画像はクリックで拡大されます

改めてプレビュー画面を見てみます。

無事、先ほどは表示されていた「サンプルページ」が消えています。

contact-form-7-setting_30

画像はクリックで拡大されます

「Contact Form 7」の基本的な使い方(お問い合わせフォームの作成)については以上です。

おしまい♪

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

この記事を書いている人

まる

丸10年の会社員生活から独立して、WEB業界でフリーランスをやってます。このブログでは、

・『WordPressブログ』の初心者向けマニュアル

・大好きな『東野・岡村の旅猿』ネタ

この2つを中心に発信しています。

↓↓↓ 記事を気に入って頂けたらぜひシェアをお願いします♪

-WordPressブログ運営

Copyright© MAL LiFE LOG , 2018 All Rights Reserved.