<!-- // Raw/example -->
<form method="POST">
<!-- FUNNEL ERROR PLACEHOLDER -->
<input type="hidden" name="funnel_action" value="optpay">

<goth:if var="INPUT.section_options">
	<div style="font-size:150%; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">Options</div>
	<div>
		<goth:for each="o" invar="Options">
		<input type="#{INPUT.options_kind}" name="choose" value="#{o.value}">#{o.title}<br>
		</goth:for>
	</div>
</goth:if>

<goth:if var="INPUT.section_userinfo">
	<div style="font-size:150%; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">User information</div>
	<div>
		<goth:for each="f" invar="UserFields">
		<div style="margin-bottom: 5px;">
			<span style="display: table-cell; width: 130px;">#{f.title}</span>
			<span style="display: table-cell;">#{f.control}</span>
		</div>
		</goth:for>
	</div>
</goth:if>

<goth:if var="INPUT.section_shipping">
	<div style="font-size:150%; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">Shipping</div>
	<div style="margin-bottom: 5px">
		<span style="display: table-cell; width: 130px">Shipping address</span>
		<span style="display: table-cell">
			<script src="#{SYS.URI}/suppl/shipping_copy_addr.js"></script>
			<input type="button" value="same as Billing address" onClick="ShippingCopyAddr()">
		</span>
	</div>
	<goth:for each="f" invar="ShippingFields">
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">#{f.title}</span>
		<span style="display: table-cell;">#{f.control}</span>
	</div>
	</goth:for>
	<div style="margin-bottom: 5px">
		<span style="display: table-cell; width: 130px">Select method</span>
		<span style="display: table-cell"><goth:do expr="'#'.'{SHIPPING}'" output></span>
	</div>
</goth:if>

<goth:if var="INPUT.section_creditcard">
	<div style="font-size:150%; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">Payment section</div>
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">Card type</span>
		<span style="display: table-cell;">
			<select name="cardtype">
				<option value="Visa"> Visa</option>
				<option value="MasterCard"> MasterCard</option>
				<option value="Discover"> Discover</option>
				<option value="Amex"> Amex</option>
				<option value="Maestro"> Maestro</option>
				<option value="Solo"> Solo</option>
			</select>
		</span>
	</div>
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">Card number</span>
		<span style="display: table-cell;">
			<input name="cardnumber" size="30" type="text">
		</span>
	</div>
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">Card expires</span>
		<span style="display: table-cell;">
			<select name="cardexpmonth">
				<option value="1"> Jan</option>
				<option value="2"> Feb</option>
				<option value="3"> Mar</option>
				<option value="4"> Apr</option>
				<option value="5"> May</option>
				<option value="6"> Jun</option>
				<option value="7"> Jul</option>
				<option value="8"> Aug</option>
				<option value="9"> Sep</option>
				<option value="10"> Oct</option>
				<option value="11"> Nov</option>
				<option value="12"> Dec</option>
			</select>
			/
			<select name="cardexpyear">
				<goth:for each="y" invar="CCYears">
				<option value="#{y}"> #{y}</option>
				</goth:for>
			</select>
		</span>
	</div>
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">Verification code</span>
		<span style="display: table-cell;">
			<input name="cardcvc" size="5" type="text">
		</span>
	</div>
	<goth:if var="INPUT.creditcard_discount">
	<div style="margin-bottom: 5px;">
		<span style="display: table-cell; width: 130px;">Discount code</span>
		<span style="display: table-cell;">
			<input name="discount" size="15" type="text">
		</span>
	</div>
	</goth:if>
</goth:if>

<div style="margin-top: 20px;">
	#{SubmitButton}
</div>

</form>