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