第16回　MODxのスニペットを使いこなす─FormIT［その2］

はじめに

出張や長期休暇の都合上、前回の記事からずいぶんと時間が経ってしまいましたが、今回も前回に引き続き、MODxに欠かせないスニペットのひとつであるFormITについて解説したいと思います。基本的な設置方法については前回解説済みですので、必要であれば内容をおさらいしておいてくださいね。

送信者への控え送信

一般的なサイトの問い合わせフォームを利用すると、フォームの内容が控えとして投稿者に送信されてくることがほとんどだと思います。この機能は標準でサポートされているため、次のようにスニペットのパラメータを少し設定するだけで簡単に実現することができます。なお、外部CSSを使っていない都合上、今回はエラー文字列などの色を変更するため、

<div class="success" style="color: #ff0000;">...</div>

という一見意味のない表現を用いています。実際に運用する場合には、CSSファイル内にてsuccessというクラスを定義しておき、HTML部分には

<div class="success">...</div>

という表現を用いるのが一般的です。

リスト1　問い合わせフォーム内のスニペットのパラメータを変更（赤字が変更部分）

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

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

ここでは、フックの追加と投稿者向けのメール設定を定義しています。フックとは、投稿が行われる前や行われた際に関連して実行される処理であり、FormITが持つ独自のプラグインのように考えることができます。また、投稿者向けのメール設定については、これまでの&email...パラメータとよく似ているため、解説の必要はないでしょう。

もし、投稿者、管理者に異なった内容のメールを送信したい場合には、別々のテンプレート用チャンクを作成し、&emailTplと&fiarTplパラメータでそれぞれのチャンクを指定してください。

エラーメッセージを編集する

現状では、&validateパラメータにより全ての項目が必須とされていますが、項目を空欄にして投稿した場合、各フォームの下には「This field is required.」という英語のメッセージが表示されます。

ここで思い出していただきたいのは第12回で紹介したLexicon機能です。今回のエラーメッセージは、「⁠システム⁠」⁠→「⁠語彙トピックの管理⁠」⁠→「⁠ネームスペースでformitを選択」より探し出すことができます。

メッセージを日本語化させるためには、以前行ったように、付属の翻訳ファイルを日本語用ファイルとしてコピーし、「⁠語彙トピックの管理」より日本語訳を上書きさせれば良いのですが、名前が入力されていない場合には「名前の入力は必須です。⁠」⁠、メールアドレスが不正な場合には「メールアドレスの入力は必須です。」といった形で、パーツごとに異なるエラーメッセージを表示させたい場合があります。

この場合、前回紹介したカスタムの妥当性チェックを使い、チャンクごとに異なったエラーメッセージを用意するというのもアリなのですが、妥当性チェックの数だけチャンクを用意するのは骨の折れる作業です。実は次のようにエラーメッセージは簡単に変更することができます。

リスト2　パーツごとに異なったエラーを表示させる（赤字が追加部分）

[[!FormIt?
 &hooks=`email,FormItAutoResponder`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`[email protected]`
 &emailToName=`お茶のなかみつ園`
 &fiarTpl=`formit_mailbody`
 &fiarSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &fiarFrom=`[email protected]`
 &validate=`name:required, 
      email:email:required, 
      message:required` 
 &successMessage=`<p>お問い合わせを受け付けました。</p>` 
 &name.vTextRequired=`■ 名前の入力は必須です。<br />`
 &email.vTextRequired=`■ メールアドレスの入力は必須です。<br />`
 &message.vTextRequired=`■ 問い合わせ内容の入力は必須です。<br />`
]]
--- 略 ---

日本語の問い合わせフォームで英語のエラーが表示されるのは不自然ですので、ぜひとも設定しておきたい機能のひとつです。

フックを活用する

フックとは、FormITが持つプラグインのようなもの、と解説しましたが、本校執筆時点でFormITには、下記のビルトインフックが含まれています。

表1　ビルトインフックの内容

フック名	用途
email	メール送信する
redirect	投稿後、ページをリダイレクトさせる
spam	IPチェックなどでspam投稿を防止する
recaptch	spam投稿防止のために、reCaptchaを使用する
FormItAutoResponder	自動応答を実現する

各フックの使い方は、すでになんとなく理解いただけているかと思いますが、詳細は例のごとくスニペットのドキュメントを参照してみてください。

ビルトインフックだけでも多機能なフォームを作成することができますが、妥当性チェック同様、カスタムのフックを作成することもできます。試しに、カスタムフックを使って、メール内に「送信日」という項目を追加してみましょう。ここでの「送信日」とは、フォームが送信された際の日付と時間を意図しています。

まず、カスタムのフックは妥当性チェック同様、スニペットとして作成します。内容は非常にシンプルで、postdateという変数に実行時の時刻情報を代入し、trueを返しているだけです。

リスト3　SetPostdateスニペット

<?php
$hook->setValue('postdate', strftime("%F %H:%M:%S"));
return true;

次に、&HooksパラメータにSetPostdateフックを追加します。

リスト4　問い合わせフォームリソースの内容（赤字が追加部分）

[[!FormIt?
 &hooks=`SetPostdate,email,FormItAutoResponder`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`[email protected]`
 &emailToName=`お茶のなかみつ園`
 &fiarTpl=`formit_mailbody`
 &fiarSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &fiarFrom=`[email protected]`
 &validate=`name:required, 
      email:email:required, 
      message:required` 
 &successMessage=`<p>お問い合わせを受け付けました。</p>` 
 &name.vTextRequired=`■ 名前の入力は必須です。<br />`
 &email.vTextRequired=`■ メールアドレスの入力は必須です。<br />`
 &message.vTextRequired=`■ 問い合わせ内容の入力は必須です。<br />`
]]
--- 略 ---

あとは、メールのテンプレートであるformit_mailbodyチャンクにpostdateという項目を加えます。

リスト5　formit_mailbodyチャンクの一部

送信日：       [[+postdate]]<br />
お名前：       [[+name]] 様<br />
メールアドレス：  [[+email]]<br />

これにより、仮にメールが遅延した場合でも正確な送信日時がわかるようになり、より充実した問い合わせフォームとなりました。

最後に

世の中にはさまざまなメールフォームが存在しますが、MODx＋FormITの組み合わせでは、パラメータやフックを活用することで、FormIT自体のソースを変更することなく多彩な投稿フォームを作成することができます。

FormITの解説は次回で最後です。次回はさらにフックを活用して、より実用的な機能を追加していきます。