Форма в модальном окне

Версия MODX: Все

Я не очень глубоко с разработкой, поэтому немного сложно врубиться сходу.
Задача: делать форму обратной связи в модальном окне. То есть: открывается модальное окно. Там три поля (имя, почта, текст с проверкой на заполнение) и капча (которая жамкнуть галочку recaptchav2). Ну и этот текст уходит на почту и в БД сохраняется имя и почта. О чем пользователю выскакивает окошко «Спасибо, мессага отправлена»

Из инструментов есть: bootstrap 4, Formit, AjaxForm и fancybox.
Из проблем: бутстраповские окно и форма как раз то, что надо по внешности и функционалу. Но в остальном все рботает криво-косо.

Может есть какой-то простой рабочий код на эту тему или объяснение. как оно работает. Из первых трех страниц гугла на эту тему не работает ничего. В лучшем случае кнопка «Отправить» закрывает модальное окно без всякой проверки и если там все ок, то письмо доходит. При следующем открытии формы, там лежат предыдущие буквы и камменты валидатора полей. Капча не появляется вообще. (Это связка Ajax + Bootstrap).

Константин
24.02.19 в 18:02

Комментарии (7)

Алексей Либер 24.02.2019 20:23 #

Не могу понять: на реКаптче что ли весь мир клином сошелся? Мало того что она интегрируется с трудом, мало того что она бесит пользователей и вы получаете отказы, так она еще и не является панацеей от спама.
Вот два менее замороченных решения для отсеивания спама на этом сайте:
https://modx.ru/novosti-i-stati/article/382/
https://modx.ru/novosti-i-stati/article/361/
На счет FormIt + AjaxForm. Все-таки стоит отметить их преклонный возраст. И порою да, они глючат. Не копался в причинах, но такое имеет место быть.
Тем не менее — вам никто не запрещает написать свой сниппет для отправки и написать свой код для аякса, закрытия окна и ресета формы, если не получается стандартными средствами.
Не стоит зацикливаться на стандартных компонентах MODX, можете посмотреть в сторону связки php + jQuery. Вот этого добра в инете полно. Да и про то как интегрировать все это добро в MODX тоже написано не мало.
1. Константин 24.02.2019 22:16 #
  
  Про антиспам спасибо!
  Про написать самому — ну приятно, что в меня верят, но я не настолько в теме =)
  Комментарий был изменён 24.02.2019 в 22:33
Павел Романов 24.02.2019 20:59 #
У Вас есть все, что нужно для реализации. Не совсем понятно в чем проблема ))

Например, fancybox.
Есть ссылка и скрытый блок, в котором вызов AjaxForm:
```
<a data-fancybox data-src="#feedback" href="javascript:;">
	Обратная связь
</a>
<div style="display:none" id="feedback">
    [ [!AjaxForm?
    &form=`feedback_form`
    &emailTpl=`feedback_email`
    &hooks=`spam,email`
    &emailSubject=`Сообщение с сайта `
    &emailTo=`....`
    &emailFrom=`noreply@sitedomain.ru`
    &validate=`email:email:required,message:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Ваше сообщение отправлено.`
    ] ]
</div>
```
Чанк feedback_form:
```
<form action="[ [~[ [*id] ] ] ]" method="post" enctype="multipart/form-data">
    <input name="name" type="text" placeholder="Имя"/>
    <input name="email" type="text" placeholder="Email"/>
    <textarea name="message" style="height:80px" placeholder="Текст сообщения"></textarea>
    <button>Отправить</button>
</form>
```
Чтобы окно закрывалось, когда форма успешно отправлена, добавьте на страницу скрипт:
```
$(document).on('af_complete', function(event,res) {
	if(res.success){
	    $.fancybox.close();
	}
});
```
Что касается рекапчи, полностью согласен с Алексеем.
Вот это его решение особенно понравилось ))
Комментарий был изменён 24.02.2019 в 21:02
1. Константин 24.02.2019 22:33 #
  
  Ну ваш вариант я пробовал и он не рабочий в моем случае. Можно забить что угодно и он молча закроет окошко.
  Второй момент, который смущает сообщение при перезагрузке страницы:
  The page that you're looking for used information that you entered. Returning to that page might cause any action that you took to be repeated. Do you want to continue?
  (Инфа которую забил в поля формы, остается в полях формы при следующем открытии.)
  Попробую завтра все еще раз с чистого листа. Но вроде и на этом этапе лист вполне чистый.
  Комментарий был изменён 24.02.2019 в 22:34
  1. Павел Романов 24.02.2019 23:13 #
    
    Вариант абсолютно рабочий: rpa-design.ru/aftest.html
    
    А по ошибкам смотрите консоль браузера — там скорее всего много интересного ))
Максим Литвинов 25.02.2019 09:33 #

Почему не работает? Вы что контент модалки аяксом подтягиваете? Сделайте просто скрытый блок под футером в котором вызывайте AjaxForm, который будет отображаться средствами fancybox inline, а дальше уже все выше описано.
1. Константин 25.02.2019 10:32 #
  
  Я не знаю почему не работает. В целом ни при каких условиях, ни с какими простыми сценариями в полной мере заставить это работать не удалось.<br />
  Фэнси бокс открыл нормально мне форму один раз, потом просто стал выдавать ошибку. Даже если там все оставить по дефолту и написать три буквы вместо формы.
  Как я понял, основной трабл, что при нажатии кнопки форма закрывается, что бы в ней ни было. Если там все ок, то есть шанс получить письмо.
  Возможно бодаются какие-то скрипты? Такое может быть? Но скриптов у меня минимум.
  Консоль ругается на document.write из аякса.
  Попробую с чистого листа еще раз. Может заработает. Может идеи появятся.

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.