Сегодня сделаем форму обратной связи в модальном (всплывающем) окне с помощью CSS Modals на AJAX.
В последних обновлениях модуля Форма обратной связи + конструктор форм я сделал возможность подключать jQuery-плагин модального окна CSS Modals отдельной опцией, что дает возможность даже без копирования шаблона сделать любую форму в модальном окне.
К сожалению, внедрить в шаблон популярные плагины модальных окон нет пока возможности, т.к. при аякс-запросах полностью перезагружается верстка шаблона, т.е. вся разметка и модальное окно опять открывается и выглядит это некрасиво, мерцает как бы окно, а в моем варианте все будет ровно и красиво без мерцаний.
Итак, что нужно сделать по шагам:
- Сначала в настройках компонента обратной связи в разделе jQuery-плагины нужно включить CSS Modal и включить режим AJAX.
- Затем мы разберемся с компонентом обратной связи, обернем его разметкой модального окна в файле footer.php шаблона сайта.
- Затем в любом места сайта сделаем кнопку, по которой и будем вызывать это модальное окно формы, которое будет доступно абсолютно на всех страницах сайта.
Код вызова модального окна формы обратной связи
Итак, включаем плагин CSS Modal в настройках компонента:
Обязательно включаем режим AJAX (форма будет работать без перезагрузки страницы):
Теперь нам нужна разметка модального окна, можете взять ее со страницы плагина CSS Modals в блоке Markup, но у меня стили в модуле применены для немного другой разметки, в место html5-тегов header и footer я применил в модуле стили для блоков div с классами modal-header и modal-footer, но работать будет любой вариант.
<div class="modal--show" id="modal-feedback" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<div class="modal-header"><!-- Header --></div>
<div class="modal-content"><!-- The modals content --></div>
<div class="modal-footer"><!-- Footer --></div>
</div>
<a href="#!" class="modal-close" title="Закрыть" data-close="Close" data-dismiss="modal">?</a>
</div>
А теперь остается заполнить три блока нужными нам данными:
modal-header - тут заголовок формы.
modal-content - тут php-код вызова компонента обратной связи.
modal-footer - тут текст под формой, можно опустить, если не нужен.
Это полностью итоговый код разметки модального окна:
<div class="modal--show" id="modal-feedback" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<div class="modal-header">Обратная связь</div>
<div class="modal-content">
<?$APPLICATION->IncludeComponent(
"api:main.feedback",
".default",
array(
"COMPONENT_TEMPLATE" => ".default",
"IBLOCK_TYPE" => "catalog",
"IBLOCK_ID" => "",
"INSTALL_IBLOCK" => "N",
"IBLOCK_ELEMENT_ACTIVE" => "N",
"DISABLE_SEND_MAIL" => "N",
"REPLACE_FIELD_FROM" => "Y",
"UNIQUE_FORM_ID" => "5513128184581",
"OK_TEXT" => "Спасибо, ваше сообщение принято!",
"EMAIL_TO" => "support@tuning-soft.ru",
"REDIRECT_PAGE" => "",
"DISPLAY_FIELDS" => array(
0 => "AUTHOR_NAME",
1 => "AUTHOR_EMAIL",
2 => "AUTHOR_MESSAGE",
),
"REQUIRED_FIELDS" => array(
0 => "AUTHOR_NAME",
1 => "AUTHOR_EMAIL",
2 => "AUTHOR_MESSAGE",
),
"CUSTOM_FIELDS" => array(
),
"ADMIN_EVENT_MESSAGE_ID" => array(
0 => "29",
),
"USER_EVENT_MESSAGE_ID" => array(
0 => "30",
),
"HIDE_FIELD_NAME" => "N",
"FIELD_SIZE" => "default",
"TITLE_DISPLAY" => "N",
"FORM_TITLE" => "Обратная связь",
"FORM_TITLE_LEVEL" => "2",
"DEFAULT_OPTION_TEXT" => "-- Выбрать --",
"FORM_SUBMIT_CLASS" => "uk-button",
"FORM_SUBMIT_VALUE" => "Отправить",
"BUTTON_TEXT_BEFORE" => "",
"FORM_TEXT_BEFORE" => "",
"FORM_TEXT_AFTER" => "",
"TEMPLATE_STYLE" => "uikit",
"USE_HIDDEN_PROTECTION" => "Y",
"USE_CAPTCHA" => "N",
"INCLUDE_JQUERY" => "N",
"INCLUDE_PLACEHOLDER" => "Y",
"INCLUDE_AUTOSIZE" => "N",
"INCLUDE_FORM_STYLER" => "Y",
"HIDE_FORM_AFTER_SEND" => "N",
"SCROLL_TO_FORM_IF_MESSAGES" => "Y",
"SCROLL_TO_FORM_SPEED" => "1000",
"INCLUDE_VALIDATION" => "N",
"BRANCH_ACTIVE" => "N",
"SHOW_FILES" => "N",
"UUID_LENGTH" => "10",
"UUID_PREFIX" => "",
"USE_YM_GOALS" => "N",
"AJAX_MODE" => "Y",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"USER_AUTHOR_FIO" => "",
"USER_AUTHOR_NAME" => "",
"USER_AUTHOR_LAST_NAME" => "",
"USER_AUTHOR_SECOND_NAME" => "",
"USER_AUTHOR_EMAIL" => "",
"USER_AUTHOR_PERSONAL_MOBILE" => "",
"USER_AUTHOR_WORK_COMPANY" => "",
"USER_AUTHOR_POSITION" => "",
"USER_AUTHOR_PROFESSION" => "",
"USER_AUTHOR_STATE" => "",
"USER_AUTHOR_CITY" => "",
"USER_AUTHOR_WORK_CITY" => "",
"USER_AUTHOR_STREET" => "",
"USER_AUTHOR_ADRESS" => "",
"USER_AUTHOR_PERSONAL_PHONE" => "",
"USER_AUTHOR_WORK_PHONE" => "",
"USER_AUTHOR_FAX" => "",
"USER_AUTHOR_MAILBOX" => "",
"USER_AUTHOR_WORK_MAILBOX" => "",
"USER_AUTHOR_SKYPE" => "",
"USER_AUTHOR_ICQ" => "",
"USER_AUTHOR_WWW" => "",
"USER_AUTHOR_WORK_WWW" => "",
"USER_AUTHOR_MESSAGE_THEME" => "",
"USER_AUTHOR_MESSAGE" => "",
"USER_AUTHOR_NOTES" => "",
"SHOW_CSS_MODAL_AFTER_SEND" => "N",
"CSS_MODAL_HEADER" => "Расширенная форма обратной связи",
"CSS_MODAL_CONTENT" => "Модуль <b>Расширенная форма обратной связи битрикс с вложением</b> предназначен для отправки сообщений с сайта.<br>Отличается от стандартной формы Битрикс - отправкой файлов вложениями или ссылками на файл, скрытой защитой от спама, работой нескольких форм на одной странице, встроенным валидатором форм, красивым шаблоном, очень функциональным конструктором форм и мн. другими функциями, которые очень необходимы на каждом сайте.",
"CSS_MODAL_FOOTER" => "© Антон Кучковский, Тюнинг-Софт",
"SUBJECT" => "",
"PAGE_URI" => "",
"PAGE_URL" => "",
"PAGE_TITLE" => "",
"DIR_URL" => "",
"DATETIME" => "",
"DELETE_FILES_AFTER_UPLOAD" => "N",
"SEND_ATTACHMENT" => "Y",
"SET_ATTACHMENT_REQUIRED" => "N",
"COUNT_INPUT_FILE" => "3",
"FILE_DESCRIPTION" => "",
"MAX_FILE_SIZE" => "10000",
"SHOW_ATTACHMENT_EXTENSIONS" => "N",
"FILE_EXTENSIONS" => "txt, rtf, doc, docx, xls, xlsx, ods, odt, jpg, jpeg, bmp, png",
"UPLOAD_FOLDER" => "/upload/feedback",
"CHOOSE_FILE_TEXT" => "выбрать файл",
"INCLUDE_CSSMODAL" => "Y"
),
false
);?>
</div>
<div class="modal-footer">© Антон Кучковский, Тюнинг-Софт</div>
</div>
<a href="#!" class="modal-close" title="Закрыть" data-close="Close" data-dismiss="modal">?</a>
</div>
который Вам необходимо добавить в конце файла footer.php шаблона сайта, он по этому пути:
bitrix/templates/имя шаблона сайта/footer.php
Кстати, параметры компонента Вы сможете изменять двойным кликом по форме, когда модальное окно видимое, с этим все в порядке.
Если на сайте будет несколько форм, то обратите внимание, в коде вызова задан ID-модального окна id="modal-feedback", вот его и нужно будет менять в каждом коде вызова модального окна.
ID - это уникальный идентификатор, на всей странице он должен быть уникальным, единственным, т.е. у второй формы будет что-то такое id="modal-callback" и т.д.
Кнопка вызова модального окна
Итак, модальное окно у нас готово полностью, остается понять, как его вызывать, как к нему обращаться.
Вызывается модальное окно практически в любом jQuery-плагине одинаково, таким способом:
<a href="#modal-feedback" class="uk-button">Обратная связь</a>
Т.е. в атрибуте href="" ссылки необходимо указать идентификатор формы с хешем #, как на якорь в странице и модальное окно начнет открываться.
Все, форма в модальном окне будет отлично себя чувствовать и работать без мерцаний.
Заключение
Наглядно выглядеть это будет вот так, это наша кнопка:
А это форма уже в модальном окне:
Надеюсь это Вам поможет, будут вопросы, оставляйте комментарии, покупайте модуль, он реально клевый и очень гибкий в умелых руках;)