Add text to sign up form

Memberships & subscriptions
1

Hey there!

I’m running an hosted version of Ghost, is there a way to inject a short text into the signup form?

I’m not a dev, I managed to create something dirty like this with Dev tools. Wondering if there is a way possibly to use code injection to achieve it?

Thanks a lot

image
image1315×575 76.2 KB

2

Unfortunately this is not an easy thing to do. Default membership popup, which I assume you are using in your theme is built with React.. It generates a portal.min.js which is then included in the site. It has a few switches for the admin to change, as you can see on Admin->Settings->Members->Portal page (like Display name in signup form toggle). It does this by making an API call (‘members/api/site/’) to the server, getting site details and using that data to render React components. So unless there are more switches and inputs added to this functionality by Ghost team, you have a few options

  • Do not use the default membership portal (signup/signin popup,etc.). You’d need to have someone create similar functionality with HTML/CSS/JS in your theme

  • Clone GitHub repo, modify, build it and somehow replace the loaded default portal.min.js(which may be hard itself. There is a discussion about it here ). As an example,you can check Sign up page

  • This is a bit of a hack with Code injection and the least reliable way, but it seems to work. I did a quick and dirty one here which you can understand how it can be done. I had to add in timeouts to give React time to load and render components. Add this to your pages using Code Injection

2 Likes
3

Thanks a lot @kose_mark ! If I might ask -

  • Do not use the default membership portal (signup/signin popup,etc.). You’d need to have someone create similar functionality with HTML/CSS/JS in your theme`

Would you know if I can e.g. use Mailchimp forms for this? And they would show up whenever the portal is shown?

  • Clone GitHub repo, modify, build it and somehow replace the loaded default portal.min.js(which may be hard itself. There is a discussion about it here ). As an example,you can check Sign up page

Can I do this in the hosted version of Ghost somehow or would I need to be running my own instance?

  • This is a bit of a hack with Code injection and the least reliable way, but it seems to work. I did a quick and dirty one here which you can understand how it can be done. I had to add in timeouts to give React time to load and render components. Add this to your pages using Code Injection

Thanks for putting this together :pray: I have added to the Injection for the header, but the form doesn’t change. Anything that I am missing?

4

You can download the portal file from its source and load it from your theme and by doing that, you can modify the portal file any way you see fit. This is, by the way, the official way to alter the portal experience according to the Ghost team.

2 Likes
5
  1. Adding from other site might possibly have CORS issues (Also Ghost seems to verify Origin header a lot, not sure what limitations it could impose).
  2. Theoretically, you could do this all in your template and if you have Ghost Pro plan that lets you update your theme. But the way portal.min.js is loaded is a bit complicated as I understand from Ghost source code. It’s coming from {{ghost_header}} which seems to be a combination of Ghost added default HTML (including ghost.min.js and SEO stuff) and the Code Injection users add in their admin page.
    Having said that, adding a second portal.js after the first one should overwrite the previous code(all variables and functions), so it might work without taking out that. Again, I have not followed discussions, nor I have tried removing the default portal.min.js from output. So it’s a bit of a research to be done.
  3. Try moving it to Site Footer from Site Header. We may not be using same theme/version so our results may differ, but I’m hopeful :slight_smile:
1 Like
6

Thanks! Any idea where I could add it in the theme? E.g. in the root folder is ok? (I’m using Casper, if that matters)

7

yes, add it to root of the theme and then change the load location of the portal by editing the config.production.json file and then restart ghost for it all to take effect.

2 Likes