スニペット"FormLister"：メール送信フォームの実装
メール送信のフォームを実装するには、次のようなコードで実装できます。
- ※ あくまで実装例であり、使用するパラメーターや設定値などは参考程度のものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | [!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テンプレート |
プレースホルダーについては次のページをご覧ください。
フォームやメールで使用するプレースホルダー