Use newsletter form

blog/src/layouts/BlogPostLayout.astro

@@ -18,32 +18,47 @@ const {title, description, date, hero, youtube} = content;
         <slot />
       </BlogPost>
       <div class="max-w-3xl mx-auto p-6 border rounded">
-        <h2 class="text-2xl">💌 Subscribe to the newsletter!</h2>
-        <p class="py-4">
-          I'm beyond excited to announce the launch of the <strong>InterviewGuide.dev
-          Newsletter</strong>. In this free newsletter, I'll be sharing:
+        <h3 class="text-2xl" style="margin: 0px 0px 1rem">💌 Subscribe to the newsletter!</h3>
+        <p class="my-3">
+          I'm beyond excited to announce the launch of the InterviewGuide.dev
+          Newsletter. In this free newsletter, I'll be sharing:
         </p>
-        <ul class="list-disc pl-4">
+        <ul class="list-disc pl-4 my-3">
           <li>Additional interview tips</li>
-          <li>Curated jobs</li>
-          <li>Other opportunities to land tech jobs</li>
+          <li>Curated jobs + other opportunities to land tech jobs</li>
           <li>Ways to get feedback from me directly</li>
         </ul>
-        <p class="py-4">Never spam. Unsubscribe anytime. Sound good?</p>
-        <a
-          style="
-            display: inline-block;
-            border: 1px solid black;
-            padding: 5px 10px;
-            border-radius: 2rem;
-            text-decoration: none;
-          "
-          class="hover:border-hot-pink hover:text-hot-pink transition-all duration-300"
-          href="https://www.tinyletter.com/interviewguide"
-          target="_blank"
+
+        <p class="my-3">No spam. Unsubscribe any time. Sound good?</p>
+
+        <form
+          action="https://tinyletter.com/interviewguide"
+          method="post"
+          target="popupwindow"
+          onsubmit="window.open('https://tinyletter.com/interviewguide', 'popupwindow', 'scrollbars=yes,width=800 height=600');return true"
         >
-          Sign me up! &raquo;
-        </a>
+          <p><label for="tlemail">Email address</label></p>
+          <p>
+            <input
+              type="email"
+              required
+              class="border p-2"
+              style="
+                width: 20rem;
+                max-width: 100%;
+                font-size: 1.2rem;
+              "
+              name="email"
+              id="tlemail"
+            />
+          </p>
+          <input type="hidden" value="1" name="embed" />
+          <input
+            class="my-3 rounded border py-2 px-4 hover:text-hot-pink hover:border-hot-pink transition-all duration-300 cursor-pointer"
+            type="submit"
+            value="Sign me up!"
+          />
+        </form>
       </div>
       <div class="text-center mt-20">
         Enjoy this post? Consider <a class="text-hot-pink border-b border-dashed hover:border-transparent hover:text-black transition-all duration-300" href="/">checking out my free Interview Guide!</a>

components/Newsletter.vue

@@ -7,24 +7,49 @@
     </p>
     <ul>
       <li>Additional interview tips</li>
-      <li>Curated jobs</li>
-      <li>Other opportunities to land tech jobs</li>
+      <li>Curated jobs + other opportunities to land tech jobs</li>
       <li>Ways to get feedback from me directly</li>
     </ul>
-    <p>Never spam. Unsubscribe anytime. Sound good?</p>
-    <a
-      style="
-        display: inline-block;
-        border: 1px solid var(--vp-custom-block-tip-text);
-        padding: 5px 10px;
-        border-radius: 2rem;
-        margin-top: 1rem;
-        text-decoration: none;
-      "
-      href="https://www.tinyletter.com/interviewguide"
-      target="_blank"
+
+    <p>No spam. Unsubscribe any time. Sound good?</p>
+
+    <form
+      action="https://tinyletter.com/interviewguide"
+      method="post"
+      target="popupwindow"
+      onsubmit="window.open('https://tinyletter.com/interviewguide', 'popupwindow', 'scrollbars=yes,width=800 height=600');return true"
     >
-      Sign me up! &raquo;
-    </a>
+      <p><label for="tlemail">Email address</label></p>
+      <p>
+        <input
+          type="email"
+          style="
+            width: 20rem;
+            max-width: 100%;
+            border: 1px solid var(--vp-custom-block-tip-text);
+            padding: 5px;
+            font-size: 1.2rem;
+          "
+          name="email"
+          id="tlemail"
+          required
+        />
+      </p>
+      <input type="hidden" value="1" name="embed" />
+      <input
+        style="
+          display: block;
+          border: 1px solid var(--vp-custom-block-tip-text);
+          padding: 5px 20px;
+          border-radius: 2rem;
+          margin-top: 1rem;
+          text-decoration: none;
+          padding: 5px;
+          font-size: 1rem;
+        "
+        type="submit"
+        value=" Sign me up "
+      />
+    </form>
   </div>
 </template>