I added the email signup form on the homepage. However, when user enters an email and clicks “submit” - there is no feedback whether it was sent successfully. Also, the input form is not cleared and typed in email stays there.
How to add a success/error message that would be shown below the form and automatically disappear after some time?
Here is a form from the forum post that hasn’t worked for me. I suppose there is no validation script:
<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>
Also, I was going through the SignupPage.js page from Portal, but haven’t found anything useful. I’m not a coder, so I might have missed something.
Digging around in the Portal source is a good idea, but you are reviewing, an outdated, archived version of the code (there’s a banner on the top of that page to that effect).
Portal is now in the Ghost monorepo, so try digging around here:
Also, try completing an normal Portal signup form with Developers Tools open use the Inspect feature to inspect the “success” message that you get.
And let us know what you find-- I want to embed a signup form in my Ghost blog, too!
The way it works is this: when someone successfully signs up, a corresponding class is added to the form element. For success, the form would like this:
In this code, when the success class is added to the form, it makes the last rule true and shows a success message.
The only limitation here is that the state won’t clear automatically. I don’t think that’s a big deal, though, because it’s not intrusive and usually more user friendly.
What about an error message, can I make it custom? Because even if I set an icon + custom text it displays a standard text (“Email is not valid”) without an icon. I implemented the form this way:
<form class="data-members-form" data-members-form>
<div>
<input data-members-email type="email" required="true" placeholder="Enter your email"/>
<button type="submit">Subscribe</button>
</div>
<div class="error" data-members-error >Error: enter valid email </div>
<div class="success" data-members-success >{{> "icons/check"}} Success! Please confirm your email within 24 hours. </div>
</form>
However, success message text and the icon are displayed properly. It is weird that I implemented both of them in a similar manner, but the error message doesn’t work properly.
Could you tell me how to fix it?
Feel free to check my blog homepage if code snipped is not enough.
The CSS I shared doesn’t account for an error state. (Additionally, the error wouldn’t be for an invalid email only, it could signal a variety of things, so I’d make the message more generic: “Something’s gone wrong. Please try again.” The email will also be validated on input by the browser.)
It’s because of data-members-error. If you remove that attribute, your custom error message will appear. However, with it present, Ghost overwrites the inner HTML with the custom error message.
Alternatively, then you could also do something like this, which will include your custom icon but also allow Ghost to add a custom error message. These error messages, for example, might be invalid email, too many login attempts, etc.
<div class="error" >{{> "icons/check"}} <span data-members-error>Error: enter valid email</span></div>
@RyanF Where we can find a list of the icons we use? In your example you paired a “check” icon with an error message, but it seems like a “X” icon would be better for an error.
The {{> syntax looks like that Handlebars.js syntax to include a partial, but if I look in the Casper theme for example, I cand find any file paths that include “icon/check”.
Icons are purely up to the theme developer (there’s nothing coming from Ghost directly). I believe @JohnSavern will likely update the icon to an X or something similar.
The approach is similar to what’s used in Casper, where you use partials to render SVG icons. But you could also do this in a variety of different ways.
