How do you automatically place the subscribe form below each post? Without having to manually add the shortcode to each post.
Hey @nibl, there isn’t a way to do this automatically the moment but it fits in line with a feature request for automatic, blog-specific post signatures. Would that be something that’d help you in this case?
The signature feature would probably do the trick.
@cjeller1592, I have managed to insert the subscribe shortcode where I need it, but it’s not actually working because it’s not being interpreted correctly. If I use HTML entities then it shows the literal characters. If I include it as is, then it’s not displayed at all.
Is there a way?
// Add subscribe form to bottom of each post var subDiv = document.createElement("div"); subDiv.style.textAlign = "center"; subDiv.innerHTML = "<div class='subscribe'><hr><h2>Get new posts by email</h2><p>Your address is <em>kept private</em>.</p><div id='subscribecode'><!--emailsub--></div></div>"; // Add to individual blog post page var article = document.getElementById("post-body"); article.insertAdjacentHTML("afterend", subDiv.outerHTML);
// Add subscribe form to bottom of each post var subDiv = document.createElement("div"); subDiv.style.textAlign = "center"; var pathArray = window.location.pathname.split('/'); var x = pathArray; subDiv.innerHTML = '<div class="subscribe"><hr><h2>Get new posts by email</h2><p>Your address is <em>kept private</em>.<form method="post" id="emailsub" action="/api/collections/alias/email/subscribe"><input type="hidden" name="slug" value="' + x + '"><input type="hidden" name="web" value="1"><div style="position: absolute; left: -5000px;"><input type="text" name="Dg7wrFlucFmpOduO9o6ZV8372s9NVpXZKaMgxXN" value=""></div><input type="email" name="email" placeholder="email@example.com"><input type="submit" id="subscribe-btn" value="Subscribe"></form></div>'; // Add to individual blog post page var article = document.getElementById("post-body"); article.insertAdjacentHTML("afterend", subDiv.outerHTML);
var pathArray = window.location.pathname.split('/'); var x = pathArray;
var x = pathArray;
Next is the form itself. The only thing you need to change is the API endpoint for the submit action. All that’s needed is replacing your blog’s alias with the placeholder. Here’s an example with my blog:
And after changing that you should be good to go! Here’s a test blog where I have this working:
Let me know if you run into any problems along the way. As always, I’d be happy to help.
Thanks @cjeller1592. Do you think this will work like the default subscribe where it detects that you are already a subscriber? Because if you try to subscribe when you are already subscribed, you get a 500 error (haven’t been able to try this on the test site you created, but that’s what happened on mine. I was able to reproduce it multiple times).
There is also the issue that it redirects to /subscribe. You get a 404 error if that does not exist. Is it necessary to redirect to that page?
You’re welcome @nibl!
It should because that detection happens server side. I don’t know why it isn’t working here.
But I think it’s best to build a solution for this @nibl than having to do this work around, because there are some things that we cannot replicate with the custom JS that help reduce spam subscriptions.
I’ll bump the post signatures topic in the meantime and see what people think about the feature as a whole. Once we have a better idea of the demand we can look into it further.
@nibl an update on this: you can now add consistent signatures to your posts! More info here: