底部模板添加newsletter表单和相应JS

application/views/mobile_first/ah.php

@@ -326,6 +326,25 @@
           alt="TrustPilot Logo" width="73px">
       </div>
     </div>
+    <div class="newsletter_form">
+      <div class="list_content">
+        <h2 style="padding-top: 0; text-align: center;">Sign up to Our Newsletter</h2>
+        <p style="text-align: center;">Be the first to receive exciting updates, exclusive promotions, and valuable travel tips from our
+            team of experts. </p>
+        <form action="https://www.asiahighlights.com/orders/newsletter_save" method="post" id="newsletter_form" name="newsletter_form" novalidate="">
+          <label id="name_area">
+            <input type="text" name="name" id="newsletter_realname" class="contact_name" placeholder="* Your name">
+            <div style="color: #a31022;display: none" class="requiredArea" id="newsletter_realname_errmsg">Please fill up your name.</div>
+          </label>
+          <label id="email_area">
+            <input type="email" class="safyemail autoemail ui-autocomplete-input contact_email" name="email" id="newsletter_email" autocomplete="off" placeholder="* Email">
+            <div style="color: #a31022;display: none" class="requiredArea" id="newsletter_email_errmsg">Please fill up your email address.</div>
+            <div style="color: #a31022;display: none" class="requiredArea" id="newsletter_email_verify_errmsg">Please verify your email.</div>
+          </label>
+          <button id="submit_newsletter" type="button" class="sendInquiry">Inspire Me</button>
+        </form>
+      </div>
+    </div>
     <div class="bottom_why_us">
       <h2>The Asia Highlights Experience</h2>
 
@@ -522,6 +541,67 @@
         }, 10000);
       }
     </script>
+
+    <!--newsletter表单 JS-->
+<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  var submitbutton = document.getElementById("submit_newsletter");
+  var newsletterForm = document.getElementById("newsletter_form");
+
+  submitbutton.addEventListener('click', function(event) {
+    var validateResult = validateNewsletterForm();
+    if (validateResult) {
+      if (typeof(grecaptcha) === "undefined") {
+        console.warn('grecaptcha is disabled.');
+        newsletterForm.submit();
+      } else {
+        grecaptcha.enterprise.ready(async () => {
+          const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
+          var el = document.createElement("input");
+          el.type = "hidden";
+          el.name = "__grecaptcha_token__";
+          el.value = token;
+          newsletterForm.appendChild(el);
+          newsletterForm.submit();
+          submitbutton.innerText = "Submitted successfully";
+        });
+      }
+    }
+  });
+});
+
+function validateNewsletterForm() {
+  var result = true;
+  var realnameVal = document.getElementById("newsletter_realname").value;
+  var emailVal = document.getElementById("newsletter_email").value;
+
+  var realnameErrEl = document.getElementById("newsletter_realname_errmsg");
+  var emailErrEl = document.getElementById("newsletter_email_errmsg");
+  var emailVerifyErrEl = document.getElementById("newsletter_email_verify_errmsg");
+
+  realnameErrEl.style.display = 'none';
+  emailErrEl.style.display = 'none';
+  emailVerifyErrEl.style.display = 'none';
+
+  if (realnameVal === '') {
+    realnameErrEl.style.display = '';
+    result = false;
+  }
+  if (emailVal === '') {
+    emailErrEl.style.display = '';
+    result = false;
+  } else {
+    var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
+    if (!emailPattern.test(emailVal)) {
+      emailVerifyErrEl.style.display = '';
+      result = false;
+    }
+  }
+  return result;
+}
+</script>
+
   </footer>
   <!--移动底部 结束-->