Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Trust Form   Ver1.5お問い合わせフォームプラグイン                      2013/01/13                      瀬戸 貴弘
瀬戸 貴弘Twitter   : @as_chachamaruFacebook : as.chachamaru職業        : システムエンジニアWordPress暦    ブログ開始     Ver2.6~    本格的な勉強 2012...
1. 概要2. 一連の処理の流れをみてみよう!3. 設定項目・カスタマイズ
1. 概要
お問い合わせフォーム                                  ・サイトを訪れたユーザさんが、サイト管理者と連絡するための方法。電話のように時間帯を気にしなくてよい。電子メールより記述内容が少なくなりユーザさんの負担が減る。
Contact Form 7     Trust Form       Contact Coldform           Slick Contact Forms               User Noise               ...
Contact Form 7     Trust Form        Contact Coldform            Slick Contact Forms                 User Noise           ...
確認画面があるいくつかプラグインをみてみたが、Trust Form 以外で確認画面が標準機能にあるのはなかった。確認画面があるプラグインは非常に稀。
なぜ確認画面がない          プラグインが多いのか?
日本の文化だから確認画面は日本独特の文化らしい。プラグインは世界中で作られているので、そもそも「確認画面」という発想すらない!?
日本のお客さんは          確認画面が欲しいって要望ない?でもプラグインを拡張するほどの知識ないよ  Trust Form を使ってみては?
Trust Form とは     確認画面、メールそしてデータベースを                   サポートしたお問い合わせフォーム     inquiry form creator プラグインの後継inquiry form crea...
信頼性公式ディレクトリで公開されている。デジタルキューブの方が開発者。
特徴          (1) HTMLの知識なくても作れる          (2) 確認画面を含め3ステップ構成          (3) 複数の管理人で投稿を管理3ステップ: 入力画面、確認画面、完了画面
機能            自動返信メール            データベースに保存            問い合わせ内容をCSVダウンロード            スパム対策            フォームごとのテンプレート切替       ...
2. 一連の処理の流れをみてみよう!
(1)インストール             (2) お問い合わせフォームの作成             (3) お問い合わせページの作成             (4) お問い合わせをする             (5) お問い合わせ内容の確認...
(1)インストール
(1)インストール 公式ディレクトリに登録されているので管理パネルからインストールできる。 有効にするとサイドメニューに「Trust Form」が表示される。
(2) お問い合わせフォームの作成
作成画面の構成どんな機能があるのか作成画面の構成をみてみましょう
作成画面の構成(2 - 1)お問い合わせフォームの作成 : 作成画面の構成 サイドメニュー > Trust Form > フォームの新規作成
作成画面の構成                     ①                            ②                                 ③                              ...
作成してみよう!
作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  フォーム名は、Trust Formで作成したお問い合わせフォームを識別するための名前。 一覧のタイトル欄などに表示されるので管理しやすい名前でよい。formタグの...
作成してみよう!                       ドラッグ・アンド・ドロップ(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  お問い合わせフォームに必要な項目を追加する。 各項目のフィールドはドラッグ・アンド・ドロッ...
作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  各フィールドのタイトルをクリックするとタイトルが変更できる。   をクリックすると詳細設定のウィンドウが開く。
作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  各フィールドに対しては変更はできない。
作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう! 
作成してみよう!                               http://localhost/wp02/wp-admin/                               admin.php?page=trust-...
作成してみよう!                               お問い合わせありがとうございます。                               追って担当者からご連絡差し上げま                   ...
作成してみよう!                                                 お問い合わせありがとうございます。                                                ...
作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  作成したお問い合わせフォームを使って投稿またはページを作るので指定されたタグをメモっておく。
(3) お問い合わせページの作成
投稿 や ページ は別で作り生成されたフォームを挿入!挿入するタグは指定された[trust-form id=5]                    Trust Formで作成した部分
[trust-form id=5](3)お問い合わせページの作成  フォームを作成したときに指定されたショートコードを挿入する。
(4) お問い合わせをする
入力入力選択選択選択入力     入力画面
確認画面
完了画面
(5) お問い合わせ内容の確認
管理人宛メール                                 自動返信メール   http://xxxx.xxx/wp-admin/admin.php?    お問い合わせありがとうございます。   page=trust-fo...
自動返信メール  お問い合わせありがとうございます。  追って担当者からご連絡差し上げます。  テキストボックス: ちゃちゃ丸  テキストエリア: Truns Form テストです。  チェックボックス: box1,box3  ラジオボタン: ...
マウスオーバで表示メール内容はデータベースにも保存されるので管理パネルから受信一覧をみることができる。「閲覧」をクリックするとメール内容の詳細画面に遷移する。
メモの追記やステータスの変更もできる。ステータスは「新規」と「既読」がある。
「CSVダウンロード」ボタンをクリックするとファイルのダウンロードができる。
要書き込み権限Trust Formプラグインのディレクトリ内にある「CSV」という名前のディレクトリに  書き込み権限がなければCSVはうまくダウンロードできない(何も出力がないファイルになる)。                        ...
テキストボックス,テキストエリア,チェックボックス,ラジオボタン,セレクトボックス,メールアドレス,ステータス,投稿日時 ちゃちゃ丸,"Truns Form テストです。","box1,box3",radio2,select2,xxxx@xxx...
3. 設定項目・カスタマイズ
バリデーション
バリデーションの種類
バリデーションのメッセージ
バリデーションエラーが表示される位置:該当する項目の入力欄の下
デザイン変更
リアルタイムに反映                         color:blue;CSSエディタ をクリック > CSS Editor が開く。CSS Editor でのCSSの変更はリアルタイムに反映されるので変更がわかりやすい。
Trust Form                                     twentyeleven                 デザインをがっつり変更したい!trust-form-tpl-.php を コピーしてtrus...
必須マーク
リアルタイムに反映        バリデーションの必須はチェック処理に必須にするだけで表示は何も変化しない。        「必須マーク」でユーザさんに必須であることを教えてあげるとユーザビリティがよい!必須マーク をクリック > Requir...
DBに保存しない
wp-config.phpに次のコードを記述define( TRUST_FORM_DB_SUPPORT, false );
まとめ・感想UIがわかりやすく簡単にお問い合わせフォームが作成できた。初心者でも使いやすいのではないかと思う。フォームのデザイン変更もCSSだけで終わるものは「CSSエディタ」機能で簡単にできるのが良い。複雑なデザイン変更もテンプレート化されて...
ご静聴ありがとうございました
Próxima SlideShare
Cargando en…5
×

Trust form (お問い合わせフォームプラグイン)について

19.038 visualizaciones

Publicado el

  • Sé el primero en comentar

Trust form (お問い合わせフォームプラグイン)について

  1. 1. Trust Form Ver1.5お問い合わせフォームプラグイン 2013/01/13 瀬戸 貴弘
  2. 2. 瀬戸 貴弘Twitter : @as_chachamaruFacebook : as.chachamaru職業 : システムエンジニアWordPress暦 ブログ開始 Ver2.6~ 本格的な勉強 2012年2月~
  3. 3. 1. 概要2. 一連の処理の流れをみてみよう!3. 設定項目・カスタマイズ
  4. 4. 1. 概要
  5. 5. お問い合わせフォーム ・サイトを訪れたユーザさんが、サイト管理者と連絡するための方法。電話のように時間帯を気にしなくてよい。電子メールより記述内容が少なくなりユーザさんの負担が減る。
  6. 6. Contact Form 7 Trust Form Contact Coldform Slick Contact Forms User Noise Popup contact form ・ ・ ・ほとんどのサイトにお問い合わせフォームがある。世界中に多くのお問い合わせフォームプラグインがある。
  7. 7. Contact Form 7 Trust Form Contact Coldform Slick Contact Forms User Noise Popup contact form ・ ・ ・Trust Form には大半のお問い合わせフォームプラグインにはない標準機能がある。
  8. 8. 確認画面があるいくつかプラグインをみてみたが、Trust Form 以外で確認画面が標準機能にあるのはなかった。確認画面があるプラグインは非常に稀。
  9. 9. なぜ確認画面がない          プラグインが多いのか?
  10. 10. 日本の文化だから確認画面は日本独特の文化らしい。プラグインは世界中で作られているので、そもそも「確認画面」という発想すらない!?
  11. 11. 日本のお客さんは          確認画面が欲しいって要望ない?でもプラグインを拡張するほどの知識ないよ Trust Form を使ってみては?
  12. 12. Trust Form とは 確認画面、メールそしてデータベースを サポートしたお問い合わせフォーム inquiry form creator プラグインの後継inquiry form creator プラグインと開発者が同じ。Trust Formはこのプラグインの後継らしい。
  13. 13. 信頼性公式ディレクトリで公開されている。デジタルキューブの方が開発者。
  14. 14. 特徴 (1) HTMLの知識なくても作れる (2) 確認画面を含め3ステップ構成 (3) 複数の管理人で投稿を管理3ステップ: 入力画面、確認画面、完了画面
  15. 15. 機能 自動返信メール データベースに保存 問い合わせ内容をCSVダウンロード スパム対策 フォームごとのテンプレート切替 PHP5.4対応 などなど※データベース保存は、設定によりオフにすることができる。※スパム対策には、Akismet プラグインを有効にする必要がある。
  16. 16. 2. 一連の処理の流れをみてみよう!
  17. 17. (1)インストール (2) お問い合わせフォームの作成 (3) お問い合わせページの作成 (4) お問い合わせをする (5) お問い合わせ内容の確認 (6) CSVダウンロード軽く一連の流れをみてみよう!
  18. 18. (1)インストール
  19. 19. (1)インストール 公式ディレクトリに登録されているので管理パネルからインストールできる。 有効にするとサイドメニューに「Trust Form」が表示される。
  20. 20. (2) お問い合わせフォームの作成
  21. 21. 作成画面の構成どんな機能があるのか作成画面の構成をみてみましょう
  22. 22. 作成画面の構成(2 - 1)お問い合わせフォームの作成 : 作成画面の構成 サイドメニュー > Trust Form > フォームの新規作成
  23. 23. 作成画面の構成 ① ② ③ ④(2 - 1)お問い合わせフォームの作成 : 作成画面の構成 ① フォーム名の入力欄 ② 確認画面を含む3ステップの画面の入力内容欄 ③ 管理者宛メール設定欄 ④ 自動返信メール設定欄
  24. 24. 作成してみよう!
  25. 25. 作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  フォーム名は、Trust Formで作成したお問い合わせフォームを識別するための名前。 一覧のタイトル欄などに表示されるので管理しやすい名前でよい。formタグのname属性ではない。
  26. 26. 作成してみよう! ドラッグ・アンド・ドロップ(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  お問い合わせフォームに必要な項目を追加する。 各項目のフィールドはドラッグ・アンド・ドロップで追加できる。
  27. 27. 作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  各フィールドのタイトルをクリックするとタイトルが変更できる。 をクリックすると詳細設定のウィンドウが開く。
  28. 28. 作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  各フィールドに対しては変更はできない。
  29. 29. 作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう! 
  30. 30. 作成してみよう! http://localhost/wp02/wp-admin/ admin.php?page=trust-form- entries& form=5&status=new テキストボックス: abcabd テキストエリア: abcabd チェックボックス: box2 ラジオボタン: セレクトボックス: メールアドレス: 日時: 2013/01/11 01:18:39 本文サンプル(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  本文の入力欄がない。本文は固定(※雛形は固定。ユーザさんの入力項目は動的変更)
  31. 31. 作成してみよう! お問い合わせありがとうございます。 追って担当者からご連絡差し上げま す。 テキストボックス: abcabd テキストエリア: abcabd チェックボックス: box2 ラジオボタン: セレクトボックス: メールアドレス: 日時: 2013/01/11 01:18:39 ----- 署名 本文サンプル(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  [FORM DATA] と指定すると、フォームの全項目のフォームデータで置き換わる。
  32. 32. 作成してみよう! お問い合わせありがとうございます。 追って担当者からご連絡差し上げま す。 テキストボックス: abcabd<input type="text" value="" name="element-11"> テキストエリア: abcabd チェックボックス: box2 ラジオボタン: セレクトボックス: メールアドレス: 日時: 2013/01/11 01:18:39 [element-11] ----- 署名 abcabd(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  [name属性名] と指定すると、その項目のデータに置き換わる。
  33. 33. 作成してみよう!(2 - 2)お問い合わせフォームの作成 : 作成してみよう!  作成したお問い合わせフォームを使って投稿またはページを作るので指定されたタグをメモっておく。
  34. 34. (3) お問い合わせページの作成
  35. 35. 投稿 や ページ は別で作り生成されたフォームを挿入!挿入するタグは指定された[trust-form id=5] Trust Formで作成した部分
  36. 36. [trust-form id=5](3)お問い合わせページの作成  フォームを作成したときに指定されたショートコードを挿入する。
  37. 37. (4) お問い合わせをする
  38. 38. 入力入力選択選択選択入力 入力画面
  39. 39. 確認画面
  40. 40. 完了画面
  41. 41. (5) お問い合わせ内容の確認
  42. 42. 管理人宛メール 自動返信メール http://xxxx.xxx/wp-admin/admin.php? お問い合わせありがとうございます。 page=trust-form- 追って担当者からご連絡差し上げます。 entries&form=156&status=new テキストボックス: ちゃちゃ丸 テキストボックス: ちゃちゃ丸 テキストエリア: Truns Form テストです。 テキストエリア: Truns Form テストです。 チェックボックス: box1,box3 チェックボックス: box1,box3 ラジオボタン: radio2 ラジオボタン: radio2 セレクトボックス: select2 セレクトボックス: select2 メールアドレス: xxxx@xxxx.xxx メールアドレス: xxxx@xxxx.xxx 日時: 2013/01/11 23:00:45 日時: 2013/01/11 23:00:45 ----- 署名メール内容を確認してみよう!
  43. 43. 自動返信メール お問い合わせありがとうございます。 追って担当者からご連絡差し上げます。 テキストボックス: ちゃちゃ丸 テキストエリア: Truns Form テストです。 チェックボックス: box1,box3 ラジオボタン: radio2 セレクトボックス: select2 メールアドレス: xxxx@xxxx.xxx 日時: 2013/01/11 23:00:45 「メールアドレス」フィールドの値に送信される。 ----- このフィールが複数あると全てに送信される。 署名メール内容を確認してみよう!
  44. 44. マウスオーバで表示メール内容はデータベースにも保存されるので管理パネルから受信一覧をみることができる。「閲覧」をクリックするとメール内容の詳細画面に遷移する。
  45. 45. メモの追記やステータスの変更もできる。ステータスは「新規」と「既読」がある。
  46. 46. 「CSVダウンロード」ボタンをクリックするとファイルのダウンロードができる。
  47. 47. 要書き込み権限Trust Formプラグインのディレクトリ内にある「CSV」という名前のディレクトリに 書き込み権限がなければCSVはうまくダウンロードできない(何も出力がないファイルになる)。 ※csv file : 0byte
  48. 48. テキストボックス,テキストエリア,チェックボックス,ラジオボタン,セレクトボックス,メールアドレス,ステータス,投稿日時 ちゃちゃ丸,"Truns Form テストです。","box1,box3",radio2,select2,xxxx@xxx.xxx,既読,"2013/01/11 23:00:45"ダウンロードしたCSVの中身
  49. 49. 3. 設定項目・カスタマイズ
  50. 50. バリデーション
  51. 51. バリデーションの種類
  52. 52. バリデーションのメッセージ
  53. 53. バリデーションエラーが表示される位置:該当する項目の入力欄の下
  54. 54. デザイン変更
  55. 55. リアルタイムに反映 color:blue;CSSエディタ をクリック > CSS Editor が開く。CSS Editor でのCSSの変更はリアルタイムに反映されるので変更がわかりやすい。
  56. 56. Trust Form twentyeleven  デザインをがっつり変更したい!trust-form-tpl-.php を コピーしてtrust-form-tpl-5.phpにリネーム。Id=5 のフォームは trust-form-tpl-5.php のテンプレートを使うようになる。trust-form-tpl-5.php で好きなように書き換える。
  57. 57. 必須マーク
  58. 58. リアルタイムに反映 バリデーションの必須はチェック処理に必須にするだけで表示は何も変化しない。 「必須マーク」でユーザさんに必須であることを教えてあげるとユーザビリティがよい!必須マーク をクリック > Require Mark が開く。Require Markの変更はリアルタイムに反映されるので変更がわかりやすい。
  59. 59. DBに保存しない
  60. 60. wp-config.phpに次のコードを記述define( TRUST_FORM_DB_SUPPORT, false );
  61. 61. まとめ・感想UIがわかりやすく簡単にお問い合わせフォームが作成できた。初心者でも使いやすいのではないかと思う。フォームのデザイン変更もCSSだけで終わるものは「CSSエディタ」機能で簡単にできるのが良い。複雑なデザイン変更もテンプレート化されてるので少しのPHPの知識があればテンプレートファイルの変更で可能。独自機能の拡張はやりにくい? Contact Form 7のように独自フックがなさそう。簡単に実装できるので初心者やデザイナーさんには使いやすい。日本でのお問い合わせフォームとしての一般的な機能は標準であるのでお客さんの要望も満たしやすい。Contact Form 7 でカスタマイズが難しいと感じている方など Trust Formを試してはどうでしょう?
  62. 62. ご静聴ありがとうございました

×