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