In this contact us extension, we have added one form and some self-service links. When the visitors enter all the required fileds and click submit will create a contact record on NetSuite for that specific customer
Also, we have added google captcha feature to prevent robotic submission, for that we have created an account in google captcha and got the credentials such as the secret key and URL.
Template:
<form action="#" class="contact-us-form" novalidate>
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="topic">
{{translate 'Select a request topic <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<select name="topic" id="topic" class="contact-us-form-input">
<option value="1">Product Information</option>
<option value="2">Order Inquiry</option>
<option value="3">Address Change</option>
<option value="4">Site Problem</option>
<option value="5">Return Request</option>
<option value="6">Prescription Inquiry</option>
<option value="7">Other</option>
</select>
</div>
</div>
<div class="contact-us-form-two-column">
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="firstname">
{{translate 'First Name <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="firstname" id="firstname" class="contact-us-form-input" />
</div>
</div>
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="lastname">
{{translate 'Last Name <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="lastname" id="lastname" class="contact-us-form-input" />
</div>
</div>
</div>
<div class="contact-us-form-two-column">
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="email">
{{translate 'Email Address <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="email" id="email" class="contact-us-form-input" />
</div>
</div>
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="email-confirm">
{{translate 'Re-Enter Email Address <small
class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="email-confirm" id="email-confirm"
class="contact-us-form-input" />
</div>
</div>
<p>We do not sell our email addresses to outside sources. <a class="item_level1"
href="/privacy-policy" data-hashtag="#privacy-policy" data-touchpoint="home">View
our privacy policy here</a>.</p><br />
</div>
{{#if isItem}}
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label">
{{translate 'Product:'}}<br />
<b>{{item.itemName}}</b>
</label>
</div>
{{/if}}
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="subject">
{{translate 'Subject <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="subject" id="subject" class="contact-us-form-input" />
</div>
</div>
<div class="contact-us-form-controls-group" data-validation="control-group">
<label class="contact-us-form-label" for="comment">
{{translate 'Question or Comment <small class="contact-us-form-required">*</small>'}}
</label>
<div class="contact-us-form-controls" data-validation="control">
<textarea name="comment" id="comment" class="contact-us-form-textarea"></textarea>
</div>
</div>
<div class="captcha-container">
<div id="CaptchaContact"></div>
<div><small class="recaptcha-message"></small></div>
</div>
<div class="contact-us-form-controls-group" data-action="show-modal"
data-toggle="show-in-modal">
<button type="submit" class="contact-us-button-submit">{{translate 'Submit'}}</button>
</div>
</form> Configuration
{
"type": "object",
"subtab": {
"id": "googleReCaptcha",
"title": "Google Recaptcha",
"group": "valleyVet"
},
"properties": {
"googleReCaptcha.sitekey": {
"group": "valleyVet",
"type": "string",
"subtab": "googleReCaptcha",
"title": "Site Key",
"default": "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
},
"googleReCaptcha.serverkey": {
"group": "valleyVet",
"type": "string",
"subtab": "googleReCaptcha",
"title": "Server Key",
"default": "6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe"
},
"googleReCaptcha.verifyUrl": {
"group": "valleyVet",
"type": "string",
"subtab": "googleReCaptcha",
"title": "Verify Url",
"default": "https://www.google.com/recaptcha/api/siteverify"
},
"googleReCaptcha.theme": {
"group": "valleyVet",
"type": "string",
"subtab": "googleReCaptcha",
"title": "Theme",
"default": "light"
},
"googleReCaptcha.apiUrl": {
"group": "valleyVet",
"type": "string",
"subtab": "googleReCaptcha",
"title": "API Url",
"default": "https://www.google.com/recaptcha/api.js"
}
}
} Javascript for load the captcha
var loader = {
loadedPromise: jQuery.Deferred(),
initialized: false,
getModuleConfig: function getModuleConfig(environment) {
return environmentGlobal.getConfig('googleReCaptcha');
},
loadCaptcha: function loadCaptcha(environment) {
environmentGlobal = environment;
var url = this.getModuleConfig(environment).apiUrl +
'?onload=_loadCaptcha&render=explicit';
if (SC.ENVIRONMENT.jsEnvironment === 'browser') {
jQuery.ajax({
url: url,
dataType: 'script',
cache: true,
preventDefault: true
});
} else {
this.loadedPromise.rejectWith('Google ReCaptcha is a Browser Script only');
}
this.initialized = true;
return this.loadedPromise;
}
};
window._loadCaptcha = function _loadCaptcha() {
grecaptcha.render('Recaptcha', {
sitekey: loader.getModuleConfig().sitekey,
theme: loader.getModuleConfig().theme
});
};