はじめに
これまで、WayfinderやSimpleSearchなど、MODxの中でも代表的とも言えるスニペットについて簡単な紹介を行ってきましたが、今回も商用サイトを構築する上で必須とも言える、メールフォームを実現するためのスニペットを紹介します。その名はFormITです。
メールフォームの歴史は非常に長いため、ご存知のように、「メールフォーム」と検索するだけで、シンプルなものからAjaxに対応したものまで、さまざまなメールフォーム用のプログラムをダウンロードすることができます。それらをMODxとは独立した形で動作させることも可能なのですが、MODx以外の部分でバージョン、設定管理が必要になってしまうため、運用の手間を考えると、なるべくメールフォームもMODx内で完結させたいと考えたくなるのは筆者だけではないはずです。
FormITのインストール
もはや解説の必要も無いかもしれませんが、スニペットをインストールするためには、「システム」→「パッケージマネージャー」→「プロバイダから取得」より「FormIT」を検索してください。FormITスニペットはWayfinderやLoginスニペットと並んで非常にメジャーなスニペットですので、検索せずとも「ダウンロードが多い順」の中にリストアップされていることが多いです。
FormITスニペットを導入すると、図1のように関連スニペットを含め、合計7個の関連スニペットがインストールされます。
余談ですが、以前のバージョンであるMODx Evolutionでメールフォームを実現させるためのスニペットといえば、eFormがメジャーで、一部の機能について言えばFormITよりも優れていたのですが、現在このスニペットは開発が止まっており、Revolution用のメールフォームといえば、現時点では事実上FormIT一択という状況です。
FormITとリソースの関係
以前SimpleSearchスニペットを導入した際に、「検索用リソース」、「検索後に表示されるリソース」を作成したのは記憶に新しいかもしれませんが、FormITを使ったメールフォームを設置するためにも、基本的に次の2つのリソースが必要になります。
- メールフォーム自体のリソース
(なかみつ園で言えば、http://www.nakamitsuen.com/form.html)
- 問い合わせメールのテンプレートとなるリソース(チャンク)
では、いつものような流れで、まずは実際に動作を体験してみた上で詳しい解説に入っていきましょう。
メールフォームリソースの作成
ここでは、なかみつ園のように、シンプルなメールフォーム用のページを作成してみます。管理画面より、次の問い合わせフォーム用リソースを作成してみてください。
表1 メールフォーム用リソースの作成
タイトル | お問い合わせ |
エイリアス | form |
公開する | チェック |
リソースコンテンツ | リスト1の内容 |
次に、管理者にメールを通知するためには、そのためのテンプレートが必要になりますので、その内容は次のようにチャンクとして作成します。
以上のようにリソースとチャンクを作成した結果、お問い合わせページの様子は図2のようになります。スニペットコール時に、&validateというパラメータで内容の妥当性をチェックしているため、図2のように正しくないメールアドレスを指定すると、英語でのエラーが表示されています。
一方で、正しいメールアドレスを指定した場合に送られてくるメールの内容は次のようなものとなります。
現時点では、管理者のみにメールが送られてくる形なので、機能的にいろいろなツッコミどころはあるかと思いますが、まずはメールフォームを簡単に設置できることだけは理解いただけたかと思います。FormITの機能はこれだけではないため、順を追って解説させてください。
FormITスニペットのパラメータ
無事スニペットが動作したところで、各パラメータの解説に移ります。オリジナルの解説は例のごとくMODx Documentationから得ることができますが、ここでは各項目を日本語で紹介します。
表2 FormITスニペットの基本オプション
パラメータ | 意味 | デフォルト値 |
hooks | データがポストされた際に、どの機能(hookと呼ばれる)を使用するか。 | |
preHooks | フォームがロードされた際に、どの機能(hookと呼ばれる)を使用するか。 | |
submitVar | submitボタンの名前をチェックし、不正な場合は処理を行わない。 | |
validate | 項目の妥当性をチェック。項目をカンマ区切りでリストする。 | |
validationErrorMessage | 妥当性チェックが失敗した場合に一般的にプレースホルダーにセットされるエラーメッセージ。 | <p class="error">A form validation error occurred. Please check the values you have entered.</p> |
validationErrorBulkTpl | 一般的な妥当性チェックでエラーとなった場合のHTMLテンプレート。 | <li>[[+error]]</li> |
errTpl | エラーメッセージ用のテンプレート(チャンクではなくHTML) | <span class="error">[[+error]]</span> |
customValidators | カスタムな妥当性チェックを行う。項目をカンマ区切りでリストする。 | |
clearFieldsOnSuccess | 投稿が成功した場合でページをリダイレクトさせない場合にフォームの内容をクリアするかどうか。 | 1 |
store | FormITRetrieverスニペットから使用するために、内容をキャッシュとして保存するかどうか。 | 0 |
storeTime | 上記のキャッシュ保持時間。 | 300 |
placeholderPrefix | プレースホルダーのためのprefix(通常は変更する必要はない) | fi. |
successMessage | 投稿が成功した場合のメッセージ | |
successMessagePlaceholder | 上記のプレースホルダー(通常は変更する必要はない) | fi.successMessage |
これらはあくまでもFormITスニペットの基本的なパラメータであるため、実際にはこれ以外にもさまざまなパラメータが用意されており、次回以降順次紹介していく予定です。
妥当性チェック(validate)について
基本パラメータの中でも最も重要とも言える、値の妥当性チェックについて解説します。
前述の問い合わせ用サンプルフォームからも想像できる通り、FormITスニペットを使用する場合には、リソース中にHTMLフォームを設置した上で、テキストエリアやチェックボックスなど、それぞれのフォームに対してvalidateパラメータを用いた妥当性チェックを行う必要があります。たとえば、
というリソースが設定されている場合には、mailaddrテキストボックスに対して
- 値がメールアドレス形式であるかどうか
- 何らかの値が入力されているか
というチェックが入り、それ以外の値はポストできません。この辺りで「では、具体的にどのようなチェックができるの?」といった疑問が湧いてくるかと思いますが、ビルトインされている妥当性チェックの一覧は
より得ることができます。
たとえば、年齢というフォームを加えたい場合、
という形で数値チェックを行うことができ、組み合わせ次第では「入力は必須で、値は18~99である必要がある」といった設定もできるわけです。
ちなみに、先の例で紹介したメールアドレスの妥当性チェックに関してですが、「メールアドレス 正規表現」でgoogle検索すると分かるよう、記述方法については過去にいろいろな議論が行われています。実際にcore/components/formit/model/formit/fivalidator.class.phpを読む限りは、「厳密で本当に正しい」正規表現が用いられているわけではないため、それが困る場合にはご自身で修正を行うようにしてください。
カスタムな妥当性チェックについて
ビルトインされているチェック方法ではもの足りない場合には、独自のチェック方式を定義することもできます。たとえば、郵便番号が7桁であるかどうか簡単にチェックするためのルールを作成してみます。あくまでも7桁の数字を簡単にチェックするための正規表現なので、「表現が厳密じゃない!この著者はだめだ!」というツッコミは無しにしてくださいね(笑)。
FormITスニペットからの呼び出しは次のようにします。
ブラウザの出力は次のとおりです。
以上、妥当性チェックの紹介でした。実際にエラー出力を行う場合には、HTMLタグやスタイルシートを活用して、文字を赤字にするなりエラーをポップアップさせるなり、デザイン上の応用が可能ですので、参考になるメールフォームのソースを元に、いろいろと試してみてください。
最後に
FormITスニペットは非常に実用的で高機能なスニペットですので、次回も引き続き各種機能やパラメータの解説を行っていきます。お楽しみに。