Replace CM signup with stripe.com endpoint (#5)

stripe · Jun 20, 2019 · 2c6729b · 2c6729b
1 parent 8f07807
commit 2c6729b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -483,6 +483,18 @@ a.button:hover {
   transform: translateY(-1px);
 }
 
+.collect-email-error {
+  display: none;
+  font-size: 16px;
+  line-height: 22px;
+  color: #32325d;
+  margin: 20px auto;
+}
+
+.collect-email-error.visible {
+  display: block;
+}
+
 .signup-success {
   display: flex;
   justify-content: center;

diff --git a/index.html b/index.html
@@ -168,13 +168,16 @@ <h2 id="subscribe">Developer digest</h2>
             <section class="newsletter">
                 <div class="sign-up">
                     <p>We’ll send you updates about Stripe's API and developer platform:</p>
-                    <form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="92D4C54F0FEC16E5ADC2B1904DE9ED1AA537E78261C7C48822C3A87F8D7A34BE7920FE3F2CF4E4AD00E102A557A59454D647D4CEFD33138256ADB6BB11AF1504">
+                    <form id="subForm" class="js-cm-form" action="https://stripe.com/developer-digest/subscribe" method="post">
                         <div class="collect-email">
-                            <input id="fieldEmail" placeholder="Email" name="cm-zuliju-zuliju" type="email" class="js-cm-email-input"
+                            <input id="fieldEmail" placeholder="Email" name="email" type="email" class="js-cm-email-input"
                             required />
                             <button class="js-cm-submit-button" type="submit">Get updates</button>
                         </div>
-                        </form>
+                        <div class="js-email-error collect-email-error">
+                            You might have had an internet hiccup. Try again?
+                        </div>
+                    </form>
                 </div>
                 <div class="archive">
                     <ul>
@@ -211,7 +214,29 @@ <h2 id="subscribe">Developer digest</h2>
 
         gtag('config', 'UA-12675062-6');
     </script>
-    <script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>
+    <script>
+        (() => {
+            const form = document.getElementById('subForm');
+            const errorContainer = document.querySelector('.js-email-error');
+            form.addEventListener("submit", (e) => {
+                e.preventDefault();
+                errorContainer.classList
+                        .remove('visible');
+                let request = new XMLHttpRequest;
+                request.open(form.method, form.action, !0);
+                request.onreadystatechange = () => {
+                    if (request.readyState === 4 && request.status === 204) {
+                        window.location = "/signup-success.html";
+                    }
+                }
+                request.onerror = () => {
+                    errorContainer.classList
+                        .add('visible');
+                }
+                request.send(new FormData(form));
+            });
+        })();
+    </script>
 </body>
 
 </html>