[画像付き]Contact Form 7の使い方とおすすめ設定を解説!![WordPressプラグイン]

Pocket

目次

Contact Form 7とは

Contact Form 7 はWordPressサイトに簡単にお問い合わせフォームを作成することのできるプラグインです。

作者がTakayuki Miyoshiさんという日本人の方で、海外製のプラグインが多い中で日本人の私達にも使いやすいプラグインとなっています。

Contact Form 7 の特徴を簡単にまとめるとこんな感じです!

  • 初心者でも簡単にお問い合わせフォームの作成・導入が行える
  • デフォルトで汎用的なテンプレートが用意されている
  • 目的に応じたカスタマイズが可能
  • メールの自動返信機能や確認ページの設定もできる
  • 日本語に対応した公式のサポートページがある
  • 世界中に沢山の利用者がいるため、ネット上にたくさんの情報がある

Contact Form 7の基本的な使い方

それでは実際に「Contact Form 7」を使ってお問い合わせフォームを作っていきましょう!

簡単に手順をまとめると、

  1. Contact Form 7 をインストール・有効化
  2. Contact Form 7 の設定
  3. 実際に Contact Form 7 を使ってお問合せフォームを作る
  4. 投稿や固定ページにショートコードを貼り付ける

ざっとこんな感じです!

筆者も「Contact Form 7」を使ってお問い合わせフォームを作成していますが、簡単な操作で作成することができるのでとても便利です。

Contact Form 7をインストール

まずは自分のWordPressにプラグイン「Contact Form 7」をインストールしましょう。

STEP1 インストール

メニューから プラグイン > 新規追加

右上の検索ボックスで「Contact Form 7」を検索して [今すぐインストール] をクリック

STEP2 有効化

インストールが終わるとボタンの表示が [有効化] に変わるので、そのままクリックして有効化する。

お問合せフォームの作成

続いてお問合せフォームを実際に作っていきます!

STEP1 設定画面を開く

Contact Form 7 のインストールが完了すると、

WordPressのメニューに [お問い合わせ] という項目が追加されるので、そちらをクリックして設定画面を開きます。

設定画面を開いたら、画面上部の [新規追加] ボタンをクリックします。

そうすると、お問合せフォームの編集画面が現れます。

タイトルとフォームタブの設定

・タイトル欄に任意のタイトルを入力する

〜管理用なのでなんでもOK!(例 : 「お問合せフォーム」など)〜

・フォームタブの設定

タイトル下のフォームタブで実際にお問合せフォームの中身を設定していきます。

デフォルトでは、

  • 氏名
  • メールアドレス
  • 題名
  • メッセージ本文
  • 送信ボタン

    の5つが設定されています。

    お問合せフォームに必要な項目は最低限揃っているので、今回はそのまま進んでいきたいと思います。

    メールタブの設定(自動返信の設定)

    次にフォームタブの右隣にあるメールタブの設定をしていきます。

    上から順に、

    • 送信先 : お問い合わせが来た時にそれを受け取るメールアドレス
    • 送信元 : お問い合わせをした人の名前
    • 題名 : メールを受け取る際の件名
    • 追加ヘッダー : 複数のメールアドレスでお問い合わせを受け取りたい場合はここでで追加
    • メッセージ本文 : 実際に受け取るメールの内容

      となっています。

      特に変更がない場合にはこのままで、画面下部の [保存] をクリックしましょう。

      ※[保存] のクリックを忘れてしまうとせっかく設定した項目が消えてしまうので注意しましょう。

      メッセージタブを設定する

      メッセージタブの設定では、お問い合わせを送信する際のエラーメッセージや確認メッセージの文言を編集することができます。

      上記のように、各種挙動に応じたメッセージを設定することができます。
      私は特に変更なくそのまま使用しています。

      このまま設定していっても問題ありませんが、
      デフォルトの設定のままではお問い合わせを送信した際に何もメッセージが表示されません。

      ユーザー側としては本当にお問い合わせが送信できているのかがわからないため不便です。

      フォームの設定画面で送信完了メッセージを表示したい場所に、[response]と打ち込みます。

      私はわかりやすいように上下に挿入しています。

      こうすることでお問い合わせを送信した際に、下記のようにメッセージが表示されるようになります。

      その他の設定

      その他の設定では、コードを追加することでお問い合わせフォームを更にカスタマイズすることができます。
      お問い合わせ送信後のサンクスページなど、

      こちらについては後日設定方法をまとめた記事をupしたいと思っています。

      フォームをページに設置して公開する

      上記で設定したお問い合わせフォームを実際に公開してみましょう!

      STEP1 ショートコードのコピー

      設定の保存が完了すると、タイトル入力欄の下にショートコードが表示されるのでコピーしておきましょう。

      このショートコードを投稿や固定ページにペーストすることで、作成したお問合せフォームを簡単に追加することができます。

      STEP2 実際にお問い合わせページを設置してみる

      実際に筆者がサイト上に設置しているお問合せフォームがこちらになります↓

      あわせて読みたい
      お問い合せ お仕事のお問い合わせなどはこちらからお願いします。 または、 hpfull.shintaro@gmail.com へ直接お願いいたします。

      作成方法としては、
      固定ページの新規作成から本文に先程のショートコードをペーストしただけです。

      たったのこれだけでお問合せフォームをサイトに公開することができちゃいます!

      Contact Form 7のおすすめカスタマイズ

      正直言って特にありません!!笑

      私も特にデフォルトから変更することなく使用しています。
      強いて言うならばお問い合わせ送信後の確認メッセージを表示させるくらいです。

      特に面倒な設定がいらずにすぐに導入できるのがContact Form 7の魅力だとも言えますね!

      Contact Form 7 まとめ

      Contact Form 7は自身のWordPressサイトに簡単にお問い合わせフォームを設置することのできる便利なプラグインアプリとなっています。

      使用している方も多く安心して使えるプラグインとなっているためまずはインストールしてみてサクッと自身のWordPressサイトにお問い合わせフォームを設置しちゃいましょう!

      • 初心者でも簡単にお問い合わせフォームの作成・導入が行える
      • デフォルトで汎用的なテンプレートが用意されている
      • 日本語に対応した公式のサポートページがあって使いやすい
      • 世界中に沢山の利用者がいるため、ネット上にたくさんの情報がある
      あわせて読みたい
      [画像付き]SEO SIMPLE PACKの使い方や設定を初心者向けに解説!![WordPressでお手軽SEO対策] この記事ではSEO対策をシンプルに設定できるプラグインである、「SEO SIMPLE PACK」の使い方について画像を用いて解説していきたいと思います!! 【】 「SEO SIMPLE PA...
      Pocket

      よかったらシェアしてね!
      • URLをコピーしました!
      • URLをコピーしました!

      コメント

      コメントする

      目次