Ghost Membership Signup Form

Having a little difficulty getting the signup form to show some feedback.

I am running latest ghost, ubuntu, mailgun. The form works, i recieve email from mailgun SMTP. And i recieve the intro email with a link. However I want to give a status message based on success or error.

I tried with the following code but maybe i am not understanding how to do it properly. As i understood i am supposed to nest a form to display the status? I also tried just styling using the success/error class. However I only want to display the message obviously if the form is successul or different message if there is an error.

Here is my code:

{{!--Newsletter SIGNUP FORM --}}
{{#if @labs.members}}
<div class="newsletter">
<h3>{{t "Newsletter"}}</h3>
			<section class="post-subscribe">
				<form data-members-form="subscribe" class="post-subscribe-form">
					<input data-members-email type="email" required="true" placeholder="email@address.net" class="post-subscribe-input"/>
					<button type="submit" title="Subscribe by email." class="post-subscribe-button">Subscribe</button>
					<form data-members-form class="success">Success! Please click the link in we sent to your email to finalize your subscription.</form>
					<form data-members-form class="error">Something went wrong. Contact <a href="mailto:placeholder@address.com">support</a>.</form>			
				</form>
			</section>
			{{/if}}
</div>
{{!--Newsletter SIGNUP FORM --}}

My site:

Thanks for any help.

Hi @mlolm,
You can use the form like this

{{!--Newsletter SIGNUP FORM --}}
{{#if @labs.members}}
<div class="newsletter">
<h3>{{t "Newsletter"}}</h3>
<section class="post-subscribe">
    <form data-members-form="signup" class="post-subscribe-form">
        <input data-members-email type="email" required="true" placeholder="email@address.net" class="post-subscribe-input"/>
        <button type="submit" title="Subscribe by email." class="post-subscribe-button">Subscribe</button>
        <div class="success">Success! Please click the link in we sent to your email to finalize your subscription.</div>
        <div class="error">Something went wrong. Contact <a href="mailto:placeholder@address.com">support</a>.</div>	
    </form>
</section>
</div>
{{/if}}
{{!--Newsletter SIGNUP FORM --}}
  • you will get success and error class in the form and that you can use to show the success and error message

Thanks

Hmm…ok so how do i hide or show the css classes based on form results? Do I need to write JS for that?

No, you don’t need to write any js code for this. But after signing up, when you confirm with email, you need some js code to revert

Still dont have this working yet. Anyone who can help me?

I was on urgent vacation so I couldn’t check. I will check today

1 Like