How to add success message to the email form?

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 my form:

<form class="data-members-form" data-members-form>
  <input class="subscribe-form" data-members-email type="email" required="true" placeholder="Enter your email"/>
  <button class="subscribe-button" type="submit">Subscribe</button>

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="" 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="">support</a>.</div>	

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.

I’m really stuck and would appreciate your help.

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!

I will take a look at it, thank you!

This is handled for you by Portal, so you shouldn’t need to worry about the source code. Our docs on this are here: Ghost Theme Development: Building custom membership flows

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:

<form class="data-members-form success" data-members-form>

The addition of that class allows you to add custom CSS to hide/show the form state.

Here’s an example from our Edition theme:

.form-wrapper.loading .default,
.form-wrapper.success .default,
.form-wrapper.success .loader {
    display: none;

.form-wrapper.loading .loader {
    display: block;

.form-wrapper.success .success {
    display: flex;
    align-items: center;

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.

1 Like

@RyanF Thank you, that is helpful!

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>
  <input data-members-email type="email" required="true" placeholder="Enter your email"/>
  <button type="submit">Subscribe</button>
<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>

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.)

You’d need to add rules like this:

.data-members-form .error {
  display: none;

.data-members-form.error .error {
  display: flex;

Just checked your site. It looks like it’s working :smile:

@RyanF Sorry, maybe I wasn’t clear. The error message works not in the way I coded it. Here is my code:

<div class="error" data-members-error >{{> "icons/check"}} Error: enter valid email </div>
<div class="success" data-members-success >{{> "icons/check"}} Success! Please confirm your email within 24 hours. </div>

The text totally different and there is no icon:

On the contrary here is a success message that works perfectly as I coded it:

I used the same icon in both to exclude the icon issue.

So my question is how to make the error message display the icon and the “Error: enter valid email” or any other custom text?

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.

Let me know if that’s what you’re after :smile:

Thanks! I may just use emoji. :white_check_mark: :x:

1 Like

I did it purely for debugging purposes

I’m fine with the custom icon + error message from Ghost. They seem to be clear and concise. Thank you!

1 Like