ソーシャルメディア連携やブログパーツのカスタマイズを行うのに色々とありがたい機能を提供してくれるWordpressのプラグインJetPack。FacebookページやGoogle+、Twitterで新しい記事の投稿情報を共有したいと思って使い始めたところ、他にも色々と役立ってくれている機能があります。その一つが、「問い合わせフォーム」の設置。

 

問い合わせフォーム作成のためのWordpressプラグインと言えば、有名なのがContact Form、最近ではTrust Formというのが人気になってきていますよね。

私もそのどっちかを選ぼうと思っていたんですが、すでにインストール済みのJetPackで間に合わせられるなら、それに越したことはない(プラグインは多ければ多いほどWordpressが重くなったり何かと不具合の原因になったりするんで)ということで、とりあえず作ってみました。(⇒そのまま使い続けることにしました^^)

sponsored link

JetPackのコンタクトフォームの特徴

  • 問い合わせの管理がダッシュボードでできる: コンタクトフォームの機能を有効化すると管理画面に追加される「フィードバック」というメニューが現れ、そこで過去の問い合わせを管理できます
  • シンプルで分かりやすい作り: 固定ページの新規追加画面に「お問合せフォームを追加」というボタンが表示されるので、それをクリックしてフォームを作成し、固定ページに埋め込むことができます
  • 問い合わせページがカスタマイズしやすい: 固定ページに埋め込むので、フォームの前後にテキストや画像なども好きなように追加できます
  • Akismetによるスパムチェック: ユーザー側が問い合わせを送信すると、スパムでないことを確認するため Akismet のフィルターがかかり、そのチェックを通過した問い合わせがメールで送られ、フィードバック管理エリアにも保存されます。これはありがたいですね^^

 

JetPackを使った問い合わせフォームの作成手順

まず、JetPackがまだインストールされていない場合は、ダッシュボードからプラグイン>新規追加で「Jetpack by WordPress.com」を検索してインストール、有効化します。プラグインは以下のサイトからもダウンロードできます。

⇒ Jetpack by WordPress.com

JetPackを実際に使うには、Wordpress.comのアカウントと連携する必要がありますので、表示される案内に従ってアカウントとの連携を済ませてください。

連携方法の具体的な手順はこちらのサイトが参考になります⇒ Jetpack by WordPress.comプラグインのインストール

 

連携が完了すると、JetPackに含まれる様々な機能を一覧できます。その中から「コンタクトフォーム」を見つけて「有効化」ボタンをクリックし、有効化します。

JetPack-contactForm

 

固定ページの新規追加を開くと、「お問い合わせフォームを追加」というボタンが表示されるはずなので、それをクリックします。

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

 

初期状態では、名前・メールアドレス・ウェブサイト・コメントの4項目が用意されています。もし新たに項目を追加したい場合は以下の画像に示す部分をクリックして新規項目(新規フィールド)を作成してください。

JetPackコンタクトフォーム作成

 

以下はドロップダウン項目を新規追加する場合の一例です↓↓

JetPackコンタクトフォーム 作成

 

問い合わせを送信するメールアドレスやメールの件名を設定したい場合は、「メール通知」のタブから設定します。もし何も設定しなければ固定ページの投稿者のメールアドレスに固定ページ名(「問い合わせ」など)を件名にして送信されます。

JetPackコンタクトフォーム作成

 

「フォームビルダー」タブに戻ります。既存フィールドの編集や並び順の移動をしたい場合は以下のようにフィールドにカーソルを合わせると「移動」「編集」といったメニューが現れます。

JetPack 問い合わせフォーム フィールド削除

 

いらない項目は、項目の右側にあるマイナス(-)をクリックすると削除できます。

全ての設定がおわったら「このフォームを投稿に追加」ボタンをクリックします。

JetPack コンタクトフォーム 埋め込み

 

固定ページに問い合わせフォーム用のタグが埋め込まれますので、前後にテキストや画像などを追加したい場合は、いつもの記事編集と同じ感覚で行えます。フォームは以下のようにシンプルで使いやすい表示になっています。実際の問い合わせページはこちらからご覧ください^^⇒ お問合せ

問い合わせフォーム作成後

 

作成した問い合わせフォームからテスト送信をしてみた

実際に、問い合わせフォームからテスト送信をしてみました。すると、問い合わせフォーム前後のテキストは変わらず、フォームの部分が「メッセージを送信しました」というメッセージと送信内容に切り替わりました。

JetPackによる問い合わせフォーム

 

問い合わせのメールはこんな感じです↓

JetPack-contactForm7

 

ダッシュボードの「フィードバック」メニューから問い合わせの内容を見てみるとこんな感じでした↓↓

JetPack フィードバック

問い合わせの履歴がダッシュボードで管理できるのも嬉しい機能ですね^^

 

 

JetPackではこのほかにも関連記事の表示や、CSS編集を楽にしてくれる機能なども使っているのですが、本当にインストールしておいて損はないプラグインだと思います。また「これは!!」という機能が見つかったら記事にアップしますね^^