WordPressプラグイン Contact Form 7のお問合わせフォームの作成と設置

WordPress プラグイン ContactForm7

前回はContactForm7プラグインのインストールと有効化を行いました。

Contact Form 7の使い方 1 インストールと有効化

今回はWordPress内のフォームの作成をおこないます。

デフォルトでは名前とメールアドレス、題名と本文の4項目が設定されていますので、そちらのフォームを作成します。

この記事を書いた時点(2017.8.5)での Contact Form 7 のバージョンは4.8.1です。

Contact Form 7

WordPress プラグインディレクトリ → https://ja.wordpress.org/plugins/contact-form-7/

公式ページ → https://contactform7.com/ja/

Contact Form 7 フォームの作成と設置

今回の手順を行う前にContactForm7プラグインのインストールと有効化を行っておいて下さい。

Contact Form 7の使い方 1 インストールと有効化

以下がContact Form 7のフォームの作成と設置の手順です。

  1. お問合わせフォームの内容を決める
  2. お問合わせフォームを新しく作る
  3. お問合わせ用の固定ページに設置する
  4. 動作確認のテストを行う

1.お問合わせフォームの内容を決める

お問合わせフォームを作る前にフォームの内容を決めなければ行けません。

今回はお問合わせフォームで、どういった項目が必要なのかを予め考えておきます。

「Contact Form 7」では標準でフォームが用意されており、

  • お名前
  • メールアドレス
  • 題名
  • メッセージ本文

がデフォルトとして入っていますので、まずはこちらを使ってフォームを作成していきます。

お問合わせフォームに使える項目として、

  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承諾確認
  • クイズ
  • reCAPTCHA
  • ファイル

が用意されています。

それぞれ、フォームとそれに対するメールにタグを貼り付けることで、フォームに入力して送信ボタンを押した内容が、メールに届くようになります。

2.お問い合わせフォームを新しく作る

管理画面(ダッシュボード)に「お問合わせ」メニューが有るか確認します。

ない場合、インストールが正常に終わっていないか有効化されていませんので、インストールして有効化をおこなって下さい。

WordPress プラグイン ContactForm7

「お問合わせ」 → 「新規追加」をクリックします。

お問い合わせフォーム 新規追加

「コンタクトフォーム」画面が出てきます。

コンタクトフォーム WordPress

「新規追加」をクリックします。

ContactForm7 新規追加

「コンタクトフォームを追加」画面が出てきます。

コンタクトフォームを追加

「ここにタイトルを入力」と書いてあるタイトル欄にタイトルを入力します。

今回は、「お問合わせフォーム1」と入力します。

コンタクトフォームを追加 WordPress

「フォーム」タグを確認する

「フォーム」タグを押すと出て来る画面では実際にWordPressの公開画面で表示されるフォームの設定を行うことができます。

ホームページ上で表示されるお問合わせフォームの外観や項目などの設定ができるということです。

標準で「フォーム」タグが選択されているはずなので内容を確認します。

フォームタグ

標準で、「お名前(必須)」「メールアドレス(必須)」「題名」「メッセージ本文」と、「送信」ボタンが有ることを確認します。

今回はこの項目をそのまま使います。

お問合わせフォームの項目を編集する →  Contact Form 7の項目を追加・編集する ※製作中

「メール」タグを確認する

「メール」タグをクリックすることで出てくる画面では、ページを見ている人が、フォームに入力して、送信ボタンを押した時に送られてくるメールの設定です。

メールタグをクリックし、メールの内容を確認します。

ContactForm7 メール設定

送信先などが記入されていると思いますが、今回はこのまま使用します。

送信先は標準で管理者のメールアドレスとなっています。

変更することもできますが、メールが届かないなどのトラブルの元にもなりますので、標準設定のままの管理者のメールアドレスにしておくか、できるだけ同じドメインのメールアドレスを使うようにしましょう。

「メッセージ」「その他の設定」タグ

今回は設定を行いませんので、そのままにしておきます。

コンタクトフォームを保存する

画面右側のステータスパネルから、[保存]をクリックします。

コンタクトフォーム 保存

コンタクトフォームが保存されました。

コンタクトフォーム 保存

青い部分がお問い合わせフォームを設置するための、ショートコードです。

これを固定ページ内にコピー&ペーストすることで、その場所にコンタクトフォームが設置できますので、コピーしておきます。

コンタクトフォーム ショートコード

設置することができる場所は、投稿、固定ページ、テキストウィジェットの中です。

お問合わせ用の固定ページに設置する

まずはお問合わせ用の固定ページを作ります。

固定ページの作り方 → WordPressの固定ページを作成する

タイトルは「お問合わせ」と入力します。

パーマリンクは「/contact/」としておきましょう。

コンタクトフォーム 固定ページ 設置

本文に先程のショートコードをペーストします。

コンタクトフォーム ショートコード

[プレビュー]ボタンを押して、きちんと表示されているか確認します。

コンタクトフォーム WordPress

[プレビュー]で表示されていれば、[公開]ボタンをクリックして公開します。

動作確認のテストを行う

お問合わせフォームの設置が完了したので、公開ページへにて動作確認のテストを行います。

まずは内容を入力します。問い合わせてフォーム テスト WordPress

[送信]ボタンをクリックします。

コンタクトフォーム7 送信

「ありがとうございます。メッセージは送信されました。」の表示が出れば成功です。

受信メールが届くはずなので、内容を確認しましょう。

コンタクトフォーム7 受信メール

以上がContact Form 7のフォームの作成と設置の方法です。

今後は業種別などでContact Form 7のカスタマイズする方法などをアップロードしていく予定です。

投稿者プロフィール

古田 健
古田 健

WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。

ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です