Insert signup form in post

Memberships & subscriptions
5

If I’m not mistaken, I believe this is possible with a bit of theme “trickery”. I haven’t tried it out myself just yet, although I plan to make the attempt shortly after custom plans are released (next month?). Nonetheless, as I figure that this could be useful to others I thought I’d share the methodology here.

First off, in the requisite place in your post.hbs file (or what have you), include an {{#if}} statement along these lines:

<div class="post-content{{#if @member}} member-placeholder{{else}} non-member-placeholder{{/if}}">
    {{content}}
</div>

Next up, the idea is to then implement insertion of placeholders via something Kevin explained in a separate thread:

For members-only placeholders you adjust Kevin’s code so it looks like this:

<script>
.member-placeholder('[data-ad-placeholder="ads-1"]').forEach((elem) => {
     elem.innerHTML = "... your ad html ...";
});
</script>

And for non-members placeholders (signup forms) you do this:

<script>
.non-member-placeholder('[data-ad-placeholder="ads-2"]').forEach((elem) => {
     elem.innerHTML = "... your ad html ...";
});
</script>

You can save those <script>s to your code injection footer or to your preferred location in your theme.

Next up, you create snippets out of HTML cards with

<div data-ad-placeholder="ads-1"></div>

<div data-ad-placeholder="ads-2"></div>

etc.

Last of all, you simply insert those snippets into your posts wherever you’d like those signup forms (or whatever) to appear.

With this methodology you’d not only be able to display signup forms only to non-members, but you’d also be able to change all those signup forms across your blog/site in one go by editing the .non-member-placeholder script.

1 Like