feat(storefront): STRF-10214 Add manual captcha field to contact-us f…

…orm (bigcommerce#2290)

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Draft
 - Set "Show quick payment buttons" setting to true by default [#2283]https://github.com/bigcommerce/cornerstone/pull/2283
 - Fixed en-CA translation warning in terminal. [#2278][https://github.com/bigcommerce/cornerstone/pull/2278]
+- Added manual captcha to Contact Us form for additional spam protection. [#2290](https://github.com/bigcommerce/cornerstone/pull/2290)
 
 ## 6.7.0 (11-03-2022)
 - Fixed escaping on created store account confirm message. [#2265]https://github.com/bigcommerce/cornerstone/pull/2265

assets/scss/components/_components.scss

@@ -182,3 +182,6 @@
 
 // Categories
 @import "stencil/category/component";
+
+// Contact-Us Form
+@import "stencil/contact/component";

assets/scss/components/stencil/contact/_captcha.scss

@@ -0,0 +1,21 @@
+// =============================================================================
+// CONTACT PAGE (CSS)
+// =============================================================================
+
+
+// Manual captcha form styling
+// -----------------------------------------------------------------------------
+
+.manual-captcha-input-container {
+    align-items: center;
+    display: flex;
+
+    .question {
+        font-size: 1.25rem;
+        margin-right: 1rem;
+    }
+
+    .form-input {
+        flex: 1;
+    }
+}

assets/scss/components/stencil/contact/_component.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// CONTACT PAGE
+// =============================================================================
+
+
+// Component
+@import "./captcha";

lang/en.json

@@ -541,7 +541,8 @@
             "rma": "RMA Number",
             "question": "Comments/Questions",
             "submit": "Submit Form",
-            "successful": "We've received your feedback and will respond shortly if required. <a href=\"{shopPath}\">Continue</a>."
+            "successful": "We've received your feedback and will respond shortly if required. <a href=\"{shopPath}\">Continue</a>.",
+            "manual_captcha_instruction": "Please answer the question below for additional verification."
         },
         "create_account": {
             "submit_value": "Create Account"

templates/components/page/contact-us-form.html

@@ -55,9 +55,19 @@
         </label>
         <textarea name="contact_question" id="contact_question" rows="5" cols="50" class="form-input"></textarea>
     </div>
-
+    {{#if forms.contact.manualcaptcha}}
+        <div class="form-field">
+            <label class="form-label" for="{{forms.contact.manualcaptcha.name}}">
+                {{lang 'forms.contact_us.manual_captcha_instruction'}}
+                <small>{{lang 'common.required' }}</small>
+            </label>
+            <div class="manual-captcha-input-container">
+                <span class="question">{{forms.contact.manualcaptcha.question}}</span>
+                <input class="form-input" type="text" id="{{forms.contact.manualcaptcha.name}}" name="{{forms.contact.manualcaptcha.name}}" value="" aria-disabled="true" autocomplete="off" required>
+            </div>
+        </div>
+    {{/if}}
     {{{forms.contact.recaptcha.markup}}}
-
     <div class="form-actions">
         <input class="button button--primary" type="submit" value="{{lang 'forms.contact_us.submit' }}">
     </div>