スニペット"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テンプレート

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