Trust form (お問い合わせフォームプラグイン)について1. Trust Form Ver1.5
お問い合わせフォームプラグイン
2013/01/13
瀬戸 貴弘
2. 瀬戸 貴弘
Twitter : @as_chachamaru
Facebook : as.chachamaru
職業 : システムエンジニア
WordPress暦
ブログ開始 Ver2.6~
本格的な勉強 2012年2月~
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 には大半のお問い合わせフォームプラグインにはない標準機能がある。
12. Trust Form とは
確認画面、メールそしてデータベースを
サポートしたお問い合わせフォーム
inquiry form creator プラグインの後継
inquiry form creator プラグインと開発者が同じ。Trust Formはこのプラグインの後継らしい。
14. 特徴
(1) HTMLの知識なくても作れる
(2) 確認画面を含め3ステップ構成
(3) 複数の管理人で投稿を管理
3ステップ: 入力画面、確認画面、完了画面
15. 機能
自動返信メール
データベースに保存
問い合わせ内容をCSVダウンロード
スパム対策
フォームごとのテンプレート切替
PHP5.4対応
などなど
※データベース保存は、設定によりオフにすることができる。
※スパム対策には、Akismet プラグインを有効にする必要がある。
17. (1)インストール
(2) お問い合わせフォームの作成
(3) お問い合わせページの作成
(4) お問い合わせをする
(5) お問い合わせ内容の確認
(6) CSVダウンロード
軽く一連の流れをみてみよう!
23. 作成画面の構成
①
②
③
④
(2 - 1)お問い合わせフォームの作成 : 作成画面の構成
① フォーム名の入力欄 ② 確認画面を含む3ステップの画面の入力内容欄
③ 管理者宛メール設定欄 ④ 自動返信メール設定欄
26. 作成してみよう!
ドラッグ・アンド・ドロップ
(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属性名] と指定すると、その項目のデータに置き換わる。
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
「メールアドレス」フィールドの値に送信される。
----- このフィールが複数あると全てに送信される。
署名
メール内容を確認してみよう!
48. テキストボックス,テキストエリア,チェックボックス,ラジオボタン,セレクトボックス,メールアドレス,ステータス,投稿日時
ちゃちゃ丸,"Truns Form テストです。","box1,box3",radio2,select2,xxxx@xxx.xxx,既読,"2013/01/11 23:00:45"
ダウンロードしたCSVの中身
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 で好きなように書き換える。
58. リアルタイムに反映
バリデーションの必須はチェック処理に必須にするだけで表示は何も変化しない。
「必須マーク」でユーザさんに必須であることを教えてあげるとユーザビリティがよい!
必須マーク をクリック > Require Mark が開く。
Require Markの変更はリアルタイムに反映されるので変更がわかりやすい。