В предыдущей статье мы полностью завершили подготовительный этап. Создали альтернативный шаблон материала Joomla и настроили его вывод на всех страницах сайта, где хотим в дальнейшем видеть нашу форму, проверили его работу и убедились, что все готово к публикации нашей будущей формы.

В этой статье мы создадим саму форму обратной связи «задать вопрос» с помощью компонента Chrnoforms 6 со всеми полями, которые будут заполняться пользователем на сайте, произведем их настройку.

Форма предельно проста и полей в ней немного. Поэтому для более опытных мастеров эта статья, скорее всего, не представит практического интереса. Но для тех, кто только начал осваивать компонент Chronoforms, будет полезно лишний раз потренироваться на таком вот простом примере.

Создание front-end части формы в Chronoforms 6 и настройка ее визуальных элементов

Для того, чтобы создать новую форму, нужно в главном меню панели управления Joomla выбрать пункт «Компоненты», а затем  пункт второго уровня «ChronoForms6». Здесь расположена панель управления компонентом, ее стартовая страница — «Менеджер форм».

Создадим новую форму нажатием на кнопку главного (горизонтального) меню «Создать» и выберем режим создания «расширенный». По клику на режим создания формы открывается окно ее редактирования на главной странице с базовыми настройками.

Страница основных настроек формы обратной связи Chronoforms6

Рис. 1

Здесь нам нужны только два поля «Заголовок» и «Алиас». Заголовок заполняется вручную и может быть прописан, как на латинице, так и на кириллице. Алиас же является идентификатором формы, который используется для ее публикации всеми предусмотренными разработчиками компонента способами, а также для обращения к ней скриптов. Поэтому нужно проследить, чтобы он был представлен в данном поле именно на латинице, без пробелов и спецсимволов. Это поле заполняется автоматически по нажатию на кнопку «Сохранить» и если вы присвоили имя форме на кириллице, то ее поле «Алиас» нужно будет исправить вручную.

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

Далее переходим во вкладку «Конструктор» (или «Дизайнер» — кому как больше нравится) и приступаем к созданию визуальной части формы обратной связи «Задать вопрос».

Область секции формы во вкладке «Конструктор» в редакторе Chronoforms6 для расположения элементов

Рис. 2

Здесь при создании формы автоматически генерируется первая секция (область тела формы светло-зеленого цвета). Сюда и добавим все необходимые визуальные элементы.

На нашей форме будет всего семь элементов:

  1. Имя — элемент «Text field» из группы «Fields».
  2. E-mail — элемент «Text field» из группы «Fields».
  3. Текстовое поле для сообщения — элемент «Textarea» из группы «Fields».
  4. Капча для защиты формы — элемент «Google reCaptcha» из группы «Security».
  5. Контейнер для кнопок — элемент «Multi field area» из группы «Areas».
  6. Кнопка «Отправить» — элемент «Button» из группы «Fields».
  7. Кнопка «Очистить» — элемент «Button» из группы «Fields».

После их расположения в области секции получим  следующее:

Расположение полей формы обратной связи Chronoforms6 «задать вопрос» в конструкторе

Рис. 3

Форму пора снова сохранить и преступить к настройке этих полей.

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

Теперь пройдемся по всем нашим полям.

Настройка поля «Имя» (на рис. 3 это метка имени блока черного цвета «field_text1»; далее будем ориентироваться при настройке визуальной части формы по таким меткам и типам элементов):

  1. Прописываем метку и текст в поле по умолчанию (в основных настройках) элемента.
  2. Поле обязательное, поэтому ставим во вкладке «Валидация» соответствующий флажок.
  3. Поле должно быть заполнено на кириллице, без цифр. Значит нужна проверка. Во вкладке «Валидация»  редактора элемента заполняем поле «Правила валидации».
  4. Помимо прочего, необходимо определить и размер поля. Переходим во вкладку «Дополнительно» и устанавливаем необходимый размер элемента в поле «Ширина».

Поле «E-mail» (field_text2). Тип поля такой же, как и у поля «Имя», поэтому настройки будут во многом похожи:

  1. Присваиваем метку и текст в поле по умолчанию в основных настройках.
  2. Поле также обязательное, и кроме того, здесь нам нужна проверка e-mail. Переходим во вкладку «Валидация» и настраиваем здесь всё соответствующим образом.
  3. Размер элемента по ширине определяем во вкладке «Дополнительно».

Поле «Сообщение» (field_textarea3):

  1. Присваиваем метку и текст в поле по умолчанию в основных настройках.
  2. Поле обязательное, и неплохо бы ограничить длину самого сообщения. Все эти настройки устанавливаются также во вкладке «Валидация».
  3. Как и у предыдущих полей, устанавливаем необходимый размер элемента во вкладке настроек «Дополнительно».

Поле каптчи (google_nocaptcha4) имеет всего одну настройку и ее значение, «Сайт-ключ», нужно взять из своего аккуанта Google. Те, кто еще не сталкивался с этим элементом защиты от спама при работе с Chronoforms, могут прочесть достаточно подробную статью о нем в разделе «Документация».

Настройки контейнера для кнопок (area_fields5) можно не трогать и оставить как есть.

Кнопка «Отправить» (field_button6):

  1. Эта кнопка будет использоваться для отправки заполненной формы на сервер, поэтому для нее должен быть установлен тип «submit» во вкладке основных настроек.
  2. Здесь же, во вкладке «Основные настройки», установим текст кнопки и выберем ее цвет.

В данном конкретном примере формы мы используем дефолтные настройки стилей. Но вообще, стилизация кнопки, как впрочем, и любого элемента формы, может быть изменена веб-мастером по своему усмотрению. Для этого достаточно добавить в существующие поля классов свой класс и прописать для него свои, уникальные значения свойств css. Как это сделать, можно прочесть здесь.

Кнопка «Очистить» (field_button7) отличается от кнопки отправки только типом. Во всем остальном приемы настройки те же.

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

Для этого нужно сохранить форму, закрыть редактор и перейти в панель управления Joomla. Далее, «Расширения» — «Модули».

Здесь нужно создать новый модуль с типом «Chronoforms6».

Создание модуля формы с типом Chronoforms6 в панели управления модулями Joomla

Рис. 4

Главное, что нам нужно указать, это алиас формы и ее позицию. Алиас берется и копируется из соответствующего поля формы (см. рис. 1) либо в списке форм. А позицию в списке выбираем ту, которую создавали на этапе подготовки альтернативного шаблона. Т. к. в прошлый раз мы всё  настроили и даже вывели тестовый модуль (убедившись, что всё работает), то после публикации текущего модуля формы, она должна сразу появиться на соответствующих страницах сайта. (Тестовый модуль больше не нужен и его можно убрать.)

У себя на сайте я вижу следующее:

Вывод формы «задать вопрос» в позиции альтернативного шаблона на сайте Joomla

Рис. 5

Выглядит неплохо, но кнопки надо бы «подтянуть» да и ширину текстовых полей можно немного увеличить.

Заглянула в инструменты разработчика браузера «Opera» и решила, что меня вполне устроит некоторая правка стилей общего для обеих кнопок контейнера с классом «two fields» и идентификатором «area_fields_5». Ради формы, которая будет отображаться лишь на некоторых статьях, не обязательно добавлять лишние строчки в  общий файл стилей шаблона сайта. Вместо этого можно воспользоваться штатными средствами самого Chronoforms.

Для этого нужно снова открыть форму для редактирования, перейти во вкладку «Конструктор» и добавить в область формы элемент «Css» (я добавила его наверх, но каких-либо особых ограничений к его расположению нет).

Пользовательская стилизация проекта формы в Chronoforms6 «задать вопрос» в конструкторе

Рис. 6

Пара строчек — и кнопки на месте. Ширину текстовых полей раздвинула до 38% и получилось вот что:

Результат применения пользовательской стилизации формы обратной связи «задать вопрос»

Рис. 7

Уже лучше, но чтобы полностью подогнать форму под стили сайта, нужно все же больше потрудиться. Однако, нас в данном примере интересует исключительно функционал, поэтому двигаемся дальше.

Выбор и настройка функционала формы, работающего на стороне сервера

Выбор и настройка основных функций любой формы в Chronoforms 6 осуществляется во вкладке «Настройка», где при создании каждого нового проекта  автоматически сгенерируются два дефолтных события формы «load» и «submit» и некоторые функции-обработчики уже включены в тело их кода (представлены, как элементы внутри областей светло-зеленого цвета).

Автоматически генерируемый функционал при создании любой формы в компоненте Chronoforms6

Рис. 8

Но в нашем случае этого набора обработчиков недостаточно и, исходя из нашей задачи, нам нужно сделать примерно следующее:

  1. Настроить вывод формы. А она будет выводиться в модальном окне кликом по кнопке «Задать вопрос».
  2. Подключить функционал выбранного антиспама Google reCaptcha.
  3. Обеспечить вывод сообщения для пользователя об успешной отправке формы.
  4. Предусмотреть возможность отправки администратору сообщения с вопросом пользователя. Здесь произведем все основные настройки соответствующей функции-обработчика.

Теперь по порядку.

Настройка вывода формы обратной связи в модальном окне достаточно проста. Она осуществляется во вкладке «Окно» функции «Display Section», открытой для редактирования. У нас это элемент с именем «display_section1». В поле «Модальное окно» устанавливаем значение «Да». А дальше перебираем различные варианты отображения (показывать при загрузке или через установленный промежуток времени; по скроллингу вниз; по клику), какие вам больше понравятся. Если выбрали какой-то один вариант, то поля остальных, соответственно, оставляем пустыми.

Для нашей формы наиболее оптимальный способ отображения «Показать по клику…». Значит, заполняем поле, указывая идентификатор элемента, по которому пользователь будет кликать. Например, «#element_id» или «.element_class» (без кавычек). Далее заполняем поле «Замена» html-кодом элемента, идентификатор которого обозначили в поле выше. Остальные настройки полностью на ваше усмотрение и вы можете пробовать различные значения, подбирая оптимальный для вас вариант. Моя вкладка «Окно» выглядит так (все настройки, которые изменяла, выделила красным):

Настройка функции-обработчика Display Section в проекте формы Chronoforms6

Рис. 9

В качестве элемента-триггера, по которому будет кликать пользователь, я решила взять кнопку. Присвоила ей тип «button», идентификатор «button8» (следующий порядковый номер после последней кнопки формы) и все необходимые для стилизации атрибуты как у типовых кнопок в Chronoforms 6.

Кнопка взята в качестве триггера исключительно для личного удобства: ничего не нужно искать или создавать, настраивать. И она существует только здесь, в настройках обработчика, и будет отображаться на странице, уже сгенерированная скриптом и стилизованная таблицами css самого компонента. Между тем, в качестве подобного триггера можно взять абсолютно любой элемент DOM, уже имеющийся на странице. Даже указывать его html-код (а, тем более, дублировать его) не нужно. Главное — это правильно указать его селектор в поле «Показать по клику…».

Остальные настройки элемента «display_section1» оставляем как есть.

Теперь сохраняем и проверяем, что получилось.

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

Рис. 10

Уже неплохо. Но, идем дальше.

Подключение проверки капчи Google reCaptcha на формах chronoforms 6 осуществляется выбором обработчика «Check Google reCaptcha» в группе «Security» и размещением его в теле кода события «submit». В нашем случае поместить этот обработчик нужно ниже функции с именем «validate_fields2». А для того, чтобы процесс дальнейшей обработки формы действительно прекращался в случае неудачного результата проверки, нужен еще один элемент — функция «Event loader». Берем ее из группы «Basic» и помещаем в область собственного события «fail» функции «Check Google reCaptcha».

Настройки обработчика «Event loader» оставим по умолчанию, как есть. О том, как работает этот элемент и для чего он нужен, можно прочесть здесь.

На данный момент область события «submit» формы выглядит так:

Настройка каптчи «Check Google reCaptcha» в области события submit

Рис. 11

Осталась настройка самой функции «google_nocaptcha4». Здесь понадобится секретный ключ от Google, который нужно скопировать и вставить в поле основных настроек «Секретный ключ». Также нужно прописать текст в поле «Сообщение об ошибке».

В результате получается:

Основные поля настроек обработчика «Check Google reCaptcha» в Chronoforms6

Рис. 12

Сохраняем форму и двигаемся дальше.

Для настройки сообщения с подтверждением успешной отправки формы на сайте нам понадобится функция «Message» из группы «Basic». Разместим ее в область собственного события «success» функции-обработчика «google_nocaptcha4» и настроим следующим образом:

Поля выбора опций обработчика «Message» из группы «Basic» во вкладке «Настройка»

Рис. 13

Текст в поле «Контент» может быть любым, от простого «спасибо» до html-кода. Главное, чтобы он был, т. к. это поле является обязательным.

Форму можно сохранить и снова проверить ее работу на сайте.

Теперь остался последний шаг на этом этапе — установка и настройка отправки сообщения с сайта с вопросом пользователя. Для этого нам понадобится функция «Email» (опять же, из группы «Basic»). Ее также размещаем в области собственного события «success» обработчика «google_nocaptcha4», только уже над предыдущим элементом «message6».

После добавления этого последнего обработчика тело события «submit» будет выглядеть следующим образом:

Расположение функции «Email» в области собственного события success обработчика google_nocaptcha4

Рис. 14

Теперь настроим функцию «email7»:

Настройка функции «Email», отвечающей за отправку сообщения пользователя администратору

Рис. 15

Обратите внимание на то, что при указании команд chrono syntax (или шоткодов) должны использоваться правильные имена соответствующих полей. Искать их нужно в общих настройках каждого из элементов во вкладке «Конструктор» редактора форм.

Синтаксис команд вот такой: {data:field_name}

Теперь форму можно сохранить и окончательно убедиться, что она работает при попытке отправить сообщение.

Если мы все сделали правильно, то:

  • форма должна отображаться по клику в модальном окне;
  • при ошибочном заполнении любого из полей должна срабатывать штатная валидация;
  • должна отображаться и правильно срабатывать капча от Google;
  • при безошибочном заполнении всех полей на сайте должно отображаться сообщение для пользователя с подтверждением отправки.
  • также при отправке формы мы должны получить сообщение со всеми, прописанными в теле письма, значениями полей и темой «Тестирование формы „Задать вопрос“» (или с той, которую вы указали).

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

В следующей статье мы разберем несколкьо способов получения даннах из материала Joomla и применим их к нашей форме.

 
Комментарии
  • #
  • Александр
Подскажите, как просто вывести пояснительный текст между полями (нет такого элемента) и как озаглавить сегмент. Хочется, чтобы группа полей была обведена рамкой и в разрыве рамки было название этой области. Что-то в стиле виндовс95 :-)
  • #
  • Vilza
Вывести пояснительный текст можно разными способами.
Большинство из них описано https://chronoforms.net/manuals/polzovatelskij-kod-i-dopolnitelnaya-stilizatsiya-v-chronoforms
Для отбивки линиями каких-то логических блоков формы в CF6 есть специальный элемент Divider из группы Widgets. При желании туда можно и заголовок вбить (принимает стилизацию вашего шаблона сайта автоматически).
Есть еще один инструмент, специально для вывода сообщений Message box из Areas. Там есть возможность настройки стилизации контейнера.
По поводу стиля "виндовс95" и любого другого стиля - добавляете свой CSS класс к любому элементу и прописываете для него стили, какие угодно. "Родной" класс лучше не трогать. В противном случае придется еще и всю стилизацию бутстрапа к этому элементу добавлять.
  • #
  • Vilza
По поводу пояснительного текста под полями - это в редакторе настроек поля, во вкладке "Инфо". Там прописываете все необходимое и под полем добавляется еще один DOM-элемент. Small, кажется. Он и будет содержать весь ваш пояснительный текст.
Добавить комментарий