К сожалению, штатных инструментов у Chronoforms 5 для отображения форм обратной связи в модальном окне нет. Но есть два несложных способа настроить модальное окно для формы с помощью расширений Joomla.

Эти способы давно известны многим веб-мастерам и достаточно часто используются для вывода изображений, текста, видео и т. д.

Настройка модального окна для формы средствами самой Joomla

По умолчанию нативная поддержка модальных окон в Joomla отключена, поэтому ее нужно снова активировать с помощью такой строчки:

  <?php JHTML::_('behavior.modal'); ?>

Эту строчку можно разместить на выбор, либо в файле index.php текущего шаблона сайта, например, после строчки:

    <jdoc:include type="head" />

либо на самой форме, применяя код:

    <?php
                                // Подключаем фрэймворк
        JHtml::_('behavior.modal');    
                                // Вызываем текущий документ           
        $doc = JFactory::getDocument();    
                                // Создаем стили
         $style_A = "
        .chronoform.cf5popup {
          padding:1em;
        }";
                                // Подгружаем стили на страницу с формой
        $doc->addStyleDeclaration($style_A);
    ?>

Если подключаем поддержку окна прямо на форме, то необходимо открыть ее проект для редактирования, перейти во вкладку «Установка» и поместить в область события «On load» функцию «Custom Code» (взять ее можно в группе элементов слева «Basic») так, чтобы эта функция была расположена выше функции «HTML (Render Form)».

Затем, форму можно сохранить и закрыть.

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

Html-код ссылки должен быть таким:

    <a class="modal" href="index.php?option=com_chronoforms5&chronoform=имя_вашей_формы&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}">Купить</a>

Атрибут rel в данном случае позволяет задать размеры окна формы по умолчанию. Если нужно установить размеры в процентах, то к числу добавляется значок «%».

Если атрибут rel отсутствует, то в момент открытия модального окна размеры формы будут установлены автоматически, что сопровождается анимацией.

Теперь можно сохранить текущую страницу или модуль со ссылкой-триггером и проверить ее работу. Если все сделали правильно, то по клику на элемент-триггер должно открыться модальное окно с вашей формой обратной связи.

Модальное окно для формы на сайте Joomla с помощью плагина

Для этого способа настройки модального окна для формы потребуется плагин. Можно скачать плагин «Modals»  на сайте разработчика.

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

Сначала установим плагин («Менеджер расширений» — «Установка» в панели управления Joomla). Нужно проследить, чтобы во вкладке «Плагины» это приложение было включено (зеленая галочка). При его установке в редакторе контента Joomla появляется еще одна кнопка — «Modal». При нажатии на эту кнопку и определении всех необходимых параметров, к содержимому контента добавляется Html-код элемента-триггера, по клику на который будет открыто модальное окно с указанным для него содержимым.

Настройки формы в модальном окне можно прописать и вручную, используя код вставки:

{modal url="index.php?option=com_chronoforms5&chronoform=имя_вашей_формы&tmpl=component" width="60%" height="40%"}Купить{/modal}

Данные изменения в контенте можно сохранить и проверить как работает созданная с помощью плагина ссылка-триггер. Если все сделали правильно, то по нажатию на нее должно открываться модальное окно с формой обратной связи Chronoforms 5, имя которой было указано в параметре url.

 
Добавить комментарий