From 5084f3c7faf6965daa8ffb61ea29a7b410929cb2 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Wed, 22 Jan 2020 19:00:24 +0330 Subject: [PATCH] Fix formspree not working when asking for captcha --- assets/js/contact.js | 2 +- assets/js/helpers/jq-helpers.js | 4 ++-- assets/scripts/syna-contact.js | 2 +- layouts/partials/fragments/contact.html | 3 +++ 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/assets/js/contact.js b/assets/js/contact.js index 0b1681d5..54efdd3c 100644 --- a/assets/js/contact.js +++ b/assets/js/contact.js @@ -16,7 +16,7 @@ const validatorConfig = { $(`form[id=${form.getAttribute('id')}] .generic-error`).removeClass('d-none'); }, onSuccess: function(e, form) { - if (form.dataset.hasNetlify) { + if (form.dataset.hasNetlify || form.dataset.hasFormspree) { return; } diff --git a/assets/js/helpers/jq-helpers.js b/assets/js/helpers/jq-helpers.js index af50ac28..e8b3a790 100644 --- a/assets/js/helpers/jq-helpers.js +++ b/assets/js/helpers/jq-helpers.js @@ -140,9 +140,9 @@ $.ajax = function ajax({ xhr.onreadystatechange = () => { if (xhr.readyState == 4) { if (xhr.status == 200) { - resolve(JSON.parse(xhr.responseXML || xhr.responseText)); + resolve(JSON.parse(xhr.responseXML || xhr.responseText)); } else { - reject(xhr.statusText); + reject(xhr.statusText); } } } diff --git a/assets/scripts/syna-contact.js b/assets/scripts/syna-contact.js index d6f29680..451c02f8 100644 --- a/assets/scripts/syna-contact.js +++ b/assets/scripts/syna-contact.js @@ -94,7 +94,7 @@ /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nvar _formValidatorSimple = __webpack_require__(/*! form-validator-simple */ \"./node_modules/form-validator-simple/dist/bundle.js\");\n\nvar _formValidatorSimple2 = _interopRequireDefault(_formValidatorSimple);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n(function () {\n if ((0, _jqHelpers2.default)('.g-recaptcha')) {\n checkReCaptcha();\n }\n})();\n\nvar validatorConfig = {\n errorTemplate: '%s',\n onFormValidate: function onFormValidate(isFormValid, form) {\n form.querySelector('button.submit-btn').disabled = !isFormValid;\n },\n onError: function onError(e, form) {\n (0, _jqHelpers2.default)('form[id=' + form.getAttribute('id') + '] .generic-error').removeClass('d-none');\n },\n onSuccess: function onSuccess(e, form) {\n if (form.dataset.hasNetlify) {\n return;\n }\n\n e.preventDefault();\n var id = form.getAttribute('id');\n var $form = (0, _jqHelpers2.default)('form[id=' + id + ']');\n var action = $form.attr('action');\n var genericSuccess = $form.$('.generic-success');\n var genericError = $form.$('.generic-error');\n genericSuccess.addClass('hidden');\n genericError.addClass('d-none');\n $form.removeClass('error').removeClass('success');\n\n var serializedForm = (0, _jqHelpers2.default)('#' + id).serialize();\n if (typeof grecaptcha !== \"undefined\" && grecaptcha.getResponse() === \"\") {\n grecaptcha.execute();\n return false;\n }\n\n $form.$('button.submit-btn').attr('disabled', true).addClass('disabled');\n _jqHelpers2.default.post(action, serializedForm, {\n contentType: 'application/x-www-form-urlencoded'\n }).then(function () {\n genericSuccess.removeClass('hidden');\n $form.addClass('success');\n $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled');\n }).catch(function () {\n genericError.removeClass('d-none');\n $form.addClass('error');\n $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled');\n });\n\n return false;\n }\n};\n\ndocument.querySelectorAll('form.contact').forEach(function (form) {\n new _formValidatorSimple2.default(Object.assign(validatorConfig, { form: form }));\n (0, _jqHelpers2.default)(form).$('#generic-success [data-action=\"return-form\"]').on('click', function () {\n (0, _jqHelpers2.default)(form).$('#generic-success').addClass('hidden');\n (0, _jqHelpers2.default)(form).removeClass('success');\n });\n});\n\nfunction checkReCaptcha() {\n if (document.querySelector('.g-recaptcha-container') && typeof grecaptcha === \"undefined\") {\n (0, _jqHelpers2.default)('.captcha-error').removeClass('d-none');\n setTimeout(checkReCaptcha, 200);\n } else {\n (0, _jqHelpers2.default)('.captcha-error').addClass('d-none');\n (0, _jqHelpers2.default)('.g-recaptcha-filler').addClass('d-none');\n (0, _jqHelpers2.default)('.g-recaptcha').attr('disabled', true);\n }\n}\n\nwindow.onContactCaptcha = function ($form) {\n var customEvent = document.createEvent('Event');\n customEvent.initEvent('submit', true, true);\n document.querySelector('form.contact').dispatchEvent(customEvent);\n};\n\nwindow.syna.stream.subscribe('contact:update', function (_ref) {\n var name = _ref.name,\n email = _ref.email,\n phone = _ref.phone,\n message = _ref.message;\n\n var form = (0, _jqHelpers2.default)('form.contact');\n form.$('input[name=name]').attr('value', name || null)[0].focus();\n // TODO: REVISIT: Remove the following line whenever firefox fixes center on focus\n form[0].scrollIntoView({ behavior: \"instant\", block: \"center\" });\n form.$('input[name=email]').attr('value', email || null);\n form.$('input[name=phone]').attr('value', phone || null);\n form.$('textarea[name=message]').$nodes.forEach(function (node) {\n node.innerHTML = '';\n node.appendChild(document.createTextNode(message || ''));\n });\n});\n\n//# sourceURL=webpack:///./assets/js/contact.js?"); +eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nvar _formValidatorSimple = __webpack_require__(/*! form-validator-simple */ \"./node_modules/form-validator-simple/dist/bundle.js\");\n\nvar _formValidatorSimple2 = _interopRequireDefault(_formValidatorSimple);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n(function () {\n if ((0, _jqHelpers2.default)('.g-recaptcha')) {\n checkReCaptcha();\n }\n})();\n\nvar validatorConfig = {\n errorTemplate: '%s',\n onFormValidate: function onFormValidate(isFormValid, form) {\n form.querySelector('button.submit-btn').disabled = !isFormValid;\n },\n onError: function onError(e, form) {\n (0, _jqHelpers2.default)('form[id=' + form.getAttribute('id') + '] .generic-error').removeClass('d-none');\n },\n onSuccess: function onSuccess(e, form) {\n if (form.dataset.hasNetlify || form.dataset.hasFormspree) {\n return;\n }\n\n e.preventDefault();\n var id = form.getAttribute('id');\n var $form = (0, _jqHelpers2.default)('form[id=' + id + ']');\n var action = $form.attr('action');\n var genericSuccess = $form.$('.generic-success');\n var genericError = $form.$('.generic-error');\n genericSuccess.addClass('hidden');\n genericError.addClass('d-none');\n $form.removeClass('error').removeClass('success');\n\n var serializedForm = (0, _jqHelpers2.default)('#' + id).serialize();\n if (typeof grecaptcha !== \"undefined\" && grecaptcha.getResponse() === \"\") {\n grecaptcha.execute();\n return false;\n }\n\n $form.$('button.submit-btn').attr('disabled', true).addClass('disabled');\n _jqHelpers2.default.post(action, serializedForm, {\n contentType: 'application/x-www-form-urlencoded'\n }).then(function () {\n genericSuccess.removeClass('hidden');\n $form.addClass('success');\n $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled');\n }).catch(function () {\n genericError.removeClass('d-none');\n $form.addClass('error');\n $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled');\n });\n\n return false;\n }\n};\n\ndocument.querySelectorAll('form.contact').forEach(function (form) {\n new _formValidatorSimple2.default(Object.assign(validatorConfig, { form: form }));\n (0, _jqHelpers2.default)(form).$('#generic-success [data-action=\"return-form\"]').on('click', function () {\n (0, _jqHelpers2.default)(form).$('#generic-success').addClass('hidden');\n (0, _jqHelpers2.default)(form).removeClass('success');\n });\n});\n\nfunction checkReCaptcha() {\n if (document.querySelector('.g-recaptcha-container') && typeof grecaptcha === \"undefined\") {\n (0, _jqHelpers2.default)('.captcha-error').removeClass('d-none');\n setTimeout(checkReCaptcha, 200);\n } else {\n (0, _jqHelpers2.default)('.captcha-error').addClass('d-none');\n (0, _jqHelpers2.default)('.g-recaptcha-filler').addClass('d-none');\n (0, _jqHelpers2.default)('.g-recaptcha').attr('disabled', true);\n }\n}\n\nwindow.onContactCaptcha = function ($form) {\n var customEvent = document.createEvent('Event');\n customEvent.initEvent('submit', true, true);\n document.querySelector('form.contact').dispatchEvent(customEvent);\n};\n\nwindow.syna.stream.subscribe('contact:update', function (_ref) {\n var name = _ref.name,\n email = _ref.email,\n phone = _ref.phone,\n message = _ref.message;\n\n var form = (0, _jqHelpers2.default)('form.contact');\n form.$('input[name=name]').attr('value', name || null)[0].focus();\n // TODO: REVISIT: Remove the following line whenever firefox fixes center on focus\n form[0].scrollIntoView({ behavior: \"instant\", block: \"center\" });\n form.$('input[name=email]').attr('value', email || null);\n form.$('input[name=phone]').attr('value', phone || null);\n form.$('textarea[name=message]').$nodes.forEach(function (node) {\n node.innerHTML = '';\n node.appendChild(document.createTextNode(message || ''));\n });\n});\n\n//# sourceURL=webpack:///./assets/js/contact.js?"); /***/ }), diff --git a/layouts/partials/fragments/contact.html b/layouts/partials/fragments/contact.html index 066dfe48..9ff8c3c1 100644 --- a/layouts/partials/fragments/contact.html +++ b/layouts/partials/fragments/contact.html @@ -20,6 +20,9 @@ {{- safeHTMLAttr (print " data-has-netlify=\"true\" netlify") -}} {{- else -}} {{- safeHTMLAttr (printf " action=\"%s\"" (.Params.post_url | default (printf "https://formspree.io/%s" .Params.email))) -}} + {{- end -}} + {{- if and (isset .Params "email") -}} + {{- safeHTMLAttr (print " data-has-formspree=\"true\"") -}} {{- end }}>