<s:event b:on="construct" b:action="show"/> <s:include b:url="forms.xml"/> <b:window b:open="true" b:resize="all" b:minwidth="770px" b:minheight="300px" b:windowbuttons="none" style="left:10%;top:40px;width:770px;height:35em;"> <b:windowhead> Backbase Forms </b:windowhead> <b:windowbody> <b:panelset b:cols="16em *" > <b:panel class="b-step-overview b-panel" style="color:#999999;"> <b:step-overview b:step="1" b:label="Billing Address"/> <b:step-overview b:step="2" b:label="Shipping Address"/> <b:step-overview b:step="3" b:label="Shipping Method"/> <b:step-overview b:step="4" b:label="Payment"/> <b:step-overview b:exclude-from-summary="true" b:step="5" b:label="Review and Confirm"/> </b:panel> <b:panel class="b-panel" style="overflow: auto;"> <!-- If server validation is needed after a step, the steps can be given by the server. Each valid step will then get a response that consists of the next step. --> <form action="response.xml" b:destination="." method="get" b:behavior="form"> <b:step b:step="1" id="step1"> <div class="stepHeader">Personal Details</div> <div class="label">First Name <div class="form-field"><input type="text" name="firstname" b:required="true" /></div></div> <div class="label">Last Name <div class="form-field"><input type="text" name="lastname" b:required="true" /></div></div> <div class="label">Email Name <div class="form-field"><input type="text" name="email" b:required="true" b:validation="email" /></div></div> <div class="stepHeader">Billing Address</div> <div class="label">Country <div class="form-field"><input type="text" name="country" b:required="true" /></div></div> <div class="label">Address Line 1 <div class="form-field"><input type="text" name="address" b:required="true" /></div></div> <div class="label">Address Line 2 (optional) <div class="form-field"><input type="text" name="address2" /></div></div> <div class="label">City <div class="form-field"><input type="text" name="city" b:required="true" /></div></div> <div class="label">State/Province/Region <div class="form-field"><input type="text" name="state" b:required="true" /></div></div> <div class="label">Postal Code <div class="form-field"><input type="text" name="postal_code" b:required="true" /></div></div> <div class="label">Phone <div class="form-field"><input type="text" name="phone" b:required="true" b:validation="phone" /></div></div> <p> <b:button b:icon="previous" b:action="trigger" b:target="ancestor::b:step[1]" b:event="previous">Back</b:button> <b:button b:icon="next" b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">Next</b:button> </p> </b:step> <b:step b:step="2" id="step2"> <div class="stepHeader">Shipping Address</div> <div class="label"><input id="s2r1" type="radio" name="shipping-address" value="same-as-billing" b:required="true" /><label for="s2r1">Same as the billing address </label></div> <div class="label"><input id="s2r2" type="radio" name="shipping-address" value="different-from-billing" b:required="true"/><label for="s2r2">Different address </label></div> <b:group b:name="shipping" b:followstate="ancestor::b:step//input[@value='different-from-billing']"> <div class="label">Country <div class="form-field"><input type="text" name="shipping_country" b:required="true" /></div></div> <div class="label">Address Line 1 <div class="form-field"><input type="text" name="shipping_address" b:required="true" /></div></div> <div class="label">Address Line 2 (optional) <div class="form-field"><input type="text" name="shipping_address2" /></div></div> <div class="label">City <div class="form-field"><input type="text" name="shipping_city" b:required="true" /></div></div> <div class="label">State/Province/Region <div class="form-field"><input type="text" name="shipping_state" b:required="true" /></div></div> <div class="label">Postal Code <div class="form-field"><input type="text" name="shipping_postal_code" b:required="true" /></div></div> <div class="label">Phone <div class="form-field"><input type="text" name="shipping_phone" b:required="true" b:validation="phone" /></div></div> </b:group> <b:button b:icon="previous" b:action="trigger" b:target="ancestor::b:step[1]" b:event="previous">Back</b:button> <b:button b:icon="next" b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">Next</b:button> </b:step> <b:step b:step="3" id="step3"> <div class="stepHeader">Shipping Method</div> <div class="label"><input type="radio" name="shipping-method" value="standard" b:required="true" id="s3r1"/><label for="s3r1"> Standard shipping (3-5 business days) $5</label></div> <div class="label"><input type="radio" name="shipping-method" value="two-day" b:required="true" id="s3r2" /><label for="s3r2"> Two-day shipping $10</label></div> <div class="label"><input type="radio" name="shipping-method" value="one-day" id="s3r3" /><label for="s3r3"> One-day shipping $20</label></div> <b:button b:icon="previous" b:action="trigger" b:target="ancestor::b:step[1]" b:event="previous">Back</b:button> <b:button b:icon="next" b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">Next</b:button> </b:step> <b:step b:step="4" id="step4"> <div class="stepHeader">Payment</div> <div class="label">Credit Card Type <div class="form-field"><select b:state="selected" name="credit_card" b:required="true"> <option value="">Click here to select a credit card</option> <option value="american_express">American Express</option> <option value="mastercard">Mastercard</option> <option value="visa">Visa</option> </select></div></div><br/> <div class="label">Credit Card Number <div class="form-field"><input type="text" name="credit_card_number" /></div></div><br/> <div class="label">Expiration Month / Year <div class="form-field"><input type="text" name="expiration_month" b:required="true" b:validation="month" style="width: 30px"/> / <input type="text" name="expiration_year" b:required="true" b:validation="year" style="width: 40px"/></div></div><br/> <b:button b:icon="previous" b:action="trigger" b:target="ancestor::b:step[1]" b:event="previous">Back</b:button> <b:button b:icon="next" b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">Next</b:button> </b:step> <b:step b:step="5" class="final-step"> <div class="stepHeader">Review and confirm</div> <p>You can do a final check to make sure all information is correct. You can send this form using the 'send' button at the bottom of this overview.</p> <p id="form_review"></p> <b:button b:icon="previous" b:action="trigger" b:target="ancestor::b:step[1]" b:event="previous">Back</b:button> <b:button b:icon="next" b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">Send</b:button> </b:step> </form> </b:panel> </b:panelset> </b:windowbody> </b:window>