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

Trust Form

2013/01/13

瀬戸貴弘

お問い合わせフォームプラグイン

Ver1.5

瀬戸貴弘

Twitter

: as.chachamaru

WordPress暦

ブログ開始 Ver2.6～

本格的な勉強 2012年2月～

: システムエンジニア

: @as_chachamaru

Facebook

職業

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ダウンロード

公式ディレクトリに登録されているので管理パネルからインストールできる。


有効にするとサイドメニューに「Trust Form」が表示される。

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

作成画面の構成

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

（2 - 1）お問い合わせフォームの作成　:　作成画面の構成

サイドメニュー＞ Trust Form ＞フォームの新規作成


①


① フォーム名の入力欄

②

② 確認画面を含む3ステップの画面の入力内容欄

④

③ 管理者宛メール設定欄 ④ 自動返信メール設定欄

③

（2 - 1）お問い合わせフォームの作成　:　作成画面の構成

作成してみよう！

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


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



ドラッグ・アンド・ドロップ

お問い合わせフォームに必要な項目を追加する。各項目のフィールドはドラッグ・アンド・ドロップで追加できる。



各フィールドのタイトルをクリックするとタイトルが変更できる。

をクリックすると詳細設定のウィンドウが開く。



各フィールドに対しては変更はできない。



本文の入力欄がない。本文は固定（※雛形は固定。ユーザさんの入力項目は動的変更）

本文サンプル

http://localhost/wp02/wp-admin/admin.php?page=trust-form-entries&form=5&status=new

テキストボックス: abcabd

テキストエリア: abcabd

チェックボックス: box2

ラジオボタン:

セレクトボックス:

メールアドレス:

日時: 2013/01/11 01:18:39

http://localhost/wp02/wp-admin/



本文サンプル

お問い合わせありがとうございます。追って担当者からご連絡差し上げます。




ラジオボタン:



日時: 2013/01/11 01:18:39

-----署名

[FORM DATA] と指定すると、フォームの全項目のフォームデータで置き換わる。







ラジオボタン:



日時: 2013/01/11 01:18:39

-----署名

[name属性名] と指定すると、その項目のデータに置き換わる。

<input type="text" value="" name="element-11">

[element-11]

abcabd



作成したお問い合わせフォームを使って投稿またはページを作るので指定されたタグをメモっておく。

(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

メールアドレス: [email protected]

日時: 2013/01/11 23:00:45









日時: 2013/01/11 23:00:45

-----署名

メール内容を確認してみよう！









日時: 2013/01/11 23:00:45

-----署名

メール内容を確認してみよう！

「メールアドレス」フィールドの値に送信される。

このフィールが複数あると全てに送信される。

メール内容はデータベースにも保存されるので管理パネルから受信一覧をみることができる。

マウスオーバで表示

「閲覧」をクリックするとメール内容の詳細画面に遷移する。

メモの追記やステータスの変更もできる。

ステータスは「新規」と「既読」がある。

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

書き込み権限がなければCSVはうまくダウンロードできない（何も出力がないファイルになる）。

Trust Formプラグインのディレクトリ内にある「CSV」という名前のディレクトリに

要書き込み権限

※csv file : 0byte

ダウンロードしたCSVの中身

テキストボックス,テキストエリア,チェックボックス,ラジオボタン,セレクトボックス,メールアドレス,ステータス,投稿日時ちゃちゃ丸,"Truns Form テストです。","box1,box3",radio2,select2,[email protected],既読,"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を試してはどうでしょう？

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

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

Documents

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