chore: finalize the subscription form and go live with it

docs/static/subscribe.js

@@ -1,38 +1,47 @@
 document.addEventListener(
   "DOMContentLoaded",
   function subscribeButtonHandler() {
-    document.getElementById("subscription-form-b8eb1947").reset();
-
-    const subscribeButton = document.getElementById(
-      "subscribe-button-ea4577c9"
+    var subscriptionForm = document.getElementById(
+      "subscription-form-b8eb1947"
     );
-    const subscribeForm = document.getElementById("subscribe-form-9b27c56e");
+
+    var subscribeButton = document.getElementById("subscribe-button-ea4577c9");
+    var subscribeForm = document.getElementById("subscribe-form-9b27c56e");
+    var submitInfo = document.getElementById("subscribe-submit-info-345a25b9");
+
+    subscriptionForm.reset();
 
     subscribeButton.addEventListener("click", function subscribeButtonClick() {
       subscribeForm.classList.toggle("hidden");
-      document.getElementById("subscribe-submit-info-345a25b9").classList.add("hidden");
     });
 
-    document
-      .getElementById("subscription-form-b8eb1947")
-      .addEventListener("submit", function subscribeButtonSubmit(event) {
+    subscriptionForm.addEventListener(
+      "submit",
+      function subscribeButtonSubmit(event) {
         event.preventDefault();
-        const firstName = document.getElementById("name").value;
-        const email = document.getElementById("email").value;
+
+        var firstName = document.getElementById("name").value;
+        var email = document.getElementById("email").value;
 
         console.debug({
           firstName,
           email,
         });
 
+        if (hcaptcha.getResponse().length == 0) {
+          submitInfo.innerHTML = "Please complete the captcha!";
+          submitInfo.classList.remove("hidden");
+          submitInfo.classList.add("md-banner--warning");
+          return;
+        }
+
         event.target.submit();
 
-        var submitInfo = document.getElementById("subscribe-submit-info-345a25b9");
         submitInfo.innerHTML = "Thank you for subscribing!";
         submitInfo.classList.remove("hidden");
 
         event.target.reset();
-        // subscribeForm.classList.add("hidden");
-      });
+      }
+    );
   }
 );

overrides/main.html

@@ -4,8 +4,8 @@
   {{ super() }}
   {% include "partials/pirsch.html" ignore missing %}
   {% include "partials/logrocket.html" ignore missing %}
+  {% include "partials/subscription-header.html" ignore missing %}
   {% include "blog-refactor-compatibility.html" ignore missing %}
-  <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 {% endblock %}
 
 {% block announce %}{% include "partials/announce.html" ignore missing %}{% endblock %}

overrides/partials/content.html

@@ -14,48 +14,7 @@
   <h1>{{ page.title | d(config.site_name, true)}}</h1>
 {% endif %}
 
-<div id="sbuscribe-container-82087868">
-  <button id="subscribe-button-ea4577c9">
-    <i class="icon-paper-plane-abdcf51b"></i>
-  </button>
-  <div id="subscribe-form-9b27c56e" class="hidden">
-    <h3>Subscribe to Newsletter</h3>
-    <div class="hidden" id="subscribe-submit-info-345a25b9"></div>
-    <form
-      id="subscription-form-b8eb1947"
-      method="post"
-      action="https://newsletter.developer-friendly.blog/subscription/form"
-    >
-      <input type="hidden" name="nonce" />
-      <input
-        type="text"
-        id="name"
-        name="name"
-        placeholder="First Name"
-        required
-      />
-      <input
-        type="email"
-        id="email"
-        name="email"
-        placeholder="Email Address"
-        required
-      />
-      <input
-        id="ea947"
-        type="hidden"
-        name="l"
-        checked
-        value="ea947371-ce6e-46e5-ade0-736c1a72d55e"
-      />
-      <div
-        class="h-captcha"
-        data-sitekey="0de6fb2e-eb24-454a-8dfe-4f6c9670ab7e"
-      ></div>
-      <button class="md-button md-button--primary" type="submit">Submit</button>
-    </form>
-  </div>
-</div>
+{% include "partials/subscription-form.html" ignore missing %}
 
 <!-- Page content -->
 {{ page.content }}

overrides/partials/subscription-form.html

@@ -0,0 +1,47 @@
+<div id="sbuscribe-container-82087868">
+  <button id="subscribe-button-ea4577c9">
+    <i class="icon-paper-plane-abdcf51b"></i>
+  </button>
+  <div id="subscribe-form-9b27c56e" class="hidden">
+    <h3>Subscribe to Newsletter</h3>
+    <div class="hidden" id="subscribe-submit-info-345a25b9"></div>
+    <form
+      id="subscription-form-b8eb1947"
+      method="post"
+      action="https://newsletter.developer-friendly.blog/subscription/form"
+    >
+      <input type="hidden" name="nonce" />
+      <input
+        type="text"
+        id="name"
+        name="name"
+        placeholder="First Name"
+        required
+      />
+      <input
+        type="email"
+        id="email"
+        name="email"
+        placeholder="Email Address"
+        required
+      />
+      <input
+        id="ea947"
+        type="hidden"
+        name="l"
+        checked
+        value="ea947371-ce6e-46e5-ade0-736c1a72d55e"
+      />
+      <div
+        id="h-captcha-0de6fb2e-eb24-454a-8dfe-4f6c9670ab7e"
+        class="h-captcha"
+        data-sitekey="0de6fb2e-eb24-454a-8dfe-4f6c9670ab7e"
+      ></div>
+      <input
+        class="md-button md-button--primary"
+        type="submit"
+        value="Submit"
+      />
+    </form>
+  </div>
+</div>

overrides/partials/subscription-header.html

@@ -0,0 +1 @@
+<script src="https://js.hcaptcha.com/1/api.js" async defer></script>