Moving to embed newsletter form

sst · Jul 30, 2023 · 33a7b9a · 33a7b9a
1 parent f771150
commit 33a7b9a
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 143 deletions.
diff --git a/_config.yml b/_config.yml
@@ -67,9 +67,9 @@ permalink: /blog/:title:output_ext
 stats:
   newsletter: "90,000"
   newsletter_short: "90k"
-  discord: "5000"
-  github: "16000"
-  github_short: "16k"
+  discord: "5500"
+  github: "17000"
+  github_short: "17k"
 
 collections:
   chapters:

diff --git a/_includes/email-octopus-form.html b/_includes/email-octopus-form.html
@@ -1,24 +1,3 @@
-<div class="email-octopus-form-wrapper">
-  <p class="email-octopus-success-message"></p>
-  <p class="email-octopus-error-message"></p>
-  <form method="post" action="https://emailoctopus.com/lists/1c11b9a8-1500-11e8-a3c9-06b79b628af2/members/external-add" class="email-octopus-form">
-    <div class="email-octopus-form-row">
-      <input type="email" name="emailAddress" placeholder="[email protected]" class="email-octopus-email-address">
-    </div>
-    <div class="email-octopus-form-row" style="display: none;">
-      <label>First name</label>
-      <input type="text" name="firstName" class="email-octopus-first-name" value="">
-    </div>
-    <div class="email-octopus-form-row" style="display: none;">
-      <label>Last name</label>
-      <input type="text" name="lastName" class="email-octopus-last-name" value="">
-    </div>
-    <div class="email-octopus-form-row-hp" aria-hidden="true">
-      <input type="text" name="hp1c11b9a8-1500-11e8-a3c9-06b79b628af2" tabindex="-1" autocomplete="nope">
-    </div>
-    <div class="email-octopus-form-row-subscribe">
-      <input type="hidden" name="successRedirectUrl" class="email-octopus-success-redirect-url" value="/thanks.html?source={{ include.source }}">
-      <button type="submit">{{ include.button_copy }}</button>
-    </div>
-  </form>
+<div id="emailoctopus-embed-container">
+  <script async src="https://eomail1.com/form/88e8558c-2d80-11ee-bbd9-e94c6ddb8065.js" data-form="88e8558c-2d80-11ee-bbd9-e94c6ddb8065"></script>
 </div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -81,8 +81,6 @@
 </footer>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
-<!-- Newsletter Form JS -->
-<script src="https://emailoctopus.com/bundles/emailoctopuslist/js/formEmbed.js?1519058398"></script>
 <!-- Code Snippet Copy JS -->
 <script src="https://unpkg.com/[email protected]/dist/clipboard.min.js"></script>
 <script>

diff --git a/_includes/head.html b/_includes/head.html
@@ -83,9 +83,6 @@
   <!-- Styles -->
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
 
-  <!-- Newsletter Form Styles -->
-  <link rel="stylesheet" href="https://emailoctopus.com/bundles/emailoctopuslist/css/formEmbed.css?1519058398">
-
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.gstatic.com"> 
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700;900&family=Source+Code+Pro:wght@400;700&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap" rel="stylesheet">

diff --git a/_includes/newsletter-form.html b/_includes/newsletter-form.html
@@ -23,6 +23,6 @@ <h6>SST Guide</h6>
     <span>&amp;</span>
   </div>
 
-  {% include email-octopus-form.html button_copy="Download" source="post-footer" %}
+  {% include email-octopus-form.html %}
 
 </div>
diff --git a/_includes/standalone-newsletter-form.html b/_includes/standalone-newsletter-form.html
@@ -3,7 +3,7 @@
     <p>Join {{ site.stats.newsletter }} other readers and subscribe to our monthly newsletter. We’ll send you the entire SST Guide as a 1000 page ebook for free!</p>
   </div>
   <div class="controls">
-    {% include email-octopus-form.html button_copy="Subscribe" source="newsletter-form" %}
+    {% include email-octopus-form.html %}
   </div>
 </div>
 
diff --git a/_sass/download.scss b/_sass/download.scss
@@ -235,6 +235,33 @@ main > .download-ebook-page {
           line-height: 1.375;
         }
 
+        @include emailoctopus-embed;
+
+        #emailoctopus-embed-container {
+          .emailoctopus-form-wrapper {
+            margin-top: 0 !important;
+          }
+          .emailoctopus-form-row {
+            margin-bottom: 0 !important;
+          }
+          .main-form {
+            flex-grow: 1;
+            gap: $spacing-unit / 2;
+          }
+          input[type="email"] {
+            padding: 10px;
+            width: 100%;
+            font-size: 20px;
+            height: auto;
+          }
+          input[type="submit"] {
+            padding: 0 15px;
+            height: 54px;
+            font-size: 18px;
+          }
+        }
+
+
         form {
           display: flex;
           align-items: stretch;

diff --git a/_sass/lander.scss b/_sass/lander.scss
@@ -1660,7 +1660,7 @@
     }
   }
 
-  .form-container {
+  & > .form-container {
     margin: $spacing-unit auto 0;
     position: relative;
     padding: $spacing-unit;
@@ -1732,75 +1732,35 @@
     }
   }
 
-  .form {
-    flex: 0 auto;
+  @include emailoctopus-embed;
 
-    @include media-query($on-laptop) {
-      flex: 1 1 auto;
-    }
+  #emailoctopus-embed-container {
+    flex: 0 0 auto;
 
-    p.email-octopus-error-message,
-    p.email-octopus-success-message {
-      margin: 0;
+    .emailoctopus-form-wrapper {
+      margin-top: 0 !important;
     }
+    .emailoctopus-form-row {
+      margin-bottom: 0 !important;
+    }
+    .main-form {
+      flex-grow: 1;
+      flex-wrap: nowrap;
+      gap: $spacing-unit / 2;
 
-    form {
-      display: flex;
-      align-items: stretch;
-      justify-content: center;
-
-      @include media-query($on-laptop) {
-        display: block;
-      }
-
-      .email-octopus-form-row {
-        margin: 0;
-        flex: 1 1 auto;
-      }
-
-      input {
-        margin: 0;
-        padding: 11px 18px;
-        width: 240px;
-        font-size: 18px;
-        line-height: 32px;
-        height: auto;
-        @extend %newsletter-input;
-
-        @include media-query($on-palm) {
-          width: 100%;
-          max-width: none;
-          font-size: 15px;
-        }
-      }
-
-      .email-octopus-form-row-subscribe {
-        margin-top: 0;
-        margin-left: $spacing-unit;
-
-        @include media-query($on-laptop) {
-          margin-top: $spacing-unit - 10px;
-          margin-left: 0;
-        }
+      @include media-query($on-palm) {
+        flex-wrap: wrap;
       }
+    }
+    input[type="submit"] {
+      font-size: 16px;
+      line-height: 18px;
+      padding: 0 25px;
+      height: 50px;
+      text-transform: none;
 
-      button {
-        margin: 0;
-
-        @extend %sst-button;
-        @extend %sst-button-outline;
-        @extend %sst-button-primary-pseudo;
-
-        color: white;
-        font-size: 16px;
-        box-shadow: none;
-        line-height: 18px;
-        padding: 17px 40px 16px;
-        background: $important-color;
-
-        @include media-query($on-monitor) {
-          width: 100%;
-        }
+      @include media-query($on-monitor) {
+        width: 100%;
       }
     }
   }
@@ -2033,4 +1993,4 @@
       display: block;
     }
   }
-}
+}
diff --git a/_sass/theme/_layout.scss b/_sass/theme/_layout.scss
@@ -1171,3 +1171,42 @@
   font-size: 20px;
   text-align: center;
 }
+
+/** Newsletter Embed */
+@mixin emailoctopus-embed {
+  #emailoctopus-embed-container {
+    input[type="email"] {
+      padding: 10px;
+      font-size: 18px;
+      height: auto;
+
+      @extend %newsletter-input;
+    }
+    input[type="submit"] {
+      margin-bottom: 0 !important;
+      padding: 17px 16px;
+      font-size: 15px;
+      white-space: nowrap;
+      text-transform: uppercase;
+      font-family: $base-font-family;
+      background-color: $important-color;
+      color: white;
+      border-radius: 4px;
+      line-height: 1.1;
+      transition: 0.3s;
+      cursor: pointer;
+      border: 0;
+      font-weight: 700;
+
+      &:hover {
+        background-color: lighten($important-color, 7%);
+      }
+
+    }
+    .emailoctopus-success-message {
+    }
+    .mastfoot.disabled {
+      display: none;
+    }
+  }
+}