CMSのポテンシャルを引き出す─MODxで作る商用サイト

第15回MODxのスニペットを使いこなす─FormIT[その1]

はじめに

これまで、WayfinderSimpleSearchなど、MODxの中でも代表的とも言えるスニペットについて簡単な紹介を行ってきましたが、今回も商用サイトを構築する上で必須とも言える、メールフォームを実現するためのスニペットを紹介します。その名はFormITです。

メールフォームの歴史は非常に長いため、ご存知のように、⁠メールフォーム」と検索するだけで、シンプルなものからAjaxに対応したものまで、さまざまなメールフォーム用のプログラムをダウンロードすることができます。それらをMODxとは独立した形で動作させることも可能なのですが、MODx以外の部分でバージョン、設定管理が必要になってしまうため、運用の手間を考えると、なるべくメールフォームもMODx内で完結させたいと考えたくなるのは筆者だけではないはずです。

FormITのインストール

もはや解説の必要も無いかもしれませんが、スニペットをインストールするためには、⁠システム⁠⁠→⁠パッケージマネージャー⁠⁠→⁠プロバイダから取得」より「FormIT」を検索してください。FormITスニペットはWayfinderやLoginスニペットと並んで非常にメジャーなスニペットですので、検索せずとも「ダウンロードが多い順」の中にリストアップされていることが多いです。

FormITスニペットを導入すると、図1のように関連スニペットを含め、合計7個の関連スニペットがインストールされます。

図1 インストールされるスニペット群
図1 インストールされるスニペット群

余談ですが、以前のバージョンであるMODx Evolutionでメールフォームを実現させるためのスニペットといえば、eFormがメジャーで、一部の機能について言えばFormITよりも優れていたのですが、現在このスニペットは開発が止まっており、Revolution用のメールフォームといえば、現時点では事実上FormIT一択という状況です。

FormITとリソースの関係

以前SimpleSearchスニペットを導入した際に、⁠検索用リソース⁠⁠、⁠検索後に表示されるリソース」を作成したのは記憶に新しいかもしれませんが、FormITを使ったメールフォームを設置するためにも、基本的に次の2つのリソースが必要になります。

  • メールフォーム自体のリソース
    ⁠なかみつ園で言えば、http://www.nakamitsuen.com/form.html)
  • 問い合わせメールのテンプレートとなるリソース(チャンク)

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

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

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

表1 メールフォーム用リソースの作成
タイトルお問い合わせ
エイリアスform
公開するチェック
リソースコンテンツリスト1の内容
リスト1 メールフォーム用リソース
[[!FormIt?
 &hooks=`email`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`user@example.com`
 &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>

送信先メールアドレスの部分は適宜変更してください。

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

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

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

図2 問い合わせページの様子
図2 問い合わせページの様子

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

リスト3 送信されてくるメールの内容
============================================================== 
※ 本メールは自動送信です。返信することは出来ません。 
============================================================== 

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

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

お名前:     テスト 様 
メールアドレス: foo@example.com 

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

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

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

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

表2 FormITスニペットの基本オプション
パラメータ意味デフォルト値
hooksデータがポストされた際に、どの機能(hookと呼ばれる)を使用するか。 
preHooksフォームがロードされた際に、どの機能(hookと呼ばれる)を使用するか。 
submitVarsubmitボタンの名前をチェックし、不正な場合は処理を行わない。 
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
storeFormITRetrieverスニペットから使用するために、内容をキャッシュとして保存するかどうか。0
storeTime上記のキャッシュ保持時間。300
placeholderPrefixプレースホルダーのためのprefix(通常は変更する必要はない)fi.
successMessage投稿が成功した場合のメッセージ 
successMessagePlaceholder上記のプレースホルダー(通常は変更する必要はない)fi.successMessage

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

妥当性チェック(validate)について

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

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

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

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

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

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

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

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

[[!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桁の数字を簡単にチェックするための正規表現なので、⁠表現が厳密じゃない!この著者はだめだ!」というツッコミは無しにしてくださいね(笑⁠⁠。

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

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

リスト4 スニペットのコール例
[[!FormIt?
-- 略 --
 &customValidators=`is_zipcode`
 &validate=`name:required,
      email:email:required,
      zip:is_zipcode:required,
      message:required`
-- 略 --
]]

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

図3 カスタムな妥当性チェックを行った場合のエラー出力
図3 カスタムな妥当性チェックを行った場合のエラー出力

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

最後に

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

おすすめ記事

記事・ニュース一覧