Меню Рубрики

Установка chronoforms для joomla

Установка chronoforms для joomla

В этом уроке будет показано, как создавать любые формы для CMS Joomla с помощью компонента Chronoforms.

Chronoforms – это мощный бесплатный компонент для быстрого создания форм любой сложности для сайта на основе CMS Joomla. В уроке мы покажем создание формы бронирования для туристического сайта.

В конце урока мы создадим форму, которая будет выглядеть, как на рис. 1.

Рис. 1. Форма бронирования отеля.

Эта форма состоит из каптчи и следующих полей, которые должен заполнить пользователь:
Имя, телефон, E-mail, дата заезда, дата выезда, количество взрослых, количество детей, тип номера, дополнительные вопросы-пожелания, кнопка «Забронировать».

Имеется ввиду, что Вы уже установили компонент Chronoforms. Если Вы этого еще не сделали, то нужно скачать компонент и плагин Chronoforms по этой ссылке: http://www.chronoengine.com/downloads.html. Потом нужно в панели администратора установить компонент и активировать его.

Посмотреть, как это делается, можно на примере уроков о других компонентах, например, здесь: http://www.joomla-master.com/lessons/joomla-components/30-joomlapackinstall.html

В панели администратора CMS Joomla компонент Chronoforms находится в пункте меню «Компоненты». Чтобы начать создание формы, нужно выбрать Chronoforms – Form Wizard (рис. 2).

Рис. 2. Выбор помощника формы (Form Wizard).

После этого откроется Form Wizard, с помощью которого можно будет создать любую форму и настроить ее. Создание формы будет состоять из 4 шагов. Сначала на первом шаге (Step 1) нужно будет создать основной дизайн формы с всеми полями.

Начнем с заголовка формы. Для этого в Form Wizard справа выбираем «Heading» и перетаскиваем в рабочую область, в которой будем создавать форму. Появится прямоугольник с надписью «Click me to Edit». Нужно кликнуть по ему и в нижнем правом углу под названием Properties вводим текст и вложенность заголовка. Потом нажимаем кнопку Apply (рис. 3).

Мы создадим два заголовка «Частная усадьба» и «Заявка на бронирование».

Рис. 3. Step 1. Создание заголовка формы.

Теперь создадим поля для «Имя: *», «Телефон: *» и «E-mail:».

Для этого справа на панели Toolbox выбираем TextBox и перетягиваем в рабочую область. Это делаем для всех трех полей, но можно и сделать после заполнения предыдущего поля.

Покажем в деталях создание поля для «Имя: *» (см. рис. 4).

Рис. 4. Step 1. Создание поля для поля «Имя: *».

Кликаем по нашему прямоугольнику с надписью «Click me to Edit» и в меню Properties напротив Label: вводим «Имя: *», и снизу – размеры полей.
Заметьте, что мы некоторые поля делаем обязательными для заполнения и ставим около них значок «*». Поэтому, для обязательных полей нужно поставить галочку напротив опции Required для Validation.

Потом можете ниже напротив Validation вписать сообщение, которое появится, если пользователь неправильно введет имя. А напротив Tooltip можно ввести всплывающую подсказку. В конце нужно ввести имя элемента напротив Field Name (в нашем случае – name) и нажимаем кнопку Apply.

Аналогично делаем для «Телефон: *» и «E-mail:». Но в случае с «Телефон: *» нужно дополнительно поставить галочку напротив «Numbers Only», чтобы пользователь вводил только цифры. Также для «E-mail:» ставим галочку напротив Email для проверки правильного ввода E-mail.

Чтобы создать поля для «дата заезда» и «дата выезда» удобно использовать DateTimePicker. Для этих полей перетягиваем DateTimePicker на рабочую область (рис. 5), кликаем по их и вводим в Properties напротив Label «Дата заезда: *» и «Дата выезда: *» соответственно (не забываем нажать кнопку Apply).


Рис. 5. Step 1. Создание областей для «Дата заезда: *» и «Дата выезда: *»

Поля для «количество взрослых», «количество детей» и «тип номера» делаются аналогично как для имени и телефона.
Поле «Дополнительные вопросы — пожелания:» можно сделать с помощью TextArea, перетянув его с Toolbox на рабочую область. Здесь вводим значения для Label и нажимаем Apply (рис. 6).


Рис. 6. Step 1. Создание области для «Дополнительные вопросы — пожелания:».

Желательно создать на форме каптчу – картинку, которая бы защищала форму от спам-роботов. Для этого в Toolbox выбираем Captcha, перетягиваем ее на рабочую область, вводим текст «Введите защитный код» в значение Label и нажимаем кнопку Apply (рис. 7).

Теперь осталась кнопка «Забронировать». Чтобы ее создать, берем с Toolbox кнопку Button, перетягиваем ее в самый низ рабочей области, вводим текст «Забронировать» в значение Label и нажимаем кнопку Apply (рис. 7).


Рис. 7. Step 1. Создание каптчи и кнопки «Забронировать».

Теперь дизайн нашей формы создан. Чтобы при нажатии кнопки «Забронировать» введенные пользователем данные отправлялись Вам на почту, нужно настроить адрес вашей почты в Form Wizard. Это делается в шаге 2 (Step 2).

источник

Установка и настройка Chronoforms 5

Chronoforms — не слишком простой в освоении, но достаточно удобный компонент для создания форм обратной связи.

У расширения Cronoforms 5 для Joomla 2.5–3.x стало еще больше полезных возможностей. Здесь появились несколько новых вариантов антиспама. Пользовательская настройка обработчиков событий стала более удобной. Реализовали возможность добавления стилей в меню настройки почти каждого элемента. А главное, разработчики компонента расширили возможности функционала по работе форм обратной связи с базой данных сайта.

На данный момент разработка приложения Chronoforms 5 полностью завершена, а значит можно смело настраивать его «под себя».

Установка компонента Chronoforms 5

Установка компонента Chronoforms 5 осуществляется, как обычно, через менеджер расширений Joomla 3. Последовательность инсталляции файлов дистрибутива Chronoforms_V5.0_Component_RC6.zip, Chronoforms_V5.0_Plugin_RC1.zip и Chronoforms_V5_Module_RC1.1.zip не важна.

Далее необходимо включить установленный плагин для того, чтобы можно было выводить созданные формы в теле страниц сайта. Плагин находится в списке прочих в панели управления Joomla 3 («Расширения» — «Плагины»). После этого наши формы можно размещать где угодно с помощью кода вставки < chronoforms5 >my_form_name < /chronoforms5 >.

Как отключить копирайт на формах Chronoforms 5?

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

Читайте также:  Установка производства битума на нпз

Собственно, от него нет никакого вреда — просто раздражает.

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

В файле www\components\com_chronoforms5\chronoforms\chronoforms.php ищем код:

В файле www\administrator\components\com_chronoforms5\chronoforms\chronoforms.php нужно сделать то же самое. В более возднем билде 5.0.17 функция та же, но без параметра. Найти ее можно, приблизительно, в строке 721. В ее коде нужно сделать исправления, аналогичные здесь описанным.

Теперь и проверка лицензии, и генерация копирайта отключены.

Русификация всплывающих подсказок на форме Chronoforms 5

Начиная от версии v.5.0.16 и до самой новой русификация всплывающих подсказок на форме Chronoforms 5 не требуется. Компонент уже поддерживает мультиязычный перевод в его библиотеке «gecore» уже присутствует русская локализация всплывающих сообщений валидации. Поэтому ничего здесь делать не нужно, а только проследить, чтобы в создаваемых формах («Мастер формы» — последняя вкладка «Validation») в настройке переключения языков было установлено значение «Dynamic» (динамическое определение языка). Тогда для всплывающих подсказок валидации будет использоваться язык сайта по умолчанию.

Посмотреть весь список поддерживаемых языков можно в папке www\libraries\cegcore\assets\gplugins\gvalidation\lang .

А тем, кто еще не успел обновиться, необходимо открыть файл www\libraries\cegcore\assets\gplugins\gvalidation\gvalidation.js . Там, начиная со строки 15 прописаны значения всех дефолтных туллтипов. Переводим их, сохраняем, проверяем. Теперь всплывающие тултипы валидации будут отображаться на русском языке.

Русификация компонента Chronoforms 5

Самостоятельная русификация компонента Chronoforms 5 подробно описана в разделе «Документация». Для тех, кто не планирует этим заниматься, предлагаем наш частичный русификатор.

Поддержка кириллицы в текстовых полях форм Chronoforms 5

Несмотря на реализацию общей мультиязычности в последних версиях, поддержка кириллицы в текстовых полях форм Chronoforms 5 не предусмотрена. Поэтому при установке типов «алфавитный» (alpha) и «алфавитно-цифровой (alpha-numeric)» для текстовых полей при настройке правил их валидации («мастер формы» — «редактирование поля» — вкладка «Валидация»), мы неизбежно столкнемся с этой проблемой:

Дело в том, что под алфавитом здесь, естественно, имеется ввиду латиница. Поэтому русский «за просто так» не пройдет.

Для решения проблемы открываем файл www\libraries\cegcore\assets\gplugins\gvalidation\gvalidation.js , где в самом начале прописана валидация текстовых полей.

Нас интересуют строчки alpha и alphanum. Добавляем туда кириллицу, чтобы в итоге получилось так:

Теперь русский алфавит наша форма обязательно пропустит.

На этом основная настройка компонента Cronoforms 5 завершена.

источник

ChronoForms v5.0.10 — бесплатное cоздание форм на Joomla сайте

скачать архив для Joomla 3.6 | Размер: 1.3 МБ

Многие веб-мастера хотели бы создать на своем сайте удобную форму обратной связи, подачи какой-либо заявки или форму бланка заказа, в которой должно быть много разных полей. Для всех этих задач есть замечательное решение – компонент ChronoForms. Этот расширение для CMS Joomla подходит под любые версии данного «движка» и приносит много пользы владельцам сайтов. Например, его используют владельцы небольших интернет-магазинов, которые с помощью расширения ChronoForms делают удобные формы заявок на покупку каких-либо товаров или услуг. Важным качеством данного компонента является также его абсолютная бесплатность. Установив данное расширение стандартным методом инсталляции на Joomla, вы получаете меню компонента в разделе административной панели сайта с таким же названием – «компоненты». И с помощью этого меню вам будет удобно создавать формы, назначать поля, а также настраивать вывод форм на отдельных страницах сайта.

Особенности компонента ChronoForms

  • Данное расширение в своей полной комплектации позволяет выводить форму в любом месте, будь это отдельная страница, какой-то конкретный модуль сайта или любое место в любом разделе сайта.
  • Компонент ChronoForms не русифицирован, на наш язык переведено только главное меню. Но этот факт не сильно влияет на работу с ним, так как управление расширением простое и понятное.
  • Расширение ChronoForms подходит для любой версии Joomla, начиная от старых 1.5, 1.6 и заканчивая современными 3.х.
  • У компонента есть удобный встроенный пошаговый помощник для создания форм, что для начинающих веб-мастеров является большим плюсом.
  • В ChronoForms есть встроенная защита против спама, которая помогает предотвратить автоматическое заполнение форм разными ботами.

Для чего пригодится компонент ChronoForms

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

Нашли опечатку или неточность в описании? — Выделите фрагмент текста мышкой и нажмите Ctrl + Enter

источник

Компонент ChronoForms – бесплатный вариант создания форм обратной связи

25 июля 2013 By Сергей Нечипорук Нет комментариев

В этой статье хотелось бы обсудить один из самых популярных компонентов для создания форм обратной связи на CMS Joomla, а именно – компонент ChronoForms.

Давайте выделим его основные преимущества:

— широкий функционал, который практически ни чем не уступает платным компонентам;

Читайте также:  Установка 2 камерного стеклопакета

— не очень удобная русификация (но она принципе и не нужна в данном посте я буду показывать все настройки на англоязычной версии);

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

Давайте приступим к настройке данного компонента.

Для начала вам стоит установить ChronoForms, скачать его можно отсюда.

Установка осуществляется стандартным способом через «Расширения» — «Менеджер расширений».

После установки переходим в настройки компонента.

Далее, для того чтобы создать нужную нам форму выбираем пункт – «Easy Form Wizard». И мы попадаем в меню создания полей формы.

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

Перейдя в настройки поля можно задать: Label Text — заголовок, Field Name -переменную поля (которая потом будет передаваться вам на Email), Field Default Value – значение поля по умолчанию. Остальные значения вы можете оставить все как есть, или же настроить под собственные задачи.

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

Не забывайте в конце формы добавлять кнопку отправки – «Submit Button».

Далее, переходим во вкладку «Form Settings» и задаем название нашей формы, после чего сохраняем ее.

После сохранения переходим к настройкам Email, то есть настраиваем шаблон отправки сообщения и прописываем саму почту, на которую будут приходить письма. Для этого нажимаем на ссылку «Wizard Edit» и переходим в раздел «Emails».

Настраиваем все поля как на картинке ниже, вписывая туда свои значения, и не забываем нажать кнопку « Generate Auto Template » . Нажав эту кнопку, вы сформируете шаблон письма отправки. В случае необходимости вы можете с легкостью его подправить.

Следующим шагом будет настройка письма благодарности, как вы уже догадались, мы переходим в пункт «Thanks Message». Здесь вписываете необходимый текст.

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

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

Установив плагин через «Расширения» — «Менеджер расширений». Переходим в раздел «Расширения» — «Менеджер плагинов и публикуем его».

Где form1 – это имя вашей формы.

Вставляем конструкцию в статью и проверяем результат.

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

P.S. Если вам мешает их авторская ссылка, ее можно скрыть с помощью Css (div. chronoform < display:none;>).

В этом посте мы разобрали лишь часть настроек компонента ChronoForms. Основные эксперименты вы можете провести самостоятельно.
Предыдущие посты на эту тему:

источник

Форма Chronoforms 6 с получением данных из материала joomla. Часть первая

Ситуации, когда нужна форма обратной связи с получением данных из материала Joomla, могут быть самыми разными. Наиболее распространенная из них — необходимость создания формы, с помощью которой пользователи могут задавать вопросы по конкретной статье (например, в каталоге товаров при отсутствии системы комментирования или иного интерактивного функционала). О создании такой формы с помощью компонента Chronorofms 6 и пойдет речь.

Для начала определим задачу:

  1. У нас есть некая категория статей, которая выводится на сайте как «список материалов категории» и для которой нужна форма «задать вопрос». Форма у нас будет одна, и выводиться она будет после основного контента, но в теле статьи. Поэтому для нее необходима новая позиция в шаблоне материала Joomla.
  2. Нам нужно создать и настроить саму форму, включающую следующие поля, заполняемые пользователем: имя и пользователя, текст сообщения, средство защиты (капча).
  3. Тема — обязательное поле для любых сообщений, оправляемых с помощью форм Chronoforms. будем получать с той страницы сайта, откуда пользователь отправляет свой вопрос, и получать мы ее будем несколькими способами, подробно рассматривая каждый из них. А затем, вы уже сами решите, какой из них наиболее оптимален для вашего случая.

Получилось три основных этапа.

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

Создание альтернативного шаблона материала Joomla и настройка его отображения на сайте

Компонент Chronoforms любой версии предусматривает размещение форм в любом месте сайта с помощью специального кода вставки. Для этого необходима установка и включение плагина (plg_chronoforms6).

В CF6 этот код вывода формы выглядит так: my_form_alias.

У применения плагина есть как положительная, так и отрицательная стороны. Плюс в том, что можно при желании убирать/публиковать форму в статье и размещать ее абсолютно в любом месте. Минус же заключается в одном (и он довольно существенный): и публиковать, и убирать форму придется вручную, в каждой статье. Если таких статей сто и более, то этот процесс станет весьма трудоемким и займет больше времени, чем, к примеру, снятие с публикации модуля формы или замена в настройках материала альтернативного шаблона на дефолтный.

Читайте также:  Установка дверных блоков это

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

Первое, что нам понадобится — это файл www\templates\текущий_шаблон_сайта\templateDetails.xml . Здесь обозначим новую позицию (внутри раздела positions), присваивая ей имя и заключая в соответствующие теги:

С этим файлом закончили. Его можно сохранять и закрывать.

Теперь нужно создать альтернативный шаблон материала Joomla дополнительно к уже имеющемуся дефолтному. Этот шаблон будем устанавливать в настройках нашей категории статей или любой другой статьи на сайте, где будет использоваться форма. Если же в конкретных статьях «подопытной» категории необходимость в отображении формы отпадет, можно всегда в настройках самого материала выбрать дефолтный шаблон. (Настройки каждого материала имеют больший приоритет, чем настройки для всех материалов в списке категории, поэтому форма при замене шаблона в настройках статьи на дефолтный отображаться не будет).

Для создания альтернативного шаблона материала нужны копии файлов:

если в текущем шаблоне сайта их нет, или копии файлов:

если такие файлы уже есть в папке html шаблона.

Эти копии файлов нужно переименовать и оставить их здесь же, в папке html текущего шаблона сайта.

У меня здесь ( www\templates\текущий_шаблон_сайта\html ) получились такие файлы:

  1. Копия default.xml переименована на defCF6questions.xml
  2. Копия default.php — на defCF6questions.php

Открываем файл defCF6questions.xml. Здесь ничего особенного. Можно только добавить пояснения для себя на случай, если этот шаблон будет использоваться для одиночных статей ( не в списках материалов категории или блогах) и его придется искать в списке типов пунктов меню. Я в своем файле изменила только атрибут title тега layout и получилось следующее:

Сохраняем и закрываем этот файл.

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

Для настройки списка материалов категории открываем для редактирования соответствующий пункт меню, переходим во вкладку «Отображение» и сверху, в поле «Выбор макета», устанавливаем значение «defCF6questions».

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

Для исключения/добавления статьи, представленной на сайте в списке материалов категории, из числа/в число тех, где будет отображена форма, нужно установить значение шаблона в настройках статьи в менеджере материалов Joomla. Для этого открываем статью для редактирования и во вкладке «Отображение» в поле «Альтернативный макет» выбираем соответствующее значение:

  1. «По умолчанию» (из компонента) — если форма не нужна, но для списка статей категории в меню выбран альтернативный шаблон «defCF6questions»
  2. «defCF6questions» — если для всего списка категории выбран шаблон «По умолчанию», а именно для этой статьи требуется отображение формы.

Итак, мы создали альтернативный шаблон материала Joomla и настроили его отображение на сайте.

Создание и тестирование позиции для формы Chronoforms 6 в шаблоне материала Joomla

Теперь главное на этом подготовительном этапе — создание позиции в нашем альтернативном шаблоне материала Joomla, где будет отображаться наша будущая форма обратной связи.

Открываем файл www\templates\текущий_шаблон_сайта\html\com_content\article\defCF6questions.php и вверху, после строчки:

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

Я расположила позицию после основного содержимого статьи, представленного этим блоком:

Его можно дополнительно обернуть в блок div, а можно оставить, как есть.

Сохраняем и закрываем файл defCF6questions.php. Позицию мы добавили и теперь можем проверить, что у нас получилось.

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

Я создала для теста вот такой модуль:

и проверила его работу на сайте:

Все работает, как надо и на этом создание и тестирование позиции для формы Chronoforms в шаблоне материала Joomla завершено. Завершили и весь подготовительный этап.

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

Рекомендуем:

Можно использовать js код в событии on submit или же вообще смотреть в сторону ajax-отправки формы.
Я на одной из форм использовала вот такой код (к сожалению уже не помню, где я его изначально взяла):
Код:
window.smoothScrollTo = (function () <
var timer, start, factor;

return function (target, duration) <
var offset = window.pageYOffset,
delta = target — window.pageYOffset;
duration = duration || 1000;
start = Date.now();
factor = 0;

if( timer ) <
clearInterval(timer);
>

function step() <
var y;
factor = (Date.now() — start) / duration;
if( factor >= 1 ) <
clearInterval(timer); // stop animation
factor = 1; // clip to max 1.0
>
y = factor * delta + offset;
window.scrollBy(0, y — window.pageYOffset);
>

timer = setInterval(step, 10);
return timer;
>;
>());

источник

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

Adblock
detector