Site reload after sending not always working

Memberships & subscriptions
1

Dear developers,

I implemented the new members form into my themes and noticed, that there seems to be an issue with the post event of it.
When click the button for posting the entered email adress remains in the input field and the site is not loaded (mostly it works at the 3rd or 4th try). However the mail is sent with the first pressing of the button (which results in getting 3 or 4 mails with the same content after some secons).

I used the following code:

<div class="subscribeForm">
    	<form data-members-form="signup">
    		<input data-members-email type="email" placeholder="Your email adress" required="true"/>
    		<button class="button" type="submit">Sign up</button>
    	</form>
 </div>

Did anyone else notice this issue? Is there a fix already?

Best regards,
Jonas

2

A good way to improve this, is to show a message to inform the user about the submission stare, success, error, … You can checkout this example from Casper.

https://github.com/TryGhost/Casper/blob/master/partials/subscribe-form.hbs#L12

2 Likes
3

Want to add small thing to @ahmadajmi 's answer above. The css classes loading / success / error are also being added to the form dynamically based on the form state.

4 Likes
4

Yea this feature could be documented better for theme authors/maintainers…

What I think is going on is just that the server is taking awhile to send the email…, with our only indication is updates to the form element’s classes. I’m not entirely sure the page should reload at all, that may be a race condition.

So @GBJsolution is on the right idea, from the documentation:

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.

Error messages will get handled for you:

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.

For loading and success messages, I plan a similar implementation. Create those messages in the partial as children of the form, but hide them by default. Then when the proper classes get set, display the associated message. E.g.:

 <form data-members-form>
    ...
    <p data-members-error><!-- error message will appear here --></p>
    <p class="loading-message">Sending email…</p>
    <p class="success-message">Check your email for… yada yada yada.</p>
</form>

.loading-message,
.success-message {
    visibility: hidden;
}

.loading .loading-message,
.success .success-message {
    visibility: visibile;
}
5

Thank you, Adam. This approach helped me. :slight_smile: