SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

Contact Form 7による問合せフォーム作成

サイトを閲覧しているユーザーとコミュニケーションをとるための機能として問い合わせフォームを設置したいという要望は、サイトを作る際、もしくは運用している際に自然に考えることだと思います。

しかし実際に問い合わせフォームを自力で設置しようとする場合、フォームの見た目をだけではなく裏側で動く仕組みを作り、連動させるという簡単にはできない作業が発生します。

このときサイトがWordPressなら、プラグインで簡単に問い合わせフォームを設置できます。

問い合わせフォーム設置プラグインとして有名なのがContact Form 7です。

この記事では、実際にContact Form 7を利用して問い合わせフォームを設置する方法についてご紹介します。

Contact Form 7とは

Contact Form 7とは、WordPressで使用できるプラグインです。Contact Form 7をインストールすると、サイトに問い合わせフォームを簡単に設置することができます。

HTMLの知識がなくてもパーツを組み合わせるように設定できるのが特徴で、現在でも多く使われているプラグインです。

また、このプラグイン自体を拡張するためのプラグインも多く存在していて、細かい要望にも応じやすいことも特徴です。拡張を重ねればWordPressの管理ツール上で問い合わせメールをすべて管理することも可能です。

Contact Form 7のインストール方法

Contact Form 7のインストール方法について説明します。

  1. WordPress管理ツール内のメニューから「プラグイン」のページを表示します。
  2. 上部タイトルの横にある「新規追加」ボタンをクリックします。
  3. プラグインの検索の入力欄に「Contact Form 7」を入力します。
  4. 以下のようなカードが表示されるので、「今すぐインストール」ボタンをクリックします。
Contact Form 7プラグイン
  1. しばらくすると以下のような表示になるので、「有効化」ボタンを押します。
Contact Form 7を有効化

これで、Contact Form 7が使えるようになります。

Contact Form 7の設定

Contact Form 7をインストールするとWordPress管理ツールのメニューに「お問い合わせ」が追加されます。

コンタクトフォーム

フォームを追加するには「新規追加」ボタンから行います。

フォーム設定

フォームタブでは、フォームのタイトルと、入力できるパーツを組むことができます。

既に簡単なフォームのパーツが入力されているため、入力項目を増やしたい場合は入力されている項目と同じように設定するといいでしょう。

コンタクトフォームのフォームタブ

メール設定

メールタブでは、返信メールに関わる設定ができます。

送信元アドレスには、初期設定としてWordPress管理者のメールアドレスが記載されているので、別のメールアドレスに変更したい場合は変更しましょう。

追加したフォームのパーツがある場合は利用できるメールタグにその項目名が表示され、それをメッセージ本文に載せることによって入力内容に置換されるようになります。

コンタクトフォームのメール設定

通知メッセージ作成

ユーザがフォームを利用した際に、正常に送信が完了したときや、入力内容に不備があった場合に表示されるメッセージの編集ができます。

メッセージはそれぞれ初期値が設定されています。

実際に使用するメッセージはフォームのパーツに寄るため、フォームに何を配置するかに応じてメッセージを選択して編集するといいでしょう。

コンタクトフォームのメッセージ設定

固定ページへのフォームの設置

新規追加したフォームは、そのままではページとして存在しません。

固定ページにショートコードを配置することで使用することができるようになります。

ショートコードは、フォームを保存した後に発行されます。

画面内に表示されたショートコードをコピーして任意の固定ページに貼り付けます。

ショートコードを張り付けた固定ページ

配置した後の実際の画面が以下です。

フォームで追加したパーツが自動で表示されているのがわかります。

完成した問い合わせページ

この生成されたページから各項目を記入して送信ボタンを押すことで実際にメールが送信されることがわかります。

Contact Form 7で問合せ履歴を見る方法

Contact Form 7自体には問合せ履歴を参照する機能が存在しないので、追加のプラグインをインストールする必要があります。

プラグインは複数種類ありますが、ここではContact Form DBという履歴が管理できるプラグインをインストールします。

サイトの管理とメールの管理をWordPress管理ツールから一本化できるためおすすめです。

Contact Form DBのインストール方法

WordPressプラグインなので、Contact Form 7自体のように管理ツールから検索してインストールできると思いきや、Contact Form DBは検索に引っ掛からないので管理ツールからはインストールできません。

Contact Form DBは、次の手順でインストールします。

  1. 以下のリンクから最新バージョンのzipファイルをダウンロードします。
    https://github.com/mdsimpson/contact-form-7-to-database-extension/releases
  2. プラグインを新規追加する画面で「プラグインのアップロード」ボタンを押します
  3. ポップアップしてくるファイル選択ダイアログで1.でダウンロードしたzipファイルを選択します。
  4. インストールボタンを押下します。
  5. 有効化ボタンを押下します。

上記手順でContact Form DBが使用できるようになり、フォームが利用された履歴を見ることができるようになります。

まとめ

Contact Form 7を使えば、WordPressサイトにフォームを簡単に設置できます。

サーバーの処理に明るくなくてもフォームパーツを置くだけで関連付けされ、返信メールも書きやすい形のUIを提供してくれます。

現在でも広く使われており、拡張性も高いため、後々新規の機能をつけたいというときにも対応がしやすいことも強みです。

弊社ではWordPressでのサイト構築を行っていますが、アクセス解析やSEOコンサルティングのノウハウを生かしたサイト運営に特長があります。Webマーケティングに強い組織づくりを目指してみませんか?

Webサイト運用の内製化支援サービス「REBUILD WEB-MKTG-SITE」

Page Top