For those using the new Ghost Editor (beta), we've just released a brand new editor card that gives you new ways to grow your audience across your publication.
Following on from the release of embeddable signup forms that gives you the tools to embed signup forms anywhere on the web, the new Signup card allows you to do the very same thing from your Ghost publication, without ever needing to leave the editor.
Signup cards are directly integrated with Ghost memberships so they'll be shown when it makes sense, and hidden when it doesn't. These forms will only be seen by logged out visitors on your site, making sure your existing members are never confused.
Adding a new signup form
To get started, select the Signup card from the + card menu, or by typing / on a new line. Click on any text within the card and start typing to edit the copy, then use the customizable card editor to choose your layout, alignment, background color or image, button color and text, and add labels to track how many new members your form attracts.
Forms to suit your brand
Whether you're attracting new members from a published post, a landing page, or your about page, the signup form has got you covered with customization options that allow you to style your form however you need.
Here are some examples of how to make your signup cards look the part:
If you're a developer, self-hosting Ghost, you'll need to update to the latest version to get access to everything that's new.
The signup card is supported by the latest versions of all official Ghost themes. Go to Settings → Design → Change theme and reinstall your theme to update to the latest version. If you're using a custom theme, reach out to your theme developer, or visit the docs.
This new card requires custom themes to update their CSS to ensure the new signup card displays correctly in all its variations. All official Ghost themes have already been updated. Casper is automatically updated, but you’ll need to install the latest version of other themes: How do I update an official theme to the latest version?
What I’m wondering is whether or not there could be any issues if I were to copy the outputted HTML of one of these cards from the source code and place it into an HTML card. Or more specifically, I wouldn’t mind inserting that HTML into a script as I described in this comment so that I could use a snippet/template setup which would enable me to effect any possible changes on all signup cards used throughout the site at once. As far as I can tell my tests via an HTML card seem to work without any problems, including the signup card not appearing in the email preview (haven’t tried to see if that carries over to actual emails).
But ghost themes already show a sign up form on post to logged out members. This is much better, but would adding this card then make the standard generic form plus this form show up on a single post or does the template recognize this card when added and remove the one that already shows?
Another thing. Are there any official Ghost themes that have these signup cards in their demos? I’ve just customised the card for a theme and am noticing that when alternatively scrolling up and down on my iPhone mini that the width of the description changes. Trying to figure out if this is something in Ghost’s CSS or my CSS.
Thanks for the demo Ryan, which works perfectly fine on my end. That being said, I installed a fresh instance, Casper is activated by default, no code injection, etc., but the issue nonetheless still persisted for me. After trying to narrow down variables to no avail, I finally figured it out. I was trying your example via Discrourse’s in-app browser, which I take it is Safari. My tests were done with Firefox iOS. Regular Safari, as well as Chrome iOS show no problems, but Firefox iOS does.
You can see yourself what happens when I load up your demo in Firefox iOS here. The widths change on the small and wide signup cards when swiping up and down, while on the full signup card the height of the parent element changes (which, if there was a bunch of text below it, would make it all jerk up and down even if the full signup card was way up above and off screen).
I wouldn’t have imagined that that could be possible as I thought all browsers are forced to used WebKit on iPhones, but I presume there’s something I’m missing.
Anyhow, would you say that that’s a Firefox issue, a Ghost issue, or a me issue?
Absolutely a Firefox iOS issue. As you say all browsers on iOS are just different wrappers for Safari, in this case it looks like the way Firefox is handling it’s address/nav bar popups when scrolling up is causing a resize of the webkit instance which isn’t how that typically works in other browsers.
This new card requires custom themes to update their CSS to ensure the new signup card displays correctly in all its variations. All official Ghost themes have already been updated. Casper is automatically updated, but you’ll need to install the latest version of other themes: