LearningSalesForceCommerceC.../int_recaptcha/cartridge/templates/default/contactUs/contactUs.isml

115 lines
6.8 KiB
Plaintext

<isdecorate template="common/layout/page">
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addJs('/js/contactUs.js');
assets.addCss('/css/contactUs.css');
// Loads recaptcha API
assets.addJs(pdict.recaptchaUrl);
</isscript>
<div class="hero slant-down contact-us-banner">
<h1 class="page-title">${Resource.msg('title.contact.us.page', 'contactUs', null)}</h1>
</div>
<div class="container contact-us-landing-page">
<div class="row justify-content-center">
<div class="col-sm-8 col-md-6">
<div class="card">
<div class="card-body">
<form action="${pdict.actionUrl}" class="contact-us" method="POST" name="contact-us">
<iscomment> Add recaptcha container </iscomment>
<div class="g-recaptcha" data-sitekey="${pdict.siteKey}"></div>
<!--- contact us first name, last name --->
<div class="row contact-us-name">
<div class="col-sm-6">
<div class="form-group required">
<label class="form-control-label" for="contact-first-name">
${Resource.msg('label.input.contact-us-first-name', 'contactUs', null)}
</label>
<input type="text" required class="form-control required" aria-describedby="form-contact-first-name-error" id="contact-first-name" name="contactFirstName">
<div class="invalid-feedback" id="form-contact-first-name-error"></div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required">
<label class="form-control-label" for="contact-last-name">
${Resource.msg('label.input.contact-us-last-name', 'contactUs', null)}
</label>
<input type="text" required class="form-control required" aria-describedby="form-contact-last-name-error" id="contact-last-name" name="contactLastName">
<div class="invalid-feedback" id="form-contact-last-name-error"></div>
</div>
</div>
</div>
<!--- contact us email --->
<div class="row contact-us-email">
<div class="col">
<div class="form-group required">
<label class="form-control-label" for="contact-email">
${Resource.msg('label.input.contact-us-email', 'contactUs', null)}
</label>
<input type="email" required class="form-control required" aria-describedby="form-contact-email-error" id="contact-email" name="contactEmail">
<div class="invalid-feedback" id="form-contact-email-error"></div>
</div>
</div>
</div>
<!--- contact us topic --->
<div class="row contact-us-topic">
<div class="col">
<div class="form-group">
<label class="form-control-label" for="contact-topic">
${Resource.msg('label.input.contact-us-topic', 'contactUs', null)}
</label>
<select type="text" required class="form-control required" id="contact-topic" name="contactTopic">
<option value="GI">
${Resource.msg('label.input.contact-topic-general-information', 'contactUs', null)}
</option>
<option value="OS">
${Resource.msg('label.input.contact-topic-order-status', 'contactUs', null)}
</option>
<option value="MA">
${Resource.msg('label.input.contact-topic-my-account', 'contactUs', null)}
</option>
<option value="O">
${Resource.msg('label.input.contact-topic-other', 'contactUs', null)}
</option>
</select>
</div>
</div>
</div>
<!--- contact us comment --->
<div class="row contact-us-comment">
<div class="col">
<div class="form-group">
<label class="form-control-label" for="contact-comment">
${Resource.msg('label.input.contact-us-comment', 'contactUs', null)}
</label>
<textarea class="form-control" id="contact-comment" name="contactComment" rows="4" maxlength="250"></textarea>
</div>
</div>
</div>
<!--- contact us submit --->
<div class="row contact-us-submnit">
<div class="col-sm-6">
</div>
<div class="col">
<div class="form-group">
<button class="btn btn-block btn-primary subscribe-contact-us" type="submit" name="submit" value="submit">
${Resource.msg('label.input.contact-us-submit', 'contactUs', null)}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</isdecorate>