1. Trust Form Ver1.5
お問い合わせフォームプラグイン
2013/01/13
瀬戸 貴弘

2. 瀬戸 貴弘
Twitter : @as_chachamaru
Facebook : as.chachamaru
職業 : システムエンジニア
WordPress暦
ブログ開始 Ver2.6～
本格的な勉強 2012年2月～

3. 1. 概要
2. 一連の処理の流れをみてみよう！
3. 設定項目・カスタマイズ

4. 1. 概要

5. お問い合わせフォーム
・
サイトを訪れたユーザさんが、サイト管理者と連絡するための方法。
電話のように時間帯を気にしなくてよい。
電子メールより記述内容が少なくなりユーザさんの負担が減る。

6. Contact Form 7
Trust Form
Contact Coldform
Slick Contact Forms
User Noise
Popup contact form
・
・
・
ほとんどのサイトにお問い合わせフォームがある。
世界中に多くのお問い合わせフォームプラグインがある。

7. Contact Form 7
Trust Form
Contact Coldform
Slick Contact Forms
User Noise
Popup contact form
・
・
・
Trust Form には大半のお問い合わせフォームプラグインにはない標準機能がある。

8. 確認画面がある
いくつかプラグインをみてみたが、Trust Form 以外で確認画面が標準機能にあるのはなかった。
確認画面があるプラグインは非常に稀。

9. なぜ確認画面がない
プラグインが多いのか？

10. 日本の文化だから
確認画面は日本独特の文化らしい。
プラグインは世界中で作られているので、そもそも「確認画面」という発想すらない!?

11. 日本のお客さんは
確認画面が欲しいって要望ない？
でもプラグインを拡張するほどの知識ないよ
Trust Form を使ってみては？

12. Trust Form とは
確認画面、メールそしてデータベースを
サポートしたお問い合わせフォーム
inquiry form creator プラグインの後継
inquiry form creator プラグインと開発者が同じ。Trust Formはこのプラグインの後継らしい。

13. 信頼性
公式ディレクトリで公開されている。
デジタルキューブの方が開発者。

14. 特徴
(1) HTMLの知識なくても作れる
(2) 確認画面を含め３ステップ構成
(3) 複数の管理人で投稿を管理
３ステップ： 入力画面、確認画面、完了画面

15. 機能
自動返信メール
データベースに保存
問い合わせ内容をCSVダウンロード
スパム対策
フォームごとのテンプレート切替
PHP5.4対応
などなど
※データベース保存は、設定によりオフにすることができる。
※スパム対策には、Akismet プラグインを有効にする必要がある。

16. 2. 一連の処理の流れをみてみよう！

17. （1）インストール
(2) お問い合わせフォームの作成
(3) お問い合わせページの作成
(4) お問い合わせをする
(5) お問い合わせ内容の確認
(6) CSVダウンロード
軽く一連の流れをみてみよう！

18. （1）インストール

19. （1）インストール
公式ディレクトリに登録されているので管理パネルからインストールできる。
有効にするとサイドメニューに「Trust Form」が表示される。

20. (2) お問い合わせフォームの作成

21. 作成画面の構成
どんな機能があるのか作成画面の構成をみてみましょう

22. 作成画面の構成
（2 - 1）お問い合わせフォームの作成 : 作成画面の構成
サイドメニュー ＞ Trust Form ＞ フォームの新規作成

23. 作成画面の構成
①
②
③
④
（2 - 1）お問い合わせフォームの作成 : 作成画面の構成
① フォーム名の入力欄 ② 確認画面を含む3ステップの画面の入力内容欄
③ 管理者宛メール設定欄 ④ 自動返信メール設定欄

24. 作成してみよう！

25. 作成してみよう！
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
フォーム名は、Trust Formで作成したお問い合わせフォームを識別するための名前。
一覧のタイトル欄などに表示されるので管理しやすい名前でよい。formタグのname属性ではない。

26. 作成してみよう！
ドラッグ・アンド・ドロップ
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
お問い合わせフォームに必要な項目を追加する。
各項目のフィールドはドラッグ・アンド・ドロップで追加できる。

27. 作成してみよう！
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
各フィールドのタイトルをクリックするとタイトルが変更できる。
をクリックすると詳細設定のウィンドウが開く。

28. 作成してみよう！
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
各フィールドに対しては変更はできない。

29. 作成してみよう！
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！

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. 作成してみよう！
お問い合わせありがとうございます。
追って担当者からご連絡差し上げま
す。
テキストボックス: abcabd
テキストエリア: abcabd
チェックボックス: box2
ラジオボタン:
セレクトボックス:
メールアドレス:
日時: 2013/01/11 01:18:39
-----
署名
本文サンプル
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
[FORM DATA] と指定すると、フォームの全項目のフォームデータで置き換わる。

32. 作成してみよう！
お問い合わせありがとうございます。
追って担当者からご連絡差し上げま
す。
テキストボックス: abcabd
<input type="text" value="" name="element-11">
テキストエリア: abcabd
チェックボックス: box2
ラジオボタン:
セレクトボックス:
メールアドレス:
日時: 2013/01/11 01:18:39
[element-11]
-----
署名
abcabd
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
[name属性名] と指定すると、その項目のデータに置き換わる。

33. 作成してみよう！
（2 - 2）お問い合わせフォームの作成 ： 作成してみよう！
作成したお問い合わせフォームを使って投稿またはページを作るので指定されたタグをメモっておく。

34. (3) お問い合わせページの作成

35. 投稿 や ページ は
別で作り生成されたフォームを挿入！
挿入するタグは指定された
[trust-form id=5]
Trust Formで作成した部分

36. [trust-form id=5]
（3）お問い合わせページの作成
フォームを作成したときに指定されたショートコードを挿入する。

37. (4) お問い合わせをする

38. 入力
入力
選択
選択
選択
入力
入力画面

39. 確認画面

40. 完了画面

41. (5) お問い合わせ内容の確認

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. 自動返信メール
お問い合わせありがとうございます。
追って担当者からご連絡差し上げます。
テキストボックス: ちゃちゃ丸
テキストエリア: Truns Form テストです。
チェックボックス: box1,box3
ラジオボタン: radio2
セレクトボックス: select2
メールアドレス: xxxx@xxxx.xxx
日時: 2013/01/11 23:00:45
「メールアドレス」フィールドの値に送信される。
----- このフィールが複数あると全てに送信される。
署名
メール内容を確認してみよう！

44. マウスオーバで表示
メール内容はデータベースにも保存されるので管理パネルから受信一覧をみることができる。
「閲覧」をクリックするとメール内容の詳細画面に遷移する。

45. メモの追記やステータスの変更もできる。
ステータスは「新規」と「既読」がある。

46. 「CSVダウンロード」ボタンをクリックするとファイルのダウンロードができる。

47. 要書き込み権限
Trust Formプラグインのディレクトリ内にある「CSV」という名前のディレクトリに
書き込み権限がなければCSVはうまくダウンロードできない（何も出力がないファイルになる）。
※csv file : 0byte

48. テキストボックス,テキストエリア,チェックボックス,ラジオボタン,セレクトボックス,メールアドレス,ステータス,投稿日時
ちゃちゃ丸,"Truns Form テストです。","box1,box3",radio2,select2,xxxx@xxx.xxx,既読,"2013/01/11 23:00:45"
ダウンロードしたCSVの中身

49. 3. 設定項目・カスタマイズ

50. バリデーション

51. バリデーションの種類

52. バリデーションのメッセージ

53. バリデーションエラーが表示される位置：該当する項目の入力欄の下

54. デザイン変更

55. リアルタイムに反映
color:blue;
CSSエディタ をクリック ＞ CSS Editor が開く。
CSS Editor でのCSSの変更はリアルタイムに反映されるので変更がわかりやすい。

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. 必須マーク

58. リアルタイムに反映
バリデーションの必須はチェック処理に必須にするだけで表示は何も変化しない。
「必須マーク」でユーザさんに必須であることを教えてあげるとユーザビリティがよい！
必須マーク をクリック ＞ Require Mark が開く。
Require Markの変更はリアルタイムに反映されるので変更がわかりやすい。

59. DBに保存しない

60. wp-config.phpに次のコードを記述
define( 'TRUST_FORM_DB_SUPPORT', false );

61. まとめ・感想
UIがわかりやすく簡単にお問い合わせフォームが作成できた。
初心者でも使いやすいのではないかと思う。
フォームのデザイン変更もCSSだけで終わるものは「CSSエディタ」
機能で簡単にできるのが良い。複雑なデザイン変更もテンプレート化
されてるので少しのPHPの知識があればテンプレートファイルの変更
で可能。
独自機能の拡張はやりにくい？ Contact Form 7のように独自フックが
なさそう。
簡単に実装できるので初心者やデザイナーさんには使いやすい。日
本でのお問い合わせフォームとしての一般的な機能は標準であるの
でお客さんの要望も満たしやすい。Contact Form 7 でカスタマイズ
が難しいと感じている方など Trust Formを試してはどうでしょう？

62. ご静聴ありがとうございました