Membership Messages Appearing

Memberships & subscriptions
1

I am following the form instructions found here to allow for membership signups. The form itself is working as intended, but when the page loads, the notifications for error, success and loading appear even though they should only appear depending on the state of the form submission. Is there a reason why this is happening?

<form data-members-form>
    <input data-members-label type="hidden" value="Free"/>
    <input data-members-email type="email" required="true" placeholder="jenny.doe@example.com" class="w-full appearance-none rounded border shadow p-3 text-grey-dark mr-2 focus:outline-none">
    <button class="w-full p-2 mt-5 bg-primary-600 text-white font-medium rounded hover:bg-primary-800 hover:font-semibold">Sign Up for Free</button>
    <form data-members-form class="loading">Loading Please Wait...</form>
    <form data-members-form class="success">Success!</form>
    <form data-members-form class="error">Error</form>
    <p data-members-error>Error</p>
</form>

Is there something missing from my code?

2

You need some CSS to hide/show them depending on the form state. At its simplest, it could be something like below.

.loading,
.success,.
.error {
    display: none;
}

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

You can also get some inspiration from Lyra’s CSS.

1 Like
3

Ahh okay. I didn’t realize that. The documentation should be really include that piece of information because many may believe that something within the ghost code would control the visibility when tags are used.

Thanks for the help.