feat: move from mailerlite to convertkit for newsletter sending (update form and styling)

Author: chrisspiegl

assets/scss/style.scss

@@ -557,18 +557,21 @@ p code {
 }
 
 #newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
+.formkit-form button,
 .btn {
   text-align: center !important;
   color: var(--color-body) !important;
   text-decoration: none !important;
   border: 2px solid var(--color-link) !important;
   background-color: transparent !important;
-  padding: 1rem !important;
+  padding: 0.5rem 1rem !important;
   // margin: 1rem !important;
   letter-spacing: .1rem !important;
+  font-weight: bold !important;
 }
 
 #newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
+.formkit-form button:hover,
 .btn:hover {
   color: var(--color-white) !important;
   background-color: var(--color-light) !important;
@@ -615,6 +618,7 @@ input[type=submit] {
 }
 
 #newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
+.formkit-form button,
 input[type=submit],
 .btn,
 .btn-block {
@@ -623,7 +627,52 @@ input[type=submit],
   font-size: var(--font-size-minus-1) !important;
 }
 
+.formkit-form [data-style="clean"],
 #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
 #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
   padding: 0 !important;
 }
+
+.formkit-form {
+  max-width: 100% !important;
+}
+
+.formkit-form .formkit-fields {
+  display: grid;
+  grid-gap: 1rem !important;
+  // grid-template-columns: 1fr;
+}
+
+.formkit-form .formkit-field,
+.formkit-form input,
+.formkit-form button {
+  margin: 0 !important;
+}
+
+.formkit-form button {
+  // margin: 0.5rem 0 !important;
+  // padding: 0 !important;
+  border-radius: 0 !important;
+}
+
+.formkit-form button span,
+.formkit-form button span:hover {
+  display: block !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+}
+
+.formkit-form .formkit-alert {
+  margin-bottom: 0 !important;
+}
+
+.formkit-form div[data-style="clean"] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.formkit-powered-by-convertkit-container {
+  display: none !important;
+}

newsletter/index.md

@@ -11,21 +11,14 @@ Welcome to my newsletter, where I gather my thoughts, share personal updates, an
 Thank you for joining me on this journey of meaningful content and discoveries. Let's explore and connect in the realm of email.
 
 <!-- MailerLite Newsletter Embed -->
-<div id="newsletter-embed" class="ml-embedded paragraph text-center" data-form="TUhoiV"></div>
+<!-- <div id="newsletter-embed" class="ml-embedded paragraph text-center" data-form="TUhoiV"></div> -->
 
-Remember, you have the freedom to unsubscribe at any moment. Simply click the "unsubscribe" link at the bottom of each email.
+<!-- ConvertKit Newsletter Embed -->
+<div id="newsletter-embed" class="ml-embedded paragraph text-center">
+<script async data-uid="9018b64cf4" src="https://chrisspiegl.ck.page/9018b64cf4/index.js"></script>
+</div>
 
-<!-- SendFox Newsletter Embed -->
-<!-- <div id="newsletter-embed" class="paragraph text-center">
-<form method="post" action="https://sendfox.com/form/36wy84/1d5zr5" class="sendfox-form" id="1d5zr5" data-async="true" data-recaptcha="true">
-  <input type="text" class="text-center" placeholder="First Name" name="first_name" required />
-  <input type="email" class="text-center" placeholder="Email" name="email" required />
-  <label><input type="checkbox" style="display: inline; width: auto;" name="gdpr" value="1" required /> I agree to receive email updates and promotions.</label>
-  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
-  <button type="submit" class="btn btn-block">Join!</button>
-</form>
-<script src="https://sendfox.com/js/form.js"></script>
-</div> -->
+Remember, you have the freedom to unsubscribe at any moment. Simply click the "unsubscribe" link at the bottom of each email.
 
 <!-- You can also access the archive of newsletters I have [sent in the past](/newsletter/archive). ## THIS ARCHIVE IS REDIRECTING - MAY IMPLEMENT LOCAL ARCHIVE BASED ON CATEGORY ## -->