スニペット"eForm":フォームの実装
スニペット"eForm"を使用してメール送信のフォームを実装するには、次のようなコードで実装できます。
- ※ あくまで実装例であり、使用するパラメーターや設定値などは参考程度のものです。
[!eForm?
&formid=`form1`
&tpl=`@CODE:<form action="[~[*id*]~]" method="post">
<input type="hidden" name="formid" value="form1">
[+validationmessage+]
<dl>
<dt><label for="field-name">お名前</label></dt>
<dd>
<input name="name" value="[+name+]" maxlength="10" id="field-name" eform="お名前:string:1">
</dd>
<dt>性別</dt>
<dd>
<input type="radio" name="sex" value="男性" id="field-sex-male" eform="性別::1"><label for="field-sex-male">男性</label>
<input type="radio" name="sex" value="女性" id="field-sex-woman"><label for="field-sex-woman">女性</label>
</dd>
<dt><label for="field-email">メールアドレス</label></dt>
<dd>
<input name="email" id="field-email" eform="メールアドレス:email:1">
</dd>
<dt>当Webサイトを知ったきっかけ</dt>
<dd>
<input type="checkbox" name="know[]" value="チラシ" id="field-know-flyer" eform="当Webサイトを知ったきっかけ::1"><label for="field-know-flyer">チラシ</label>
<input type="checkbox" name="know[]" value="検索エンジン" id="field-know-search"><label for="field-know-search">検索エンジン</label>
<input type="checkbox" name="know[]" value="SNS (Social Network Service)" id="field-know-sns"><label for="field-know-sns">SNS (Social Network Service)</label>
<input type="checkbox" name="know[]" value="その他" id="field-know-other"><label for="field-know-other">その他</label>
</dd>
<dt><label for="field-type">難易度</label></dt>
<dd>
<select name="type" id="field-type" eform="難易度::1">
<option value="">選択なし</option>
<option value="Easy">Easy</option>
<option value="Normal">Normal</option>
<option value="Hard">Hard</option>
<option value="Very Hard">Very Hard</option>
</select>
</dd>
<dt><label for="field-contents">お問い合わせ内容</label></dt>
<dd>
<textarea name="contents" cols="30" rows="5" id="field-contents" eform="お問い合わせ内容:string:1"></textarea>
</dd>
</dl>
<button>送信</button>
</form>`
&sendAsText=`0`
&to=`info@example.co.jp`
&from=`noreply@example.co.jp`
&fromName=`管理者`
&subject=`お問い合わせ内容のご確認:[(site_name)]`
&report=`@CODE:お問い合わせがありました。
<hr>
<table border="1">
<tbody>
<tr>
<th>受付日時</th>
<td>[+postdate:date(%Y年%m月%d日 %H時%M分%S秒)+]</td>
</tr>
<tr>
<th>お名前</th>
<td>[+name+]</td>
</tr>
<tr>
<th>性別</th>
<td>[+sex+]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[+email+]</td>
</tr>
<tr>
<th>当Webサイトを知ったきっかけ</th>
<td>[+know+]</td>
</tr>
<tr>
<th>OS</th>
<td>[+os+]</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>[+contents+]</td>
</tr>
</tbody>
</table>
<hr>`
&autoSenderName=`Webサイト管理者`
&automessage=`@CODE:<b>[+name+]</b>様、お問い合わせありがとうございます。<br>
<br>
※ 本メールは[(site_name)]から自動的に送信されたものです。`
&thankyou=`@CODE:<div class="complete">送信が完了しました。</div>`
!]
サンプルコード上で使用されているパラメーターについては次の通りです。
パラメーター | 説明 |
---|---|
&formid | 参考ページ:フォームの識別子 |
&tpl | 参考ページ:入力フォームのHTMLテンプレート |
&sendAsText | 参考ページ:管理者宛通知メール/自動返信メールをテキスト形式にするかどうか |
&to | 参考ページ:管理者宛通知メールの宛先メールアドレスを設定 |
&from | 参考ページ:管理者宛通知メールの送信元メールアドレスを設定 |
&fromName | 参考ページ:管理者宛通知メールの送信元の名前を設定 |
&subject | 参考ページ:管理者宛通知メール/自動返信メールの件名を設定 |
&report | 参考ページ:管理者宛通知メールの本文を設定 |
&autoSenderName | 参考ページ:自動返信メールの送信元の名前を設定 |
&automessage | 参考ページ:自動返信メールの本文を設定 |
&thankyou | 参考ページ:フォーム送信完了後に表示するHTMLテンプレート |
- フィールドについて:フォームやメールで使用するフィールド
- プレースホルダーについて:フォームやメールで使用するプレースホルダー
- 検証(エラーチェック)について:フィールドの検証(エラーチェック)する内容を設定