MODX Evolution CMSのeFormスニペットで問い合わせフォームを作る

問い合わせフォームの作成手順は、次の通りです。

1. 「問い合わせフォーム」チャンクの作成
2. 「問い合わせ送信後のお礼画面」チャンクの作成
3. 「お客様への自動返信メール」チャンクの作成
4. 「自分への自動通知メール」チャンクの作成
5. 「問い合わせ」リソースの作成

以前にMODX Evolution CMSで作ったサイトの問い合わせフォームのコードをそのまま以下に掲載します。このコードをコピーしてMODXのチャンクやリソースに貼り付けて、必要な箇所を修正してお使いいただけます。

注意

チャンクを誤ってスニペットに登録してしまうと、深刻なエラーを引き起こすことがあります。チャンクは単なるHTMLですが、スニペットはプログラムそのものです。くれぐれもご注意ください。

1. 問い合わせフォームのチャンク

チャンク名
例：contactForm	フォームであることがわかるように
チャンクコード
<p>[+validationmessage+]</p> <form action="[~[*id*]~]" method="post"> <input name="formid" type="hidden" value="feedbackForm" /> <table> <tr> <th>ご氏名<span style="color: red;">*</span></th> <td> <input maxlength="60" name="Name" type="text" eform="ご氏名:string:1" /></td> </tr> <tr> <th>メールアドレス<span style="color: red;">*</span></th> <td><input maxlength="40" name="email" size="40" type="text" eform="メールアドレス:string:1" /></td> </tr> <tr> <th>お問い合わせ内容<span style="color: red;">*</span></th> <td><textarea cols="40" rows="10" name="comments" eform="お問い合わせ内容:string:1" ></textarea></td> </tr> <tr> <th>認証コード<span style="color: red;">*</span></th> <td><img src="[+verimageurl+]" border="1" alt="verification code" align="right" />右記のコードを半角英数字でご記入ください。<br /><input name="vericode" size="20" type="text" /></td> </tr> <tr> <th>※<span style="color: red;">*</span>印：入力必須項目</th><td>※確認画面を出さずに送信します。この画面で内容をお確かめください。 <input name="submit" type="submit" value="送信" /></td> </tr> </table> </form>	[+validationmessage+]：入力洩れがあったときの警告文を表示します。 name="[項目ID]"：項目IDは半角英数字で設定します。他のチャンクやリソースで、その項目に記入された内容を呼び出す際に使います。メールアドレスのname変数だけは、必ずすべて小文字でemailにします。 eform="[項目名]:string:1"：必須項目の設定です。[項目名]は、入力洩れの警告文の中で「入力洩れのあった項目」を示すのに使われます。

続けて、「問い合わせ送信後のお礼画面」チャンク、「お客様への自動返信メール」チャンク、「自分への自動通知メール」チャンクを作成しましょう。
eFormスニペットで問い合わせフォームを作る手順の続きです。

2. お客様へのお礼画面のチャンク

チャンク名
例：contactThanks	お礼画面であることがわかるように
チャンクコード
<p>[+Name+]様、お問い合わせいただきましてありがとうございます</p> <p>下記の内容を事務局に送信しました。確認のため、ご登録いただいたメールアドレスに下記の内容をお送りしました。</p> <table> <tr> <th>ご氏名:</th><td>[+Name+]様</td> </tr> <tr> <th>メールアドレス：</th><td>[+email+]</td> </tr> <tr> <th>お問い合わせ内容：</th><td>[+comments+]</td> </tr> </table> <p>もしメールが届いていない場合は、メールアドレスに誤りがあるか、このお問い合わせフォームが正常に動作しなかった可能性があります。その場合は、お手数ですが、#####@#####.### 宛にお知らせください。</p>	[+Name+]：チャンク1のname="Name"で 指定した内容を引っ張ってきます。

3. お客様への自動返信メールのチャンク

チャンク名
例：contactReply	返信だとわかるように
チャンクコード
[+Name+] 様 お問い合わせいただきましてありがとうございます。 後ほど弊社担当者よりご連絡させていただきます。 ---------------------------------------------------------------------- 【お問い合わせ内容】 ---------------------------------------------------------------------- ご氏名：[+Name+] 様 メールアドレス：[+email+] お問い合わせの内容：[+comments+] お問い合わせ日時：[+postdate+] ::**::**::**::**::**::**::**::**::**:: 　　　　　　署　　　名 ::**::**::**::**::**::**::**::**::**:: このメールは自動返信機能により送信しています。	[+Name+]：チャンク1のname="Name"で 指定した内容を引っ張ってきます。

4. 自分宛ての自動通知メールのチャンク

チャンク名
例：contactReport	通知だとわかるように
チャンクコード
[+Name+]様からお問い合わせがありました。 ---------------------------------------------------------------------- ご氏名:[+Name+]様 メールアドレス:[+email+] お問い合わせ内容:[+comments+] ---------------------------------------------------------------------- お問い合わせ日時：[+postdate+] ---------------------------------------------------------------------- ※このメールは自動返信機能により、送信しています。	[+Name+]：チャンク1のname="Name"で 指定した内容を引っ張ってきます。

最後に4つのチャンクを含めてeFormスニペットをコールするリソースを作成して完成です。

5. 問い合わせページのリソースにおけるeFormスニペットの使用例

問い合わせページのリソースに、eFormスニペットを呼び出し、上記4つのチャンクを読み込ませるコードの例です。

[!eForm? &formid=`feedbackForm` &autosender=`#####@##########.###` &autoSenderName=`######` &automessage=`contactReply` &from=`[+email+]` &fromname=`[+Name+]` &report=`contactReport` &sendAsText=`1` &subject=`お問い合わせありがとうございます` &to=`#####@##########.###` &tpl=`contactForm` &thankyou=`contactThanks` &vericode=`1`!]

feedbackForm：チャンク1で指定したフォームID contactReply：チャンク3 contactReport：チャンク4 contactForm：チャンク1 contactThanks：チャンク2

&以降のパラメータは、下表をご参照ください。上記のパラメータは、下表と参照しやすいようにアルファベット順に並んでいますが、順不同です。

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

変数	解説	必要度
formid	「問い合わせフォーム」チャンクの冒頭で設定したフォームのvalueを指定します。	必須
tpl	問い合わせフォームのチャンクを指定します。	必須
report	自分への自動通知メールのチャンクを指定します。	必須
automessage	お客様への自動返信メールのチャンクを指定します。	任意
autosender	お客様への自動返信メールの送信者メールアドレスを指定します。会社であれば、代表メールアドレス、担当部門メールアドレスなど。【automessageと併用】	任意
autoSenderName	お客様への自動返信メールの差出人名を指定します。【automessageと併用】	任意
from	自分への自動通知メールの送信者メールアドレスを指定します。【reportと併用】	任意
fromname	自分への自動通知メールの差出人名を指定する変数です。【report,automessageと併用】	任意
sendAsText	メール形式をテキスト形式に指定します。この変数を外すと、HTML形式になります。	任意
subject	「お客様への自動返信メール」と「自分への自動通知メール」の件名を指定します。【report,automessageと併用】 ※MODx Evolution 1.0.5Jr3以前では件名に「ー（音引き）」を指定すると文字化けします。	任意
report	自分への自動通知メールのチャンクを指定します。【reportと併用】	任意
thankyou	フォーム送信後のお礼画面のチャンクを指定します。	任意
vericode	認証コードの表示を指定します。	任意