Refine mailchimp form.

chapter-three · Nov 3, 2024 · be991d5 · be991d5
1 parent 45d9d09
commit be991d5
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
     />
     <link rel="stylesheet" href="styles.css" />
     <script src="https://code.jquery.com/jquery-3.6.0.js" crossorigin /></script>
+    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js" crossorigin /></script>
   </head>
   <body>
     <div class="full-screen-section">
@@ -94,17 +95,25 @@ <h2>
             </p>
           </div>
           <div class="col-6">
-            <form class="subscriber-form light-color" action="https://mc.us10.list-manage.com/subscribe/landing-page?u=71fb2ba9bb9b97f142b67ada0&amp;id=cb25afddd4&amp;f_id=00c69fe2f0" accept-charset="UTF-8" method="post" enctype="multipart/form-data">
-              <div class="form-element">
-                <input type="text" name="FNAME" placeholder="Name" required />
-              </div>
-              <div class="form-element">
-                <input type="text" name="EMAIL" placeholder="Email" required />
-              </div>
-              <div class="form-element right">
-                <input type="submit" class="button" value="Submit" />
+            <form class="subscriber-form light-color" action="https://nextcms.us10.list-manage.com/subscribe/post?u=71fb2ba9bb9b97f142b67ada0&amp;id=cb25afddd4&amp;f_id=00ca9fe2f0" accept-charset="UTF-8" method="post" enctype="multipart/form-data" id="mc-embedded-subscribe-form">
+              <div id="mce-responses" class="clear foot">
+                <div class="response" id="mce-error-response">
+
+                  <div class="form-element">
+                    <input type="text" name="FNAME" placeholder="Name" required />
+                  </div>
+                  <div class="form-element">
+                    <input type="text" name="EMAIL" placeholder="Email" required />
+                  </div>
+                  <div class="form-element right">
+                    <button type="submit" class="button">
+                       <span class="button__text">Submit</span>
+                    </button>
+                  </div>
+
+                </div>
+                <div class="mailchimp-response" id="mce-success-response" style="display: none;"></div>
               </div>
-              <div class="mailchimp-response"></div>
             </form>
           </div>
         </div>
@@ -198,24 +207,15 @@ <h3 class="three-row-text-large grey-color">
             navBar.removeClass(stickyDiv);
             sectionOne.removeClass(marginDiv);
           }
-          // Mailchimp submit form
-          $('form.subscriber-form').submit(function(e) {
-            e.preventDefault();
-            var form = $(this);
-            var actionUrl = form.attr('action');
-            $.ajax({
-              type: "POST",
-              url: actionUrl,
-              data: form.serialize(),
-              success: function(data) {
-                if (data.msg !== undefined) {
-                  $('form .mailchimp-response').html(data.msg);
-                }
-              }
-            });
-
-          });
+          $('form').on('submit', function(e) {
+            if ($(this).valid()) {
+              $('.button').addClass('button--loading');
+            }
+          })
       });
+
     </script>
+    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+    <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='COMPANY';ftypes[6]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -488,6 +488,10 @@ img.star:hover {
   margin-top: 35px;
 }
 
+.subscriber-form label.error {
+  font-size: 10px;
+}
+
 .subscriber-form input {
   font-family: 'DM Mono', serif;
   font-weight: 300;
@@ -525,7 +529,8 @@ input:-webkit-autofill:focus {
   border-bottom: 1px solid #ff6d38;
 }
 
-.subscriber-form input[type='submit'] {
+.subscriber-form button[type='submit'] {
+  position: relative;
   cursor: url('images/cursor-link.png') 16 16, auto;
   -webkit-border-radius: 80px;
   -moz-border-radius: 80px;
@@ -540,6 +545,40 @@ input:-webkit-autofill:focus {
   padding-right: 25px;
 }
 
+.button__text {
+  color: #252525;
+  transition: all 0.2s;
+}
+
+.button--loading .button__text {
+  color: #d5e1e1;
+}
+
+.button--loading::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 4px solid transparent;
+  border-top-color: #252525;
+  border-radius: 50%;
+  animation: button-loading-spinner 1s ease infinite;
+}
+
+@keyframes button-loading-spinner {
+  from {
+    transform: rotate(0turn);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
 
 .scroll-section.nav-section.sticky {
   position: fixed;