Add mail chimp newsletter form

Awoyalejohn · Aug 28, 2022 · 54b6b95 · 54b6b95
1 parent b2f9d94
commit 54b6b95
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 12 deletions.
diff --git a/static/css/base.css b/static/css/base.css
@@ -182,6 +182,16 @@ footer {
   z-index: 99999;
 }
 
+/*==========================*\
+ *Mailchimp*
+\*==========================*/
+
+#mc_embed_signup {
+  background:#fff; 
+  clear:left; 
+  font:14px Helvetica,Arial,sans-serif;  
+  width:600px;
+}
 
 
 

diff --git a/templates/base.html b/templates/base.html
@@ -19,6 +19,8 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">
+  <!-- Mailchimp CSS-->
+  <link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
   <!--Main Stylesheet-->
   <link rel="stylesheet" href="{% static 'css/base.css' %}">
   {% block extra_css %}
@@ -145,10 +147,10 @@ <h4 class="logo-font my-1">{{discount_percentage}}% DISCOUNT ON ALL ORDERS OVER
   <!--footer-->
 <footer class="w-100 pt-4 flex-shrink-0">
   <div class="container py-4">
-      <div class="row gy-3 gx-4">
+      <div class="row gy-3 gx-4 text-white">
           <div class="col-lg-4 col-md-6">
               <h5 class="text-white">Social</h5>
-              <p class="small text-muted">Check out our facebook page, so you can be up to date with our latest offers!</p>
+              <p class="small">Check out our facebook page, so you can be up to date with our latest offers!</p>
               <a href="https://www.facebook.com/Graphics-Design-Space-106109438898899" rel="noopener" target="_blank"><i
                 class="fab fa-facebook-square"></i> Follow us on Facebook!</a>
           </div>
@@ -174,16 +176,37 @@ <h5 class="text-white mb-3">Quick links</h5>
                 {% endif %}
               </ul>
           </div>
-          <div class="col-lg-4 col-md-6">
-              <h5 class="text-white mb-3">Newsletter</h5>
-              <p class="small text-muted">Get exclusive offers and discount codes by subscribing to our monthly newsletter!</p>
-              <form action="#">
-                  <div class="input-group mb-3">
-                      <input class="form-control" type="text" placeholder="Recipient's Email" aria-label="Recipient's Email" aria-describedby="button-addon2">
-                      <button class="btn btn-primary" id="button-addon2" type="button"><i class="fas fa-paper-plane"></i></button>
-                  </div>
-              </form>
-          </div>
+
+              <!-- Begin Mailchimp Signup Form -->
+
+<div id="mc_embed_signup" class="col-lg-4 col-md-6 text-white m-0">
+    <form action="https://herokuapp.us12.list-manage.com/subscribe/post?u=205ba5d986c25b7c5a12b108f&amp;id=c16b13cddf&amp;f_id=00b2b4e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+        <div id="mc_embed_signup_scroll">
+        <h2 class="mt-0">Newsletter</h2>
+        <p class="m-0">Get exclusive offers and discount codes by subscribing to our monthly newsletter!</p>
+        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
+<div class="mc-field-group">
+	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
+</label>
+	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
+</div>
+	<div id="mce-responses" class="clear foot">
+		<div class="response" id="mce-error-response" style="display:none"></div>
+		<div class="response" id="mce-success-response" style="display:none"></div>
+	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_205ba5d986c25b7c5a12b108f_c16b13cddf" tabindex="-1" value=""></div>
+        <div class="optionalParent">
+            <div class="clear foot">
+                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button bg-primary">
+            </div>
+        </div>
+    </div>
+</form>
+</div>
+
+<!--End mc_embed_signup-->
+
+
       </div>
   </div>
   <div class="copyright d-flex justify-content-center pt-3">
@@ -195,6 +218,7 @@ <h5 class="text-white mb-3">Newsletter</h5>
 
 
 {% block postloadjs %}
+<!-- toasts scripts -->
 <script type="text/javascript">
   //Initialize toasts via JavaScript from bootstrap:
   let toastElList = [].slice.call(document.querySelectorAll('.toast'))
@@ -203,6 +227,27 @@ <h5 class="text-white mb-3">Newsletter</h5>
     return new bootstrap.Toast(toastEl)
   });
   toastList.forEach(toast => toast.show()); // Shows toast
+</script>
+<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
+<!-- Mailchimp scripts -->
+<script type='text/javascript'>
+(function ($) { 
+  window.fnames = new Array(); 
+  window.ftypes = new Array(); 
+  fnames[0] = 'EMAIL'; 
+  ftypes[0] = 'email'; 
+  fnames[1] = 'FNAME'; 
+  ftypes[1] = 'text'; 
+  fnames[2] = 'LNAME'; 
+  ftypes[2] = 'text'; 
+  fnames[3] = 'ADDRESS'; 
+  ftypes[3] = 'address'; 
+  fnames[4] = 'PHONE'; 
+  ftypes[4] = 'phone'; 
+  fnames[5] = 'BIRTHDAY'; 
+  ftypes[5] = 'birthday'; 
+}(jQuery)); 
+var $mcj = jQuery.noConflict(true);
 </script>
  {% endblock %}
 </body>