ブログのつくり方

【Contact Form 7】カスタマイズ・使い方① 基本設定・使い方を徹底解説!

Contact

こんな方に読んでほしい!

  • WordPressで問い合わせフォームを作りたい!
  • 会員登録フォームや申込みフォームを作りたい!
  • Contact Form 7の導入方法を知りたい!

ブログやコーポレートサイト(会社Webサイト)を始めると、その目的によっては、

  • 問い合わせフォーム
  • 会員登録フォーム
  • 申込みフォーム

など、お客さまの情報を入力いただくフォームが必要になります。

 

世界で500万回以上ダウンロードされ、インターネット上にもたくさんのカスタマイズ事例などがある「Contact Form 7」は、問い合わせフォームを作成するプラグインの決定版と言っても過言ではありません!

今回の記事は、この「 Contact Form 7 」のインストール方法と基本的な使い方を徹底解説します!

1. 「 Contact Form 7 」とは?

WordPressのプラグイン「 Contact Form 7 」は、500万回以上もダウンロードされ、問い合わせフォームを作成するプラグインの決定版と言うべき、問い合わせフォーム作成プラグインです。

インターネットビジネスラボの問い合わせフォームも「 Contact Form 7 」で作成しています。

contactform7_07_問い合わせフォーム事例

 

2. 「 Contact Form 7 」のインストール

公式プラグインなので、wordpressの管理画面からインストールできます。

左側メニューの プラグイン > 新規追加 をクリックし、「キーワード」欄に「 Contact Form 7 」をコピー&ペーストしてください。検索結果が表示されたら「今すぐインストール」をクリックします。

contactform7_01_インストール

 

インストールできたら、「有効化」のボタンに変わりますので、クリックして有効化してください。

contactform7_02_有効化

 

3. 「 Contact Form 7 」の初期設定など

3-1. ショートコードを確認、コピーする

WordPressの管理画面の左側メニューに「 お問い合わせ 」メニューが表示されるので、クリックします。

すると、以下のような一覧ページが表示されますので、「コンタクトフォーム1」をクリックします。

contactform7_03_プラグイン_コンタクトフォーム一覧

 

「コンタクトフォーム1」の編集画面が開きますので、上部の「ショートコード」と呼ばれる文字の列を選択し、コピーしておいてください。

contactform7_04_プラグイン_コンタクトフォーム編集

 

3-2. 問い合わせページを作成する

次に、お問い合わせページを作成しましょう。

デザインや内容は後で作っていきますので、とりあえず表示できればOKです。

contactform7_05_問い合わせページ作成

① 左側メニューの固定ページ > 新規追加をクリックします。

② あとあと使えるお問い合わせページを作るので、タイトルは「お問い合わせ」などにしてください。

③ タイトル入力後、マウスで別の場所をクリックするとパーマリンクが表示されますので、「contact」などとしてください。

④ さきほどコピーしたショートコードは、本文に貼り付けてください。

⑤ 最後に公開(更新)をクリックします。

 

3-3. 問い合わせページを見てみる

ページの上部に「ページを表示」というリンクが表示されます。これから編集ページと公開ページをを見比べながら編集していくので、今、見ている画面とは別に公開ページを開きましょう

右クリックして表示されるメニューの中に「新しいタブで表示する」のようなメニューがあればクリックしてください。

contactform7_06_問い合わせページ公開

ここに注意!

使っているブラウザでメニュー名が異なりますので、それっぽいのを選んで下さい。

 

こんな感じでお問い合わせフォームが作成されました。非常にシンプル!

contactform7_06_問い合わせページ公開ページ

まだ内側の設定をしていませんので、問い合わせフォームとしては機能しませんし、画面も見やすくはありません

次の記事では内部の設定やデザインなどをカスタマイズをしていきましょう!

 

4. まとめ

Contact Form 7は、日本人が作成したプラグインということもあり、日本語のドキュメントやカスタマイズ事例が多く、初心者でも検索すればたくさんの事例を知ることができます。

また、このプラグインの導入を前提とした「Contact Form 7」の追加機能のプラグインが充実していることも特徴です。

シンプルで有るが故に、とても奥深いプラグインです。

  • 問い合わせフォーム
  • アンケートフォーム
  • 会員登録フォーム
  • 申込フォーム

など、幅広く利用できますので、あなたのWebサイトでも導入しておきましょう!

\参考になったらポチッとお願いします!/

-ブログのつくり方
-

© 2020 インターネットビジネスラボ