How to add success message to the email form?

I added the email signup form on the my website 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>
</form>

Here is a form from the Ghost 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>

I was going through the SignupPage.js page from Ghost Portal, but haven’t found anything useful. The code from another tutorial haven't worked as well.

Adding <form data-members-form class="success">...</form> inside the form as per Ghost Docs didn't work as well. Please, help.

Solution

Just having taken a look at the documentation you linked to, there are a couple of things that I think you can do quickly to get you closer to your goal.

First, under Form States, it states that CSS classes are add to the form[data-members-form] that correspond to the state of the form: loading, success, error.

You could leverage these classes to implement the showing/hiding of your success (.success) and error (.error) messages with some CSS.

First, we will set the default styling for both .error and .success to be display: none:

form[data-members-form] .error,
form[data-members-form] .success {
  display: none;
}

Next, we leverage the state classes of the form[data-members-form] so as to show our (with display: block) or .error and .success elements when the form is in the corresponding state:

form[data-members-form].error .error {
  display: block;
}

form[data-members-form].success .success {
  display: block;
}

Additionally, under Error Messages, the docs state that an element with the attribute data-members-error will show and be populated with the error message when an error occurs. This means that you could add an empty element somewhere within your form[data-members-form] so that error messages will be shown to your user:

<p data-members-error></p>

As for clearing the form input and having the error and success messages disappear after some time duration, this would require some JavaScript, but I was unable to determine if there are APIs that would support, for example, hooking into the success handler of the form submission.