スニペット"FormLister"：メール送信フォームの実装

メール送信のフォームを実装するには、次のようなコードで実装できます。

※ あくまで実装例であり、使用するパラメーターや設定値などは参考程度のものです。

[!FormLister?
									&controller=`Form`
									&formid=`form`
									&rules=`{
									"name" : {
										"required" : "お名前を入力してください。"
									},
									"email" : {
										"required" : "メールアドレスを入力してください。",
										"email" : "メールアドレスアドレスの形式で入力してください。"
									},
									"know" : {
										"countBetween" : {
											"params" : [1, 2],
											"message" : "1～2つの範囲で選択してください。"
										}
									},
									"contents" : {
										"minLength" : {
											"params" : 10,
											"message" : "10文字以上で入力してください。"
										}
									}
								}`
									&formControls=`sex,know`
									&formTpl=`@CODE:
								<form method="post">
									<input type="hidden" name="formid" value="form">

<dl>
										<dt><label for="name">お名前</label></dt>
										<dd class="[+name.errorClass+][+name.requiredClass+]">
											<input name="name" value="[+name.value+]" id="name">
											[+name.error+]
										</dd>
										<dt>性別</dt>
										<dd class="[+sex.errorClass+][+sex.requiredClass+]">
											<input type="radio" name="sex" value="男性" id="sex-male" [+c.sex.男性+]><label for="sex-male">男性</label>
											<input type="radio" name="sex" value="女性" id="sex-woman" [+c.sex.女性+]><label for="sex-woman">女性</label>
											[+sex.error+]
										</dd>
										<dt><label for="email">メールアドレス</label></dt>
										<dd class="[+email.errorClass+][+email.requiredClass+]">
											<input name="email" value="[+email.value+]" id="email">
											[+email.error+]
										</dd>
										<dt>当Webサイトを知ったきっかけ</dt>
										<dd class="[+know.errorClass+][+know.requiredClass+]">
											<input type="checkbox" name="know[]" value="チラシ" id="know-flyer" [+c.know.チラシ+]><label for="know-flyer">チラシ</label>
											<input type="checkbox" name="know[]" value="検索エンジン" id="know-search" [+c.know.検索エンジン+]><label for="know-search">検索エンジン</label>
											<input type="checkbox" name="know[]" value="その他" id="know-other" [+c.know.その他+]><label for="know-other">その他</label>
											[+know.error+]
										</dd>
										<dt><label for="contents">お問い合わせ内容</label></dt>
										<dd class="[+contents.errorClass+][+contents.requiredClass+]">
											<textarea name="contents" id="contents">[+contents+]</textarea>
											[+contents.error+]
										</dd>
									</dl>

[+form.messages+]

<button>送信</button>
								</form>`
									&errorTpl=`@CODE:<p class="error-message">[+message+]</p>`
									&requiredClass=` required`
									&errorClass=` error`
									&messagesOuterTpl=`@CODE:<p class="error-messages">[+messages+]</p>`
									&isHtml=`0`
									&to=`info@example.co.jp`
									&from=`noreply@example.co.jp`
									&fromName=`管理者`
									&subjectTpl=`@CODE:[+name.value+]様からお問い合わせがありました：[(site_name)]`
									&reportTpl=`@CODE:次の通りお問い合わせがありました。

------------------------------
								お名前：[+name.value+]
								性別：[+sex.value+]
								メールアドレス：[+email.value+]
								当Webサイトを知ったきっかけ：[+know.value+]
								お問い合わせ内容：[+contents:strip_tags+]
								------------------------------`
									&ccSender=`1`
									&ccSenderFromName=`管理者`
									&ccSubjectTpl=`@CODE:お問い合わせありがとうございます：[(site_name)]`
									&ccSenderTpl=`@CODE:[+name.value+]様、お問い合わせありがとうございます。

※ 本メールは[(site_name)]から自動的に送信されたものです。`
									&successTpl=`@CODE:<div class="complete">送信が完了しました。</div>`
								!]

サンプルコード上で使用されているパラメーターについては次の通りです。

パラメーター	説明
&controller	Formを指定することでメールを送信するためのフォームとして機能します。参考ページ：実装するフォームの種類を選択
&formid	参考ページ：フォームの識別子
&rules	参考ページ：フィールドの検証（チェック）内容を設定
&formControls	参考ページ：制御するフィールドの指定
&formTpl	参考ページ：入力フォームのHTMLテンプレート
&errorTpl	参考ページ：フィールドの表示するエラーメッセージのHTMLテンプレート
&requiredClass	参考ページ：フィールドの必須エラー時のクラス名
&errorClass	参考ページ：フィールドのエラー時のクラス名
&messagesOuterTpl	参考ページ：フォーム全体の表示するエラーメッセージのHTMLテンプレート
&isHtml	参考ページ：管理者宛通知メールのHTML形式の有無
&to	参考ページ：管理者宛通知メールの宛先を設定
&from	参考ページ：管理者宛通知メール／自動返信メールの送信元を設定
&fromName	参考ページ：管理者宛通知メールの送信元の名前を設定
&subjectTpl	参考ページ：管理者宛通知メールの件名を設定
&reportTpl	参考ページ：管理者宛通知メールの本文を設定
&ccSender	参考ページ：自動返信メールを送信するかどうか
&ccSenderFromName	参考ページ：自動返信メールの送信元の名前を設定
&ccSubjectTpl	参考ページ：自動返信メールの件名を設定
&ccSenderTpl	参考ページ：自動返信メールの本文を設定
&successTpl	参考ページ：フォーム送信完了後に表示するHTMLテンプレート

プレースホルダーについては次のページをご覧ください。
フォームやメールで使用するプレースホルダー

CMS「Evolution CMS」逆引きリファレンス一覧へ戻る