Ghost provides a set of attributes that turn HTML forms into your own subscription flow. The following sections show how to use these HTML attributes and configure them to your needs.

Subscription forms

The only two elements a subscription form requires is an email input field and a submit button. To turn it into a functional subscription form add the attribute data-members-form to the form element and data-members-email to the email input field:

<form data-members-form>
  <input data-members-email type="email" required="true"/>
  <button type="submit">Continue</button>
</form>

That's it, your site can now accept members 🎉

Extending forms

The data-members-form accepts a series of optional values to customise user flows. The following explains these options as well as their fallback flows:

  • data-members-form="signin" – The default behaviour of members forms. If a member uses this form they will be sent a sign in email, if they are not already a member they will be sent a sign up email instead
  • data-members-form="signup" – If a member uses this form they will be sent a sign up email, if they are already a member they will be sent a sign in email instead
  • data-members-form="subscribe" – If a member uses this form they will be sent a subscribe email, if they are already a member they will be sent a sign in email instead

Form states

Whenever a members form is submitted it'll pass through a series of states, which are reflected in the HTML as classes. The classes loading, success and error when the submission is loading, has been successful or has hit an error.

Examples

<form data-members-form class="loading">...</form>

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

<form data-members-form class="error">...</form>

Signing out

Sometimes users want to ensure that their account is secure by signing out of their account after they finished viewing their members only content. Creating a sign out button can be done by applying a data attributed named data-members-signout to a <button> element:

<button role="link" data-members-signout>Sign out</button>

Error messages

Error messages can be shown whenever a members form or subscription button causes an error. Showing the message can be done by adding a child element to the <form> or <button> element with the attribute data-members-error.

Example

<form data-members-form>
  ...
  <p data-members-error><!-- error message will appear here --></p>
</form>

Create a sign in & out component

A common use case would be to create a component that shows a signin form when the member is logged out, and a signout button when a member is logged in. This can be achieved by using the above HTML in conjunction with @members helper.

Example

{{#if @member}}
  <button role="link" data-members-signout>Sign out</button>
{{else}}
  <form data-members-form="signin">
    <input data-members-email type="email" required="true"/>
    <button type="submit">Sign in</button>
  </form>
{{/if}}

Next steps

For more detail into how Ghost themes can be customised with the use of @member check out Content visibility. Or take memberships one step further and implement a Stripe checkout flow with monthly and yearly subscription plans with member checkout buttons.