Ghost Membership Signup Form

Developer help
1

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:
healthzam.com

Thanks for any help.

2

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

1 Like
3

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

4

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

5

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

6

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

1 Like