はじめに

これまで、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）
• 問い合わせメールのテンプレートとなるリソース（チャンク）

では、いつものような流れで、まずは実際に動作を体験してみた上で詳しい解説に入っていきましょう。

メールフォームリソースの作成

ここでは、なかみつ園のように、シンプルなメールフォーム用のページを作成してみます。管理画面より、次の問い合わせフォーム用リソースを作成してみてください。

[[!FormIt?
 &hooks=`email`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`[email protected]`
 &emailToName=`お茶のなかみつ園`
 &validate=`name:required,
      email:email:required,
      message:required`
 &successMessage=`<p>お問い合わせを受け付けました。</p>`
]]

<p>
<div class="success" style="color: #ff0000">[[!+fi.successMessage]]</div>
</p>

<form class="form" action="[[~[[*id]]]]" method="post">
  <table id="contactform">
    <tbody>
    <tr>
      <th>お名前<span style="color: #ff2222;">*</span></th>
      <td><input id="name" name="name" type="text" value="[[!+fi.name]]" /><br /><span class="error">[[!+fi.error.name]]</span>
      </td>
    </tr>
    <tr>
      <th>メールアドレス<span style="color: #ff2222;">*</span></th>
      <td><input id="email" name="email" type="text" value="[[!+fi.email]]" /><br /><span class="error">[[!+fi.error.email]]</span></td>
    </tr>
    <tr>
      <th>問い合わせ内容<span style="color: #ff2222;">*</span></th>
      <td><textarea id="message" cols="35" rows="7" name="message">[[!+fi.message]]</textarea><br /><span class="error">[[!+fi.error.message]]</span></td>
    </tr>
    <tr>
      <th><br /></th>
      <td><input id="submit" name="submit" type="submit" value="送信" /></td>
    </tr>
  </tbody>
  </table>
</form>

次に、管理者にメールを通知するためには、そのためのテンプレートが必要になりますので、その内容は次のようにチャンクとして作成します。

==============================================================<br />
※ 本メールは自動送信です。返信することは出来ません。<br />
==============================================================<br />
<br />
下記のお問い合わせを受け付けました。通常、２営業日以内にご連絡<br />
いたします。お急ぎの場合は、お手数ですがお電話にてお問い合わせ<br />
下さい。<br />
<br />
--------------------------------------------------------------<br />
お問い合わせ内容<br />
--------------------------------------------------------------<br />
<br />
お名前：　　　　　[[+name]] 様<br />
メールアドレス：　[[+email]]<br />
<br />
お問い合わせ内容：<br />
[[+message]]<br />

以上のようにリソースとチャンクを作成した結果、お問い合わせページの様子は図2のようになります。スニペットコール時に、&validateというパラメータで内容の妥当性をチェックしているため、図2のように正しくないメールアドレスを指定すると、英語でのエラーが表示されています。

一方で、正しいメールアドレスを指定した場合に送られてくるメールの内容は次のようなものとなります。

============================================================== 
※ 本メールは自動送信です。返信することは出来ません。 
============================================================== 

下記のお問い合わせを受け付けました。通常、２営業日以内にご連絡 
いたします。お急ぎの場合は、お手数ですがお電話にてお問い合わせ 
下さい。 

-------------------------------------------------------------- 
お問い合わせ内容 
-------------------------------------------------------------- 

お名前：　　　　　テスト 様 
メールアドレス：　[email protected] 

お問い合わせ内容： 
問い合わせのテスト

現時点では、管理者のみにメールが送られてくる形なので、機能的にいろいろなツッコミどころはあるかと思いますが、まずはメールフォームを簡単に設置できることだけは理解いただけたかと思います。FormITの機能はこれだけではないため、順を追って解説させてください。

FormITスニペットのパラメータ

無事スニペットが動作したところで、各パラメータの解説に移ります。オリジナルの解説は例のごとくMODx Documentationから得ることができますが、ここでは各項目を日本語で紹介します。

これらはあくまでもFormITスニペットの基本的なパラメータであるため、実際にはこれ以外にもさまざまなパラメータが用意されており、次回以降順次紹介していく予定です。

妥当性チェック（validate）について

基本パラメータの中でも最も重要とも言える、値の妥当性チェックについて解説します。

前述の問い合わせ用サンプルフォームからも想像できる通り、FormITスニペットを使用する場合には、リソース中にHTMLフォームを設置した上で、テキストエリアやチェックボックスなど、それぞれのフォームに対してvalidateパラメータを用いた妥当性チェックを行う必要があります。たとえば、

[[!FormIt?
-- 略 --
 &validate=`mailaddr:email:required,
-- 略 --
]]
-- 略 --
<input id="mailaddr" name="mailaddr" type="text" value="">

というリソースが設定されている場合には、mailaddrテキストボックスに対して

• 値がメールアドレス形式であるかどうか
• 何らかの値が入力されているか

というチェックが入り、それ以外の値はポストできません。この辺りで「では、具体的にどのようなチェックができるの？」といった疑問が湧いてくるかと思いますが、ビルトインされている妥当性チェックの一覧は

• http://rtfm.modx.com/display/ADDON/FormIt.Validators

より得ることができます。

たとえば、年齢というフォームを加えたい場合、

[[!FormIt?
-- 略 --
 &validate=`age:isNumber:required,
-- 略 --
]]
-- 略 --
<input id="age" name="age" type="text" value="">

という形で数値チェックを行うことができ、組み合わせ次第では「入力は必須で、値は18～99である必要がある」といった設定もできるわけです。

ちなみに、先の例で紹介したメールアドレスの妥当性チェックに関してですが、「⁠メールアドレス 正規表現」でgoogle検索すると分かるよう、記述方法については過去にいろいろな議論が行われています。実際にcore/components/formit/model/formit/fivalidator.class.phpを読む限りは、「⁠厳密で本当に正しい」正規表現が用いられているわけではないため、それが困る場合にはご自身で修正を行うようにしてください。

カスタムな妥当性チェックについて

ビルトインされているチェック方法ではもの足りない場合には、独自のチェック方式を定義することもできます。たとえば、郵便番号が7桁であるかどうか簡単にチェックするためのルールを作成してみます。あくまでも7桁の数字を簡単にチェックするための正規表現なので、「⁠表現が厳密じゃない！この著者はだめだ！」というツッコミは無しにしてくださいね（笑⁠）⁠。

<?php
if (!preg_match("/^\d{3}-\d{4}$/", $value)) {
  $validator->addError($key,'「3桁の数字-4桁の数字」という形式で入力してください');
}
return $success;
?>

FormITスニペットからの呼び出しは次のようにします。

[[!FormIt?
-- 略 --
 &customValidators=`is_zipcode`
 &validate=`name:required,
      email:email:required,
      zip:is_zipcode:required,
      message:required`
-- 略 --
]]

ブラウザの出力は次のとおりです。

以上、妥当性チェックの紹介でした。実際にエラー出力を行う場合には、HTMLタグやスタイルシートを活用して、文字を赤字にするなりエラーをポップアップさせるなり、デザイン上の応用が可能ですので、参考になるメールフォームのソースを元に、いろいろと試してみてください。

最後に

FormITスニペットは非常に実用的で高機能なスニペットですので、次回も引き続き各種機能やパラメータの解説を行っていきます。お楽しみに。