Новости могут быть интересными!

Форма обратной связи – модальное окно с ответом об успешной отправке письма

Форма обратной связи
Loading...

В данной статье я расскажу как решалась данная задача и что было сделано с подробным описанием шагов. Начну с вопроса, который возник во время разработки – “Как сделать так, чтобы при отправке письма с сайта, через форму обратной связи, пользователю показывалось модальное окно с надписью об успешной отправке, и далее перенаправить пользователя на необходимую нам страницу?”

Вот такой казалось бы не сложный вопрос, а решение оказалось не сильно-то и простым, а точнее не само решение, а как это реализовать на данной системе управления сайтом. Ну начнем.

Идей как решить данный вопрос было не мало, но все они провалились с треском, потому как переписывать кардинально функционал модуля или дописывать “кастомный” ужасно не хотелось да и некогда было. Ведь всегда хочется решать проблемы “малой кровью”, а не привлекать весь штат студии и переписывать модули системы. Почитав интернет, “хелпы” и статьи разные ничего подходящего тоже почему-то не нашлось. Ну я думаю – “А давай-ка мы спросим у разработчиков!” и бегом писать в поддержку. Ну думаю все, сейчас пришлют свои рекомендации и мы быстренько все сделаем. Жду… И вот долгожданный ответ, кстати замечу, что служба поддержки работает хорошо, так вот – ответ:

“Здравствуйте, Александр.
Стандартными средствами UMI.CMS такое сделать невозможно.К сожалению, у нас нет каких либо предложений или готовых вариантов о том как это возможно реализовать.
С уважением, специалист Службы Заботы о клиентах UMI.”

Я не то что бы в шоке, но удивлен не “кисло”. Думал хоть ссылку дадут. Но не стал расстраиваться и решил сам найти решение. И нашел. Сказать что оно идеальное – нет. Я думаю найдется много программистов, которые скажут: “Тут можно по другому”, “А чо так? Ведь можно это применить” и еще много возражений. Но на фоне того, что подобных решений на ЮМИ я вообще не бидел, то я думаю, что данная статья будет актуальной.

Ну а теперь по порядку. Для начала давайте разберемся как работает форма обратной связи. У нас есть форма и при успешном заполнении полей происходит отправка письма на указанные в админпанели адреса. В наборе шаблонов есть шаблон отвечающий за обработку и вывод сообщения об успешной отправке письма, называться он может по разному, но внутри шаблона обрабатывается “result” с условиями [@module = 'webforms'] и [@method = 'posted'] – это и есть шаблон, который отвечает за вывод результата для успешной отправки письма. С ним мы и будем работать. О чем это все говорит, что если “result” формируется с помощью модуля ‘webforms’ и метода ‘posted’, значит для вывода информации использовать данный шаблон. Внутри шаблона, среди кучи HTML кода мы вызываем результаты работы модуля ‘webforms’ и метода ‘posted’ следующим вызовом:

 

Здесь мы говорим, что в нужном нам месте необходимо выдать данные (“udata”), которые являются результатом работы данного модуля и метода. И по умолчанию фактически это и есть та самая надпись об успешной отправке. Но отображение маленькой надписи внутри большого сайта с кучей свободного места или белого пустого поля нас не устраивает. Да и пользователю необходимо после прочтения данной надписи дико порадоваться, а потом делать лишний “клик” мышкой и переходить куда-нибудь еще. С одной стороны ничего страшного в этом нет, а с другой стороны, если мы определились по разным соображениям делать ответ данного макроса в модальном окне, тогда читаем дальше.Что нам необходимо для модального окна. Во-первых само окно. Если “погуглить” или “пояндексить” или “пояхучить” :-) или “побингить” или просто поискать в большой паутине сети интернет, то можно много найти сайтов, где доступны данные скрипты для модальных окон с подробным описанием их использования. Но я вам порекомендую использовать те, которые базируются на JQuery т.к. данный фреймвёрк использует сама система и вам не нужно перегружать сайт подключениями многих различных библиотек. Так вот я остановился на таком плагине, как: “simplemodal”. На странице проекта детально все описано, поэтому заострять внимание на работе плагина не буду. Вообщем заходим на страницу плагина и качаем необходимые нам файлы. После загрузки архива файлов размещаем их в необходимых местах: скрипты к скриптам, таблицы стилей к таблицам. И не забываем их прописать в основном файле “лейауте” сайта, где подключаются все остальные скрипты и другие файлы. Для подключения скриптов пишем между тегами “HEAD”:

 

Обращаю ваше внимание на надпись “{$template-resources}” внутри ссылки. Данная надпись используется, если мы пользуемся новой организацией шаблонов в ЮМИ. Это своеобразная переменная, которая подставляет используемый шаблон, а точнее путь от корня сайта к директориям самого шаблона.

Далее необходимо подключить таблицу стилей (CSS файл), которая отвечает за оформление и отображение данного окна. В своей работе я стараюсь прислушиваться к рекомендациям различных авторитетных источников и по этому я не размножаю CSS файлы, а пишу все в одном. И в данном случае я так и поступил. Привожу пример кода для CSS файла для модального окна.

необходимые стили для модального окна

Далее возвращаемся к нашим XSLT шаблонам вывода ответа об успешной отправке. Ниже приведен шаблон, который срабатывает при вызове данных об успешной отправке. И мы в него помещаем скрипт, который и будет вызываться при вызове данного шаблона:

XSLT шаблон для вызова модального окна

Ниже самого скрипта мы прописываем то самое модальное окно, которое по умолчанию будет скрыто “display:none;”. Как только будет вызван данный шаблон для обработки, то скрипт который будет запущен отобразит нам данное окно.
Если внимательно посмотреть на сам скрип, внутри скрипта мы видим вызов

 

который и выводит то самое сообщение, и подставляет его в слой нашего модального окна. Далее расположена ссылка закрыть, которая нас отправляет на главную страницу. Кстати если вы считатете, что пользователя не нужно отправлять на главную страницу, и у вас есть свои мысли по данному поводу – пожалуйста, отправте пользователя куда угодно, просто прописав путь в ссылке.

Пример работы данного скрипта можно увидеть по данной ссылке. Данное решение работает непосредственно на нашем сайте, поэтому убедительная просьба – испытуя как это работает, не отправляйте кучу спама в наш адрес! Лучше напишите нам чего-нибудь полезное или приятное и заодно проверите как это работает.

P.S. Кстати таким же образом можно организовать саму форму обратной связи и результат отправки письма в модальном окне.

 

p.s. Рады, что вы читаете Интересные-новости в нашем издании. Предлагаем поделиться ссылкой на наш сайт, пусть друзья узнают интересное от ledilid.com

Оставить комментарий