I would like to add a signup form in the middle of my blog/newsletter posts. Is it possible yet? Because it would drastically increase the signup rate (It is possible on substack for example)
Hi Kevin.
Can you do this by pasting HTML into the post itself.
I wrote about this a month or so ago: How to add an email subscribe form within a post in Ghost
You could use the example HTML code there or copy the HTML code from your current theme’s subscribe form.
Dan, I think I need some additional assistance here. The code you gave is ok for a general form. I think what we are all looking for is way to add the sign in that shows all the membership tiers within posts or pages.
As far as I know, no - this is not available in the form and shape you’re looking for. That said, if you’re willing to try and test yourself, you can read about members here, take code / information from it and create your own “form” or section.
You can then save that form / section as a snippet in the editor and by doing so, insert it again and again later on in posts and / or pages.
Here are some examples to review:
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
While this is a nice approach and what not, it doesn’t get the actual portal design?
What do you mean by “portal design”? The popup?
Sorry, I should have been more clear.
I mean the information and design given in the portal. It is, after all, a pretty clean and easy going design and you get all the information you need.
Inserting a DIV tag and manually editing stuff is one way to go, kind of the same way I proposed above - but we need an official card or code from the Ghost team so that we can insert CTA:s into posts, pages and emails.
Well, you can do whatever you want really, more so if you’re proficient with coding of course. If you just want a little blurb with a button that activates the portal popup, then you can include the following in your button:
<a href="javascript:" data-portal="signup" class="up-to-you"><span>Subscribe</span></a>
If you want to replicate the design and data in the portal, or whatever really, then you can just code it using any of the various features available:
Not as easy as inserting an official card or something, but if you have the initial code written (very doable with a bit of coding knowledge) then following that the insertion of a signup form/button/whatever is as easy as inserting the requisite snippet into any post or page (emails is another issue/thread).
Sure, “we need [lots of stuff] from the Ghost team”, but that long list of stuff takes time. In the meantime, the above works perfectly.
Yes, there are more options available to those who knows how to code. Myself, I need to brush up on my JS skills since I’ve always been more of a PHP guy (doing WordPress for almost 10 years).
To simplify what I believe @kprimice is after, is a Card as in “insert via the editor” when writing a post or a page. A card that will show the graphics of the portal options that are available. Options that can be clicked, just like they are clickable in the portal modal.
And by graphics, I mean this:
Yes, that is what @kprimice is after, and it’s been established that that currently isn’t possible. Repeating the request won’t necessarily make it possible any faster either.
If it’s any consolation, you don’t need knowledge of any JS (which I have none to speak of) in order to implement the graphics you relayed. Just HTML, CSS, Handlebars and perusal of the docs.
I did not mean to repeat myself, my apologizes if I came across that way. I was just trying to be clear.
If the desired and sought after result only requires HTML and CSS and the usage of some handlebars, I will go after it and spend some time on it during the weekend. I’ll even - if I get it to work as I want it to - publish it for free.
that seems like an awful lot of work to do for a newsletter? I’m still in my trial here with ghost I’m getting the feeling that a lot of coding has to be done on the newsletter for what I would expect to be easy obvious items to have easy inserts or point and select options. Am I correct in that assumption? I dont want to spend as much time building the look of a post as I do writing it?
@Kiara_Ashanti yes, that is correct. No matter if you know HTML, CSS and what not or not - you need to manually create what’s missing.
This might become a feature in the future, but as of right now - it is not.
I think you can easily do that with javaScript. If only you know js but if you don’t then look for an expert. It possible with javascript because I did the same thing someday ago in this angular tutorials blog.
thanks. that clarifies everything for me.
There are two different ways to handle memberships in Ghost.
- Portal: everything is managed via the modal & config - no coding, or almost no coding required
- Theme customisations: inline in the page, requiring coding in handlebars, html & css
They are not mutually exclusive so you can mix and match as you need to. The docs here explain both:
If what you’re looking for is a no-code approach then you need to change your mental model from having things displayed inline on pages to opening the Portal modal on the page you need.
Using portal you can create a signup button that loads the signup portal modal, or using theme customisations you can build your own signup form, pricing page, or whatever you like.
For a signup or pricing link, the best option (IMO) is /#/portal/account/plans because if the member is logged out they’ll see the option to signup and the prices, and if the user is logged in they’ll see the option to change their plan. All the available links are shown in the portal settings area of Ghost admin, as per the first screenshot in the docs pasted above.
You can use these links where ever you like: in Ghost’s navigation, in post content, in theme code and if you use an absolute URL they also work on 3rd party sites.
But using the info or links from the portal page that just places a link, it doesn’t insert the form, correct? Like it would be easier if one of the links on the portal page could be copied and then inserted and the page or post shows the thee different subscription options with the boxes, colors etc. right now my understanding is that can only be done through coding, IF you know how to code. Which I don’t. My options seems to be to hire someone to write that code or I can’t use ghost. Given that Ghost gives better visual options for a newsletter than the generic look of say substack, its a bit frustrating that coding might be a large part of using the platform. Am I correct or misunderstanding how the portal page works?
Ghost has a built in way of doing everything without code - that’s Portal. This is all most platforms have - one way to do things. If you don’t want to code - you need to use Portal.
Ghost comes with the added benefit that you can do pretty much anything you want with a bit of code - whether that’s by spending time to learn yourself or spending money & hiring a coder.
I don’t understand how people manage to frame our platform being more powerful as a negative, it’s truly bizarre.
1 Like
@Hannah I think that a lot of people / users are unwilling to spend time learning or spend money on help these days because they expect modern platforms to “do it all the way they want it”.
That or they expect the platform to come with settings and options for every single part that’s available, so that they can change things themselves without spending money or time on it.
That’s what I think. I might be wrong though.