Как открыть Fancybox после отправки wpforms?
У меня есть простая форма WPForms с двумя обязательными текстовыми полями, и мне нужно открыть Fancybox ТОЛЬКО после успешной отправки WPforms
function openFormResp() { new Fancybox([ { src: '#modal-response', type: 'inline', }, ]) } document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { openFormResp() }) }) |
function openFormResp() { new Fancybox([ { src: '#modal-response', type: 'inline', }, ]) } document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { openFormResp() }) })
этот код не работает должным образом, потому что, когда поля не прошли проверку, открывается модальное окно! А открывать его следует только после валидации!
Дополнительно:
Попробуйте сделать функцию валидации полей формы
document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { e.preventDefault(); // do validation if (!validate(form)) { return; } openFormResp(); }) }); |
document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { e.preventDefault(); // do validation if (!validate(form)) { return; } openFormResp(); }) });
document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { openFormResp() }) }) |
document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function (e) { openFormResp() }) })
это убрать и найти часть где форма отправляется
//-----MODAL RESPONSE------------------------------------------ function openFormResp() { new Fancybox([ { src: '#modal-response', type: 'inline', }, ]) } //-----WPFORMS ACTION AFTER SUBMIT------------------------------------------ (($) => { $('form.wpforms-form').on('wpformsAjaxSubmitSuccess', (e) => { openFormResp() }) })(jQuery) |
//-----MODAL RESPONSE------------------------------------------ function openFormResp() { new Fancybox([ { src: '#modal-response', type: 'inline', }, ]) } //-----WPFORMS ACTION AFTER SUBMIT------------------------------------------ (($) => { $('form.wpforms-form').on('wpformsAjaxSubmitSuccess', (e) => { openFormResp() }) })(jQuery)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Открывать Fancybox на событии
submitнельзя: это событие срабатывает до результата валидации и до ответа WPForms. Поэтому модалка открывается даже при незаполненных обязательных полях.Если у формы WPForms включена AJAX-отправка, используйте событие успешной отправки WPForms:
document.addEventListener('wpformsAjaxSubmitSuccess', function (event) { Fancybox.show([ { src: '#modal-response', type: 'inline' } ]); });document.addEventListener('wpformsAjaxSubmitSuccess', function (event) { Fancybox.show([ { src: '#modal-response', type: 'inline' } ]); });
Если нужно ограничиться конкретной формой, проверьте ID формы:
document.addEventListener('wpformsAjaxSubmitSuccess', function (event) { const form = event.target; if (!form || form.getAttribute('data-formid') !== '123') { return; } Fancybox.show([ { src: '#modal-response', type: 'inline' } ]); });document.addEventListener('wpformsAjaxSubmitSuccess', function (event) { const form = event.target; if (!form || form.getAttribute('data-formid') !== '123') { return; } Fancybox.show([ { src: '#modal-response', type: 'inline' } ]); });
Если AJAX у WPForms выключен, после успешной отправки обычно происходит перезагрузка или показ confirmation-сообщения. Тогда модалку лучше открывать через confirmation HTML/редирект с параметром, либо включить AJAX в настройках формы.
Старый код на
form.addEventListener('submit')лучше убрать полностью, иначе он всё равно будет открывать окно до проверки формы.