diff --git a/assets/css/src/public.styl b/assets/css/src/public.styl
index bf8e56f134..0b71fcac53 100644
--- a/assets/css/src/public.styl
+++ b/assets/css/src/public.styl
@@ -12,3 +12,49 @@
.mailpoet_list_label
.mailpoet_date_label
display:block
+
+/* form loading */
+.mailpoet_form_sending
+ .mailpoet_form_loading
+ display:block
+ .mailpoet_submit
+ display:none
+
+.mailpoet_form_loading
+ display:none
+ width: 30px
+ text-align: center
+
+.mailpoet_form_loading > span
+ width: 5px
+ height: 5px
+ background-color: #5b5b5b
+
+ border-radius: 100%
+ display: inline-block
+ -webkit-animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both
+ animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both
+
+.mailpoet_form_loading .mailpoet_bounce1
+ -webkit-animation-delay: -0.32s
+ animation-delay: -0.32s
+
+.mailpoet_form_loading .mailpoet_bounce2 {
+ -webkit-animation-delay: -0.16s
+ animation-delay: -0.16s
+ margin: 0 7px
+}
+
+@-webkit-keyframes mailpoet-bouncedelay
+ 0%, 80%, 100%
+ -webkit-transform: scale(0)
+ 40%
+ -webkit-transform: scale(1.0)
+
+@keyframes mailpoet-bouncedelay
+ 0%, 80%, 100%
+ -webkit-transform: scale(0)
+ transform: scale(0)
+ 40%
+ -webkit-transform: scale(1.0)
+ transform: scale(1.0)
diff --git a/assets/js/src/public.js b/assets/js/src/public.js
index 787da900b6..cac2b2c614 100644
--- a/assets/js/src/public.js
+++ b/assets/js/src/public.js
@@ -54,6 +54,7 @@ function ( // eslint-disable-line func-names
formData.data.recaptcha = window.grecaptcha.getResponse(formData.recaptcha);
}
+ form.addClass('mailpoet_form_sending');
// ajax request
MailPoet.Ajax.post({
url: window.MailPoetForm.ajax_url,
@@ -62,49 +63,54 @@ function ( // eslint-disable-line func-names
endpoint: 'subscribers',
action: 'subscribe',
data: formData.data
- }).fail(function (response) { // eslint-disable-line func-names
- form.find('.mailpoet_validate_error').html(
- response.errors.map(function (error) { // eslint-disable-line func-names
- return error.message;
- }).join('
')
- ).show();
- }).done(function (response) { // eslint-disable-line func-names
- if (window.grecaptcha && formData.recaptcha) {
- window.grecaptcha.reset(formData.recaptcha);
- }
- return response;
- }).done(function (response) { // eslint-disable-line func-names
- // successfully subscribed
- if (
- response.meta !== undefined
+ })
+ .fail(function handleFailedPost(response) {
+ form.find('.mailpoet_validate_error').html(
+ response.errors.map(function buildErrorMessage(error) {
+ return error.message;
+ }).join('
')
+ ).show();
+ })
+ .done(function handleRecaptcha(response) {
+ if (window.grecaptcha && formData.recaptcha) {
+ window.grecaptcha.reset(formData.recaptcha);
+ }
+ return response;
+ })
+ .done(function handleSuccess(response) {
+ // successfully subscribed
+ if (
+ response.meta !== undefined
&& response.meta.redirect_url !== undefined
- ) {
+ ) {
// go to page
- window.location.href = response.meta.redirect_url;
- } else {
+ window.location.href = response.meta.redirect_url;
+ } else {
// display success message
- form.find('.mailpoet_validate_success').show();
- }
+ form.find('.mailpoet_validate_success').show();
+ }
- // reset form
- form.trigger('reset');
- // reset validation
- parsley.reset();
- // reset captcha
- if (window.grecaptcha && formData.recaptcha) {
- window.grecaptcha.reset(formData.recaptcha);
- }
+ // reset form
+ form.trigger('reset');
+ // reset validation
+ parsley.reset();
+ // reset captcha
+ if (window.grecaptcha && formData.recaptcha) {
+ window.grecaptcha.reset(formData.recaptcha);
+ }
- // resize iframe
- if (
- window.frameElement !== null
+ // resize iframe
+ if (
+ window.frameElement !== null
&& MailPoet !== undefined
&& MailPoet.Iframe
- ) {
- MailPoet.Iframe.autoSize(window.frameElement);
- }
- });
-
+ ) {
+ MailPoet.Iframe.autoSize(window.frameElement);
+ }
+ })
+ .always(function subscribeFormAlways() {
+ form.removeClass('mailpoet_form_sending');
+ });
return false;
});
});
diff --git a/lib/Form/Block/Submit.php b/lib/Form/Block/Submit.php
index 59db472009..864ca08960 100644
--- a/lib/Form/Block/Submit.php
+++ b/lib/Form/Block/Submit.php
@@ -14,7 +14,11 @@ class Submit extends Base {
$html .= 'data-automation-id="subscribe-submit-button" ';
- $html .= '/>