Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate email subscription form to ConvertKit #8

Merged
merged 7 commits into from
May 8, 2024
Merged

Migrate email subscription form to ConvertKit #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5d17cf7
Add minimal ConverKit embed (as-is copy-paste)
yanirs May 8, 2024
e5faa7b
Remove ConvertKit branding and reformat
yanirs May 8, 2024
a096890
Move into mailing list container
yanirs May 8, 2024
b701af9
Reformat
yanirs May 8, 2024
be12f10
Remove inline styling and mailchimp form
yanirs May 8, 2024
ac0d7ff
Improve styling and remove superfluous classes
yanirs May 8, 2024
5db71e4
Improve diff
yanirs May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions assets/css/extended/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,20 @@ form.mailing-list {
}

form.mailing-list label {
display: block;
font-weight: bold;
}

form.mailing-list input[type="text"] {
form.mailing-list input[type="email"] {
background: var(--theme);
border-radius: 4px;
color: var(--primary);
margin: 8px;
padding: 4px;
min-width: 50%;
}

form.mailing-list input[type="submit"] {
form.mailing-list button {
background: var(--primary);
border-radius: 18px;
color: var(--theme);
Expand Down
31 changes: 22 additions & 9 deletions layouts/partials/extend_footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,32 @@
</a>

<div class="mailing-list-container">
<script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annoying to load an external script. 😞
But good enough to get the initial integration going.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When testing on DuckDuckGo mobile, subscription still works even though the script is blocked. However, the user is redirected to a generic ConvertKit page, which isn't a great experience.

Should either: (1) self-host the script; (2) keep the script but have a better setup for redirection after posting; or (3) put together a minimal self-hosted version of the script.

In any case, it's good enough for now.

<form
class="mailing-list"
action="https://yanirseroussi.us17.list-manage.com/subscribe/post?u=3c08aa3ff27dd92978019febd&amp;id=bc3ab705af"
class="mailing-list seva-form formkit-form"
action="https://app.convertkit.com/forms/6549537/subscriptions"
method="post"
target="_blank"
novalidate
data-sv-form="6549537"
data-uid="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;}"
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So ugly. It's probably possible to make this human-readable by getting Hugo to HTML-encode the config JSON. Good enough for now, though.

>
<label for="mailing-list-email">Get new posts in your mailbox</label>
<input type="text" name="EMAIL" id="mailing-list-email" placeholder="Email address" />
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_3c08aa3ff27dd92978019febd_bc3ab705af" tabindex="-1" value="" />
<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>
<input
id="mailing-list-email"
name="email_address"
aria-label="Email address"
placeholder="Email address"
required=""
type="email"
>
<button data-element="submit">Subscribe</button>
</div>
</div>
<input type="submit" value="Subscribe" />
</form>

<div class="footer">
Expand Down
Loading