Clean up subscribe form usage (#11)

yanirs · May 22, 2024 · e149761 · e149761
1 parent 948eacd
commit e149761
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 57 deletions.
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
@@ -1,5 +1,5 @@
 {{- partial "subscribe_hover.html" . }}
-{{- partial "subscribe_form.html" . }}
+{{- partial "subscribe_form.html" (dict "context" .) }}
 
 <section class="comment-section">
   {{ $comments := index $.Site.Data.comments .File.ContentBaseName | default slice }}

diff --git a/layouts/partials/subscribe_form.html b/layouts/partials/subscribe_form.html
@@ -1,21 +1,43 @@
-{{- /* An embeddable subscribe form. Annoyingly also includes ConvertKit's script, but this will be sorted later. */}}
+{{/*
+An embeddable subscribe form. Annoyingly also includes ConvertKit's script, but this will be sorted later.
+*/}}
+{{
+$dataOptions := (dict
+    "settings" (dict
+        "after_subscribe" (dict
+            "action" "message"
+            "success_message" (.success_message | default "Success! Now check your email to confirm your subscription.")
+            "redirect_url" ""
+        )
+        "recaptcha" (dict
+            "enabled" false
+        )
+        "return_visitor" (dict
+            "action" "show"
+            "custom_content" ""
+        )
+    )
+    "version" "5"
+) | jsonify
+}}
+{{$formId := .form_id | default 6549537 }}
 
 <div class="mailing-list-container">
   <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
   <form
     class="mailing-list seva-form formkit-form"
-    action="https://app.convertkit.com/forms/6549537/subscriptions"
+    action="https://app.convertkit.com/forms/{{ $formId }}/subscriptions"
     method="post"
-    data-sv-form="6549537"
-    data-uid="9157759fce"
+    data-sv-form="{{ $formId }}"
+    data-uid="{{ .uid | default "9157759fce" }}"
     data-format="inline"
     data-version="5"
-    data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}"
+    data-options='{{ $dataOptions }}'
   >
     <div data-style="clean">
       <ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
       <div data-element="fields" data-stacked="false">
-        <label for="mailing-list-email">Get weekly posts in your mailbox</label>
+        <label for="mailing-list-email">{{ .email_label | default "Get weekly posts in your mailbox" }}</label>
         <input
           id="mailing-list-email"
           name="email_address"
@@ -24,11 +46,29 @@
           required=""
           type="email"
         >
-        <button data-element="submit">Subscribe</button>
+        {{- /* Hack: Tag form submitters. Can probably be cleaned up further.
+             See https://monicalent.com/blog/2020/05/04/tag-and-segment-convertkit-hugo-gatsby/ */}}
+        {{ if .tag_id }}
+          <fieldset
+            data-group="checkboxes"
+            group="field"
+            type="Custom"
+            order="1"
+            save_as="Tag"
+            style="display: none"
+          >
+            <div data-element="tags-checkboxes" data-group="checkbox">
+              <input class="formkit-checkbox" type="checkbox" name="tags[]" value="{{ .tag_id }}" checked="checked">
+            </div>
+          </fieldset>
+        {{ end }}
+        <button data-element="submit">{{ .submit_label | default "Subscribe" }}</button>
       </div>
     </div>
   </form>
+  {{ if (.show_rss | default true) }}
   <div class="footer">
     Alternatively, <a href="https://yanirseroussi.com/index.xml">subscribe to RSS feed</a>.
   </div>
+  {{ end }}
 </div>
diff --git a/layouts/shortcodes/lead_magnet_form.html b/layouts/shortcodes/lead_magnet_form.html
@@ -1,48 +1,10 @@
-{{- /* An embeddable lead magnet form. Annoyingly also includes ConvertKit's script, but this will be sorted later. */}}
-{{- /* TODO: reduce duplication with the subscribe_form partial. */}}
-
-<div class="mailing-list-container">
-  <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
-  <form
-    class="mailing-list seva-form formkit-form"
-    action="https://app.convertkit.com/forms/6554492/subscriptions"
-    method="post"
-    data-sv-form="6554492"
-    data-uid="26c0fa1a04"
-    data-format="inline"
-    data-version="5"
-    data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to get your PDF guide.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}"
-  >
-    <div data-style="clean">
-      <ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
-      <div data-element="fields" data-stacked="false">
-        <label for="mailing-list-email">Get your copy by email today</label>
-        <input
-          id="mailing-list-email"
-          name="email_address"
-          aria-label="Email address"
-          placeholder="Email address"
-          required=""
-          type="email"
-        >
-        {{- /* Hack: Tag form submitters. Can probably be cleaned up further.
-               See https://monicalent.com/blog/2020/05/04/tag-and-segment-convertkit-hugo-gatsby/ */}}
-        <fieldset
-          data-group="checkboxes"
-          class="formkit-7572"
-          group="field"
-          type="Custom"
-          order="1"
-          save_as="Tag"
-          style="display: none"
-        >
-          <div data-element="tags-checkboxes" data-group="checkbox">
-            <input class="formkit-checkbox" id="tag-7572-5001948" type="checkbox" name="tags[]" value="5001948" checked="checked">
-            <label for="tag-7572-5001948">Data-to-AI Health Check Downloaders</label>
-          </div>
-        </fieldset>
-        <button data-element="submit">Submit</button>
-      </div>
-    </div>
-  </form>
-</div>
+{{- partial "subscribe_form.html" (dict
+  "context" .
+  "email_label" "Get your copy by email today"
+  "form_id" 6554492
+  "show_rss" false
+  "submit_label" "Submit"
+  "success_message" "Success! Now check your email to get your PDF guide."
+  "tag_id" 5001948
+  "uid" "26c0fa1a04"
+) }}
diff --git a/layouts/shortcodes/subscribe_form.html b/layouts/shortcodes/subscribe_form.html
@@ -1 +1 @@
-{{- partial "subscribe_form.html" . }}
+{{- partial "subscribe_form.html" (dict "context" .) }}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{{- partial "subscribe_form.html" . }}
		{{- partial "subscribe_form.html" (dict "context" .) }}