I’m struggling a little bit with the existing Ghost documentation around memberships and the portal in a scenario where there are multiple newsletters.
Is there any way to create a sign-up form that does the following:
(Where two newsletters exist, Newsletter 1 and Newsletter 2).
If user is not a member:
become a member
sign up for newsletter 2
do not sign up for newsletter 1
display confirmation (“thanks for signing up”)
If user is already member:
sign up for newsletter 2
make not change to user’s existing email membership preferences
display confirmation (“thanks for signing up”)
Note that currently, the portal is set to automatically subscribe new “members” to newsletter 1.
For a little more context:
I have a self-hosted ghost blog, and deliver a single newsletter (newsletter 1) to readers of this blog. I have recently ported my entire email list to Ghost, as it seems (mostly) feature-complete enough for me to run this newsletter on. I capture new subscribers using “portal button” (configurable in the “look and feel” section of the portal settings), which works since I have configured the portal to automatically add new members to newsletter 1.
This was not ideal/perfect, but worked well enough…. That is, until I decided to create a second newsletter (newsletter 2) to run independently of newsletter 1.
Now I’m not sure how to give users the ability to only sign up for newsletter 2, without having to walk them through a (sort of) non-intuitive signup process: become a member, go into your settings, toggle “newsletter 2” on. I want to provide a simple signup form so that readers can simply add their email to the list for “newsletter 2” and not faff around with membership settings. In my ideal world, subscribers to this newsletter will never have to bother with their account settings, much like in more traditional email list software.
Any guidance or suggestions would be greatly appreciated!
Thanks for the Reply. I’m really looking for a way to provide a sign-up form that pre-fills the second box, or directly subscribes users to newsletter 2 without the extra step. Is this possible?
At what point would the member sign of for newsletter 2?
What you can do is offer both newsletters at sign-up and tick them both so the person can uncheck the one they don’t want.
Hello! I wonder if this has ever been solved? I have a series of regional newsletters and right now, the two-step process sort of gets in the way for us. Our readers in Oakland are unlikely to want the newsletters from Tulsa, Philly, etc. So what I’d love are individual standalone signup forms for each. Very intrepid users can manage their settings if they want, but right now, we’re losing people who inadvertently sign up for enwsletters that aren’t in their location, or who bail out from choice paralysis on step 2.
Is there a way to have one form that signs users up for just one of our newsletters, in one step? Thank you!
To start, I haven’t been able to find this exact problem on the forums but I think I’m in a pretty similar situation to this person: Sign-up form for one of multiple newsletters.
Problem: When existing members try to subscribe to additional newsletters (I just added a second newsletter) via my signup form, they receive a sign-in link instead of being automatically subscribed to the new newsletter they selected.
What I want: A simple newsletter subscription flow where:
Users can subscribe to newsletters without caring about “membership”
Existing members can easily subscribe to additional newsletters without managing preferences
The form behaves the same way regardless of whether someone is already a member
Technical details:
This is in my self-hosted Ghost instance
Ghost version: 5.126.o
I’m using Ghost’s built-in newsletter functionality (migrated from Mailchimp)
Form uses Ghost’s standard data-members-form="subscribe" and data-members-newsletter attributes
Currently using the default Ghost member signup flow
The checkboxes represent each newsletter. Here are the two scenarios I want to work:
If a person subscribing is not yet a member…
Select the newsletters you wish to subscribe to and click “Subscribe.”
Receive a verification email to double opt-in for the newsletter subscription.
Click link and get subscribed to the newsletters you selected on the form.
This scenario works. If you select one newsletter or both and you are not currently a member of the site it’ll subscribe you to the newsletter(s) you had checked when you clicked “Subscribe”.
If the person subscribing is already a member…
Select the newsletters you wish to subscribe to and click “Subscribe.”
Receive a verification email to double opt-in for the newsletter subscription.
Click link and get subscribed to the newsletters you selected on the form.
This scenario does not work as I’d like/expect. If you are already a member and select, say, “Mostly Music” because you aren’t subscribed to that one yet, you’ll get a “Secure sign in link” email instead of an email verification email. Maybe that is fine, however, if you click the link, you’ll be signed in but you will not be subscribed to “Mostly Music”. To subscribe, you would have to edit that via your email preferences.
I want it to work more like a traditional newsletter signup where users don’t need to think about having an account.
Question: Is there a Ghost-native way to configure signup forms so existing members automatically get subscribed to newly selected newsletters? Or do I need to build a custom solution using Ghost’s Admin API?
Any guidance on the best approach would be greatly appreciated!
Howdy @carterbancroft ! I dropped your question on the thread you linked, since they seemed pretty closely related, and I figured I’d answer both at once this way!
The problem is that you’re using the data- attributes that cause Ghost to think these are sign-up attempts, not attempts for existing members to change their newsletters.
Here’s some custom code I wrote for a client. If you can edit your theme, feel free to adapt it to your needs. Note that I had two custom variables for the newsletter IDs, but you could easily hard-code those. Get the newsletter ID by editing the newsletter and looking for the string at the end of the URL.
{{#unless @member}}
{{#if @site.members_enabled}}
{{#unless @site.members_invite_only}}
{{!-- this version is used for people who are not signed into the site --}}
<p>I have two newsletters for you–</p>
<p><span class="gold"><strong>1. the spellbook // </strong></span> description of newsletter 1 </p>
<p><span class="gold"><strong>2. the museletter // </strong></span> description of newsletter 2.</p>
<form data-members-form="signup" class="c-subscribe-form is-membership custom-about">
<div class="c-form-group expanded-signup">
<label for="subscribe-box-email" class="u-hidden-visually">Your email address</label>
<input type="email" name="email" class="c-form-group__input" id="subscribe-box-email" placeholder="Your email address" required="" data-members-email="">
<formgroup>
<input id="the spellbook ✨" data-members-newsletter="the spellbook ✨" type="checkbox" class="check" value="the spellbook ✨" checked="">
<label for="the spellbook"><span class="gold"><strong>the spellbook</strong></span></label>
</formgroup>
<formgroup>
<input id="the museletter 💌" data-members-newsletter="the museletter 💌" type="checkbox" class="check" value="the museletter 💌" checked="">
<label for="the museletter"><span class="gold"><strong>the museletter</strong></span></label>
</formgroup>
<button type="submit" value="subscribe" class="c-btn c-form-group__btn">subscribe</button>
</div>
<div class="c-alert c-alert--success">Please check your inbox and click the link to confirm your subscription.</div>
<div class="c-alert c-alert--invalid">Oops, please enter a valid email address.</div>
<div class="c-alert c-alert--error">An error occurred, please try again later.</div>
</form>
{{/unless}}
{{/if}}
{{else}}
{{!-- currently a member - show newsletter options instead --}}
<p>I have two newsletters for you–</p>
<p><span class="gold"><strong>1. the spellbook // </strong></span> wit, wisdom and wiles to help you be a more effective imposter within the mythical ‘future of leadership’. </p>
<p><span class="gold"><strong>2. the museletter // </strong></span> intimate longform epistles, wherein I share what’s on my mind, along with glimmers worth attending to.</p>
<p><em>Always one-click unsub. Loved by over 11,000 readers. You can adjust your preferences below: </em></p>
<form class="c-subscribe-form is-membership custom-about">
<div class="c-form-group expanded-signup">
<input type="hidden" name="subscribed" value="" >
<input type="hidden" name="email" class="c-form-group__input" id="subscribe-box-email" value="{{@member.email}}" >
<formgroup>
<input id="the spellbook ✨" type="checkbox" class="check" value="the spellbook ✨" data-id="{{@custom.spellbook_id}}">
<label for="the spellbook"><span class="gold"><strong>the spellbook</strong></span></label>
</formgroup>
<formgroup>
<input id="the museletter 💌" type="checkbox" class="check" value="the museletter 💌" data-id="{{@custom.museletter_id}}">
<label for="the museletter"><span class="gold"><strong>the museletter</strong></span></label>
</formgroup>
</div>
<div class="c-alert c-alert--success">Please check your inbox and click the link to confirm your subscription.</div>
<div class="c-alert c-alert--invalid">Oops, please enter a valid email address.</div>
<div class="c-alert c-alert--error">An error occurred, please try again later.</div>
</form>
{{!-- the javascript that makes the checkboxes update subscriptions --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
fetch('/members/api/member/', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
mode:"cors",
credentials: "include"
}).then(function (response) {
return response.json();
}).then(function (data) {
for (let one of data.newsletters) {
let name = document.getElementById(one['name'])
if (name) {name.checked = true;} else { console.log('did not find', one['name'])}
}
});
});
document.querySelectorAll('.c-subscribe-form input[type="checkbox"]').forEach(function (el) {
el.addEventListener('change', function (e) {
var form = e.target.closest('form');
var checked = Array.from(form.querySelectorAll('input[type="checkbox"]')).filter(function (el) {
return el.checked;
}).map(function (el) {
return `${el.getAttribute('data-id')}`;
});
form.querySelector('input[name="subscribed"]').value = checked.join(',');
console.log('subscriptions is now', form.querySelector('input[name="subscribed"]').value);
let nameArray = form.querySelector('input[name="subscribed"]').value.split(',');
let subscribedArray = []
for (let one of nameArray) {
subscribedArray.push({id: one});
}
fetch("/members/api/member/", {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
newsletters: subscribedArray
}),
})
});
});
</script>
{{/unless}}
@Cathy_Sarisky thanks for the response! I really appreciate it.
It seems like this logic assumes that being logged in is the indicator for membership. i.e. if the member is logged in, show them the form that will update their subscriptions and if they are not, show them the form that creates new subscriptions.
Am I understanding this correctly?
I don’t think this would cover the case where an existing member is not logged in and is trying to subscribe to the second newsletter. They would “subscribe” and get the sign-in link since they’re already a member but would not actually get subscribed to the newsletter they selected.
I’m thinking I could play with the members API to see if I can, upon “Subscribe” click, first check to see if the email is associated with a member. If it is, update the subscription like you’re example does and, if not, create a new member like I currently have it doing.
It feels hacky though and also I can’t seem to find much documentation on Ghost’s APIs.
Extra context: My use case is that I just imported my old newsletter subscriber list into Ghost from MailChimp and I’m planning to send an email to my current subscribers, from Ghost, announcing my new second newsletter. None of those users will be logged in when they go to the form so the form to update membership instead of creating new membership would not render.
Right. Since Ghost sets a long duration cookie, that’s broadly true in most situations.
Agreed. The problem is that if they aren’t logged in, then they can’t make changes to their newsletter settings, because Ghost doesn’t know who they are.
It’s possible to pass a list of newsletters with a sign-UP request, but I’m not sure if you can pass a list of newsletters with a sign-IN request. (Might work - not sure!)
That’s not something you’re going to be able to do client-side. You can’t have the user’s browser check if a particular email address is subscribed, unless they’ve got a cookie that proves that they’re the owner of that email address. [You /could/ stand up a cloud function that handles that for you, if you aren’t worried about bad actors changing other members’ subscription settings.]
Investigating whether you can pass newsletters into a magic link request when someone is signing in seems like a good place to start - if that works, great, you’re all set, aside from maybe wanting to pop up a message about “we can’t subscribe you until you click the link in email, so please go to do that”). If that doesn’t work, you could consider changing the messaging to people who aren’t logged in, to make it clearer that they either need to subscribe OR log in, if they already have an account and want to make newsletter changes.
OK, thanks. If there’s a way to do what I want to do, please let me know. I just want users to be able to subscribe from a form, regardless of logged in/out status and regardless of their status as subscribers. No updating subscription status and no magic sign in links required. Each subscribe request should ideally require double verification.
It feels like the membership model is too heavy handed for a basic newsletter subscription. I think I’ll just have to tell my current subscribers to tell me if they want to subscribe to the newsletter and I’ll manually subscribe them.
