logo
 

eFormスニペットで問い合わせフォームを作るには

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

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

eFormスニペットを使った問い合わせフォーム作成フロー

このサイトの問い合わせフォームも、MODxのeFormスニペットを使用しています。このサイトの問い合わせフォームのコードをそのまま掲載します。このコードをコピーして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":必須項目の設定です。[項目名]は、入力洩れの警告文の中で「入力洩れのあった項目」を示すのに使われます。

続けて、「問い合わせ送信後のお礼画面」チャンク、「お客様への自動返信メール」チャンク、「自分への自動通知メール」チャンクを作成しましょう。

MODXとは

新着情報

 
RSS