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 認証コードの表示を指定します。 任意

コメントを投稿

0 コメント