頑張らない!でも諦めない!必死にならずにええかげん

14.コンタクトフォーム-Jetpack by WordPress.com

      2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、
ここでは「コンタクトフォーム」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

コンタクトフォーム

Jetpack の一括検索の機能概要は以下のように表示されます。

コンタクトフォーム

コンタクトフォームを使えば、個人メールアドレスを知られることなく読者からのコメントを受け取る事ができます。

コンタクトフォームはそれぞれ、必要に応じてカスタマイズできます。ユーザーがフォームを送信すると、フィードバックがスパムでないことを確認するため Akismet のフィルターが適用されます (有効化されている場合) 。チェックを通過した内容はメールで送られ、さらにフィードバック管理エリアにも保存されます。

01_JetPackコンタクトフォーム詳細

JetPackコンタクトフォーム詳細

設定方法

コンタクトフォームを有効化すると、
WordPressダッシュボードのサイドバーに対してフィードバックが表示されます。

02_フィードバックメニューの表示

フィードバックメニューの表示

余談ですが、このフィードバックメニューはPollDaddyプラグインを有効にした際にも表示されます。
wordpressに投票機能を追加するPOLLDADDY v2.0.21-プラグインを利用

05_Feedbackメニューの表示

Feedbackメニューの表示

尚、コンタクトフォーム(Jetpack)とPOLLDADDYプラグインを両方有効化した場合には、
サイドメニューの表示は以下のようになります。

03_POLLDADDY併用時

POLLDADDY併用時

少し紛らわしく、サイドバーの表示が変わりますね・・・。

設定は特にありません。有効にすると「新規投稿」および「新規固定ページ」に対して、
[お問合せフォームを追加]ボタンが追加され表示されます。

04_コンタクトフォームボタンの表示

コンタクトフォームボタンの表示

コンタクトフォームの挿入

コンタクトフォーム(お問合せフォーム)を投稿に挿入するには、
追加された[お問合せフォームを追加]ボタンをクリックします。

クリックするとポップアップメニューにて「フォームビルダー」が表示されます。

05_コンタクトフォームのフォームビルダー

コンタクトフォームのフォームビルダー

「メール通知」タブをクリックすると、メール設定が行えます。

06_コンタクトフォームのメール通知

コンタクトフォームのメール通知

フォームビルダーの操作

フォームビルダーではフィールドを編集・移動・追加・削除が行えます。

編集は編集したいフィールドをマウスオーバーして表示される、
[編集]をクリックすると、右の編集エリアにフィールドの詳細が表示されます。

07_フィールドの編集

フィールドの編集

移動は移動したいフィールドをマウスオーバーして表示されるバルーンを、
そのまま移動したい位置までドラッグすることで表示する順序を変更することができます。

08_フィールドの移動(並べかえ)

フィールドの移動(並べかえ)

追加はフィールドの一番下に表示されている[新規フィールドを追加]をクリックすると、
最下部に新しいフィールドが追加されます。

利用可能なフィールドタイプは以下の通りです。

  • テキスト
  • チェックボックス
  • ドロップダウン
  • メールアドレス
  • 名前
  • ラジオボタン
  • テキスト
  • テキストエリア
  • ウェブサイト
09_フィールドの追加

フィールドの追加

削除は削除したいフィールドをマウスオーバーして表示される、
[-]をクリックすると、すぐに削除されます。(確認はありません)

10_フィールドの削除

フィールドの削除

フィールドの配置が完了したら[このフォームを投稿に追加]をクリックして投稿に挿入します。

11_コンタクトフォームのショートコード挿入

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

挿入されると、ショートコードが挿入されます。

それぞれのフィールドタイプに割り当てられているTypeは以下の通りです。

  • テキスト type=’text’
  • チェックボックス type=’checkbox’
  • ドロップダウン type=’select’
  • メールアドレス type=’email’
  • 名前 type=’name’
  • ラジオボタン type=’radio’
  • テキストエリア type=’textarea’
  • ウェブサイト type=’url’

コンタクトフォームからの送信

コンタクトフォームを配置した投稿を公開し、ページを開くと、
配置した各フィールドが表示されます。

12_コンタクトフォームの表示

コンタクトフォームの表示

最下部の[送信>>]ボタンをクリックすると、フォームが送信されますが、
必須項目に対して未入力がある場合には以下のようにエラーが表示されます。

13_必須入力漏れの表示

必須入力漏れの表示

フィードバックの受信

コンタクトフォームからの送信が行われると、
コンタクトフォームを設置した際のメールアドレスと件名でメールが送信されます。

コンタクトフォームの設計

コンタクトフォーム作成時に指定したメールアドレス

14_設置コンタクトフォームの設定例

設置コンタクトフォームの設定例

コンタクトフォーム入力

コンタクトフォームに入力されたメールアドレスと名前
※画像に表示している投稿作成者のメールアドレスは特に関係ありません。

15_コンタクトフォームの入力例

コンタクトフォームの入力例

コンタクトフォーム送信時に送信されたメール

コンタクトフォームに対してメールアドレスを設定している場合には、
コンタクトフォームの入力時に設定したメールアドレスに対してメッセージが送信されます。
これはサイト管理者が管理上受信するものですので、特に体裁にこだわるようなものではありません。

ここでメールに設定されてくる宛先や返信先などのアドレスは以下のように、
設定されたメールアドレスとユーザーの入力したアドレスが設定されて送信されます。
これによって、受信したメールに返信することで、
フォーム入力者に対してメール返信が行える仕組みになっています。

メールアドレスのFromには「wordpress+@サイトドメイン」が設定されてきます。
その為、実在しないメールアドレスが設定されます。

16_コンタクトフォームから受信したメール例

コンタクトフォームから受信したメール例

ただし、日本語環境で確認したところ「Reply-To:」に格納される返信先アドレスの部分が、
正しく設定されない症状を確認しました。

17_日本語入力時のReply-To:設定例

日本語入力時のReply-To:設定例

返信さえ行わなければ特に意識する必要はないとは思いますが、
受信したメールに対する返信がそのまま利用できないという点については、注意が必要かもしれません。
※私が利用しているメールサーバとの相性の可能性もありますので各自ご確認ください。

フィードバックのダッシュボード表示

フィードバックに入力が行われると、
ダッシュボードの「フィードバック」に対して入力されたコンタクト(お問い合わせ)が表示されます。

18_コンタクトフォーム入力一覧

コンタクトフォーム入力一覧

Jetpackのコンタクトフォームでは入力されたコンタクト(お問い合わせ)を、
CSVでエクスポートすることができます。

エクスポートの際には、コンタクトフォームを設置したページを選択して、
エクスポートすることができます。

19_エクスポートCSVのダウンロード

エクスポートCSVのダウンロード

エクスポートするページを選択し[ダウンロード]をクリックすると、CSVファイルが出力されます。

(CSVファイル名の例) 2014-01-09-14.コンタクトフォーム(dev1)-Jetpack-by-WordPress.com_.csv

出力されるCSVファイルは以下のようなフォーマットで出力されます。

  • 1行目がコンタクトフォームに設定したラベルが出力されます。
  • また基本的には入力された文字列がそのまま出力されます。
  • ドロップダウンリスト、ラジオボタンなどもコンタクトフォームに入力した選択肢がそのまま文字で出力されます。
  • チェックボックスでは、チェックを付与したことを「はい/いいえ」の文字列で出力されます。

こうしてコンタクトフォームに入力された内容をMicrosoft Excel©などで集計したりすることができます。

投票機能を利用する選択肢も

とは言え、お問い合わせという点ではコンタクトフォームの方が便利だとは思いますが、
ケースバイケースで投票機能を導入された方が便利な場合もありますので以下はご参考まで。
wordpressに投票機能を追加するPOLLDADDY v2.0.21-プラグインを利用

01_Aluminum-Narrow

Aluminum-Narrow

投票のスタイルはいろいろ変更できます。
POLLDADDY(v2.0.21)プラグインで利用可能な投票(Poll)のスタイル一覧

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

JetPackを有効にするだけで簡単にコンタクトフォーム設置できて便利なのですが、
若干日本語環境では不思議な動きをする部分もあります。

特に細かいことにこだわらないようであれば、有効化するだけで利用できますので、
採用されてみてはいかがでしょうか。

参考

公式ヘルプは以下でご確認できます(英語)

Contact Form — Jetpack for WordPress 


WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
VaultPressは、Automattic Inc.の登録商標(第5416990号)です。

Polldaddyは、Automattic Inc.の商標です。

Microsoft® Excel®は米国 Microsoft Corporation の米国およびその他の国における商標または名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - jetpack, WordPress , ,

  関連記事

eye_wordpress
Welcart e-Commerce_v1.3.15プラグインに商品を登録する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_jetpack
JetPackサイト統計データが消えた場合に復活する手順(してもらう)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_apache_fcgi
ローカル環境のPHPをCGI実行させる方法をwindowsで試す

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
09.共有-Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
10.スペル&文法チェック-Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressの独自ショートコードを設定しJavaScriptを出力

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressのインストールディレクトリに配置される.htaccess作成タイミング

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_jetpack
JetPackにどんな操作をすると統計情報が初期化されるか調べました(再現なし)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
19_03.blip.tvプレーヤー表示には、Jetpackのblip.tv動画ショートコード埋め込み

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_local_wordpress
wordpressの複数バージョン違いをテスト(動作確認)する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …