Insert signup form in post

powerful is good. simple to use is always better. If something is not user friendly to non technical people, especially when its designed or at least marketed toward non technical people then its a mistake. Developers always overlook that for some reason , but thats off topic.

I dont see how to use portal then. the directions on the page don’t seem adequate or I may not understand how to use it yet. Which I fully admit may be the case.

So let me see if I can frame my question and what I’m trying to correctly. I want to insert the membership tiers in either a post or create a page that has them. I go to portal and they have all these links. When I copy them and then go to the page I’m building, no form is created. Just a text hyper link. Is there code on portal that does this or am I trying to do something it cannot do?

You would be correct but it depends on the user. writers are not supposed to have to learn code, when they join any service that’s supposed to be for writing. If I was trying to develop website templates, I think your critique would be apt. But I believe something things should be obvious. Meaning they should have been built into the system from the start and when they are not its usually because the developers are not thinking from the perspective of the end user. I find developers and tech people tend to be Sheldon from Big Bang and everyone else is Penny. Sites or programs sold to Penny, need to be at that level, not Sheldon’s.

Ghost is being pushed as better more attractive design option for people who want to start newsletters. And it appears to be just that. Calls to action are pretty standard for newsletters and membership site, so constantly coding to insert them is not something that users should have to do. You should be able to design and then insert by clicking things.

I would argue that no matter what platform and what type of add-ons you use, there will be always be subjective opinions regarding what’s missing and what’s not working by just clicking and what not.

It doesn’t matter if you’re using Ghost or, for an example, WordPress. Take WordPress as an example. You can write posts and create pages. You can insert whatever you like. You can use plugins such as Beaver Builder, Elementor and what not. Point being; there will always be things missing according to everyone – no matter the platform.

Ghost is for publishers. WordPress is for publishers. They both have features missing according to various users. They both provide the option to add and modify. Both platforms leaves the change to the user.

I would also argue that Ghost provides everything you need, same as WordPress does. You can use a theme in WordPress and be missing something you would argue is basic or useful based on what’s already there – same with Ghost.

My point is this; no matter the platform, there will always be something missing according to subjective opinions. At the same time, you’re free to do whatever you like with it.

You cannot complain about something being missing and get the system and the whole setup for free. For me, it doesn’t work that way.

Ghost is available to both Sheldon and Penny. They can learn from each other and they can learn on their own.

Correct. If you want the no-code option, then the Portal links are what you have available. The trade-off for that instant usability is limited customisation, in this case it’s necessary to have a CTA that visitors click to see the signup form which is all pre-populated for you.

If you want to go down the full-on customisation route and insert forms directly on the page then that is absolutely possible but it will require some coding on your part to customise your theme.

Ghost is built by a very small team which is always being pulled in a huge number of directions by different factions of users and their varying use-cases. The fact that it manages to move forward at all is all is pretty incredible, especially when you compare to other open large source apps that tend to stagnate or lose focus trying to be everything to everyone. A big part of being able to achieve that is not getting bogged down adding options for everything and taking on projects building customisation interfaces (that would usually require full-time teams by themselves) when those customisation are already made available through other means to those who need it.

2 Likes

Thank you. I guess this goes under no solution has every solution. Substack is great but severely limited in the ability to make it look nice, SEO, and branding. But you already know that, lol its the competition. Wordpress is more of a website builder now and the membership apps are about the same cost as moving up to custom. And ghost seems to work better for people with either a team or work for hire that code. In your next updates, I would strongly suggest to at least add in easier options for text (like centering) and changing the size of photos.

Sorry to resurface this thread, although, is there a way to iFrame or similar the portal contents into a page? I would like to add FAQs underneath

Hi @Leepish, it’s possible to pull the content that would go into the portal and write a .hbs file that displays it all exactly as you want it.
From this documentation page: Ghost Handlebars Theme Helpers: tiers

{{! Get all tiers with monthly price, yearly price, and benefits data }}
{{#get "tiers" include="monthly_price,yearly_price,benefits" limit="all" as |tiers|}}
    {{! Loop through our tiers collection }}
    {{#foreach tiers}}
        {{name}}
        {{#if monthly_price}}
            <div>
                <a href="javascript:" data-portal="signup/{{id}}/monthly">Monthly – {{price monthly_price currency=currency}}</a>
            </div>
        {{/if}}
        {{#if benefits}}
            {{#foreach benefits as |benefit|}}
                {{benefit}}
            {{/foreach}}
        {{/if}}
    {{/foreach}}
{{/get}}

That’s not pretty in terms of layout and styling, but it does show how to pull all the data you’d need to make it pretty. :slight_smile:

Thanks for sharing this Cathy, I’ll take a look later!! So excited it appears to be possible. Could you insert that code into a html card to achieve the same effect?

That’s handlebars to be parsed by the server, so it won’t work in a code injection box or in an html card. But you certainly could create an html card solution. Most sites don’t change prices very often so there’s no reason you couldn’t just create your tier listing in html.

(You could also use JavaScript in the html card to get and render the tiers.)

Amazing is there a tutorial on how to use JavaScript to inject it into a html card? I don’t want to be manually updating prices - would rather than all be managed my Ghost

You can put javascript (in <script> tags) inside an HTML card.
You’d need to write an API call (use fetch or similar) to get the tiers data from the API. It’s OK put put your CONTENT API key but never your ADMIN API key into a Ghost page. There’s a little documentation here: Ghost Content API Documentation but it certainly doesn’t rise to the level of tutorial. If you’re able to edit your theme, that’s going to be the far easier approach.

If you’re determined to do it with javascript, you’ll have an easier time if you get the Ghost API SDK into the browser. You can convert it into a single .js with browserify (at least, this works with the Admin API SDK), and then the API calls will be much easier.

Has anybody actually gotten this working? Cause I’ve recommended it to many people who’ve asked about doing such a thing, with the caveat that I haven’t actually tried it out myself. Well, I just tried it out for a theme I’m finishing off, and it doesn’t actually work. I don’t recall where I got the code from, but nonetheless I (who doesn’t know any JS) did a bit of trial and error and actually got it working.

This the JS you’ll need, and replace the <div></div> with the code for the signup form or signup button or whatever else it is you’d like to insert.

<script>
    document.querySelectorAll(".non-member-insertion .subscribe-form-insertion").forEach((elem) => {
        elem.innerHTML = "<div></div>";
    });
</script>

Your snippet will look like such:

<div class="subscribe-form-insertion"></div>

And you’ll have to insert {{#if @member}} member-insertion{{else}} non-member-insertion{{/if}} around the content of the post/page, so something like this:

<div class='c-content{{#if @member}} member-insertion{{else}} non-member-insertion{{/if}}'>

Done.

Hey @Stromfeldt

Trying to use your examples here for showing Adsense on my site. How would I construct this code so that the ads / div does not show for paid members?

Exactly as shown. The .non-member-insertion portion in the first piece of code is what does that.

If you want to do it through pop-ups, you can us JS setTimeout to waite a few seconds before the page is fully rendered and then you show the signup form. You can see the delay form here for reference