Junk Blog

eFormは、問い合わせフォームのようなメールフォームを送信するためのスニペットで、MODxに標準添付されている。

サンプルWebサイトでもContact Usというページで利用できるようになっているが、実際にフォームからメッセージを送っても管理者のアドレスに届かなかったので、基本の基本から実地テストすることにした。使用するバージョンは1.4.4。

サンプルサイトでは、入力用のフォームのレイアウトを”ContactForm”、実際に送信されるときの文面やレイアウトを”ContactFormReport”というチャンクを使って設定している。

実験では、上記のチャンクを残して入力用に”MailForm”、送信用に”MailFormReport”というチャンクを作ってテストしている。

eFormのベーシックな書式

eFormを使ったメール送信フォームを作るにはまず、送信フォームを表示するためのページを用意し、編集モードで「内容」に次のようなタグを記述する。

[!eForm? &formid=`MailForm` &tpl=`MailForm` &report=`MailFormReport` !]

上記タグのパラメータのうち&formidと&tplにでてくる`MailForm`と&reportの部分の`MailFormReport`の部分がそれぞれ使用するチャンク名。

これで、フォームのページにアクセスしたときに、チャンク’MailForm’の内容が入力フォームとして表示されるようになる。

  

入力フォーム用チャンク(MailForm)の記述

送信ページ上に実際に表示する入力用フォームはテンプレートと呼ばれる。テンプレートはチャンクまたはドキュメントを利用できる。ここではチャンクとして作成している(2008/01/14 追記)

入力フォーム用チャンクの最低限の記述は次のようなものになる。入力フォームに必要な<form>タグや送信用ボタンをまるごとチャンク化している。

<form method="post" action="[~[*id*]~]" id="Mailform" name="Mailform">
<fieldset>
<legend>下記のフォームにご入力ください</legend><input name="formid" type="hidden" value="MailForm" />
<label for="mfName">お名前：
<input name="name" id="mfName" class="text" type="text" />
</label>
<label for="mfAddress">メールアドレス：
<input name="email" id="mfAddress" class="text" type="text" />
</label>
<label for="mfMessage">メッセージをどうぞ：</label>
<textarea name="message" id="mfMessage" cols="60" rows="8" />
</textarea><input type="submit" name="送信" value="この内容で送信する" />
</fieldset>
</form>

フォームの中で重要なのは次の2点。

• <form>要素のname属性にチャンク自身の名前（ここでは’MailForm‘）を指定する。
• <input>要素と<textarea>要素のname属性名（ここではそれぞれ’name‘、’email‘、’message‘）は送信用チャンク（MailFormReport）内で変数として使用する。

解説本を見ていると”<input name=”formid” type=”hidden” value=”MailForm” />”の行は不要じゃないかと思えるのだが実際にはこれがないと送信ができない。理由はよくわからない。

  

送信用チャンク(MailFormReport)の記述

送信用チャンクは入力フォームからのデータを受け取り、実際に送信するメールの形に整形する。このため、入力フォームのフィールドで指定した<input>や<textarea>要素のname属性と共通する名前を[+属性名+]の形で表した、プレースホルダ（変数名のようなもの）を記述する。上記の例では、

• [+name+]　→送信者名に置き換えられる。
• [+email+]　→送信者のメールアドレスに置き換えられる。
• [+message+] 　→メッセージ内容に置き換えられる。  

  

メールの件名を表示させる

以上の設定だけでは、メールを受信したときの件名が「0」（ゼロ）になってしまう。件名として固定の文字列（「お問い合わせ」など）を指定するにはチャンクを次のように書き換える。次のコードのうち太字部分が追加したテキスト。

[!eForm? &formid=`MailForm` &tpl=`MailForm` &report=`MailFormReport` &subject=`お問い合わせ` !]

「”サイト名”|”名前”様からお問い合わせ」のように、件名にサイト名や送信者名を自動で挿入することもできる。

[!eForm? &formid=`MailForm` &tpl=`MailForm` &report=`MailFormReport` &subject=`[(site_name)]｜[+name+]様からお問い合わせ` !]

送信者名のように入力フォームから受け渡される値は[+プレースホルダ名+]と記述するのに対し、サイト名はMODxのシステムから受け渡されるので[(プレースホルダ名)]となるらしい。

なお、実際には件名が長すぎると受信したメールソフト上では途中で”?”になって切れてしまうようだ。

  

入力フォーム側でsubjectを使う場合の注意

入力フォームから受け取った項目をそのままメールの件名として利用したい場合は、入力フォーム上の項目のname属性を’subject’とするだけでよい。

ドロップダウンリストから選択した項目をメールの件名に利用したい場合のソース例

<dt><label for="mfSubject">ご用件について：</label></dt>
<dd>
<select name="subject” id=”mfSubject” size=”1″ >
<option value=”サイトへの質問”>サイトへのご質問・ご要望</option>
<option value=”仕事の依頼”>仕事の依頼</option>
<option value=”その他のお問い合わせ”>その他お問い合わせ</option>
</select></dd>

上のように入力用ドロップダウンリストのname属性を’subject’にしておくと、チャンク側のパラメータが次のように固定の文字列（太線部分）になっていても、それを無視して’subject’の内容が件名として使われる。

[!eForm? &formid=`MailForm` &tpl=`MailForm` &report=`MailFormReport` &subject=`お問い合わせ` !]

もし、入力内容と固定の文字列を組み合わせた件名を使いたい場合は、入力項目のname属性を’subject’以外にしておけばよい。

入力フォームの修正例（太字部分）

<dt><label for="mfSubject">ご用件について：</label></dt>
<dd>
<select name="category” id=”mfSubject” size=”1″ >
<option value=”サイトへの質問”>サイトへのご質問・ご要望</option>
<option value=”仕事の依頼”>仕事の依頼</option>
<option value=”その他のお問い合わせ”>その他お問い合わせ</option>
</select></dd>

スニペットコードの修正例（太字部分）

[!eForm? &formid=`MailForm` &tpl=`MailForm` &report=`MailFormReport` &subject=`[+name+]様から[+category+]` !]