Задать вопрос

QuickForm 2 - это функциональное решение, позволяющее создавать динамические формы на движке Joomla!. С его помощью можно быстро делать сложные формы, по функциональности не доступные ни одному другому конструктору. В частности, это проявляется в возможности делать зависимые списки и зависимые группы полей без ограничения уровня вложенности и количества повторов, а также строить динамические (меняющиеся в процессе выбора полей) калькуляторы.

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

Maurits Cornelis Escher. Cubic space division

Прежде чем вы скачаете и установите QuickForm 2, хочу обратить ваше внимание, что это не тот вариант, когда в два клика, не обладая минимальными знаниями в разработке и администрировании сайтов, получите готовый и красивый результат. Расширение создавалось для вебмастеров, знакомых с CSS и HTML. Оно нужно для того, чтобы быстро создавать трудные в плане кодинга формы, которые потребовали бы многие часы и даже месяцы работы опытного программиста.

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

Существуют ли какие либо ограничения в плане дизайна и оформления формы? Таких ограничений нет, но как было уже написано, для создания красивой формы нужны знания CSS. Хотя компонент имеет несколько встроенных файлов со стилями, они больше примерные, чем рабочие. Но во многих простых случаях этого будет достаточно. Я рекомендую создавать собственный файл myname.css в папке стилей компонента. В последствии вы сможете многократно им пользоваться в своих проектах, а главное, он не будет перезаписываться при обновлении компонента.

Какими уникальными особенностями обладает QuickForm 2?

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

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

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

3. Возможность динамического вывода обязательных полей. В примере ниже, при выборе опции "другой город", появляется обязательное поле, которое не используется в других случаях.

4. Неограниченное число форм на одну страницу. Не смотря на то, что многие конструкторы умеют делать множественный вывод на страницу, как правило, возникают существенные ограничения в функциональности. Например, связанные с тем, что капча может быть в единственном экземпляре на страницу, или разные настройки для форм могут конфликтовать между собой. В QuickForm 2 таких проблем не возникнет. При этом все формы могут быть в разном оформлении и для них заданы разные настройки. Например, на текущей странице, вот эта форма, выводится в модальном окне. А ниже, пример, в котором есть капча, активируемая динамически, то есть только при необходимости.
0m
0m2

5. Адаптация под узкие блоки. В отличие от обычной адаптации под узкие экраны, это заключается в том, что если размер контейнера с формой меньше 500px, к форме добавляется класс "compact". Соответственно, появляются дополнительные возможности для более правильной интеграции в дизайн шаблона.

6. Пересчет результата калькулятора на сервере. Как правило, все скрипты, которые делают формы с калькулятором, отправляют результат расчета в специальном скрытом поле, дальше этот результат подставляется в письмо и статистику отправлений. Но нет ничего проще, чем сделать подмену таких значений, поэтому в более продвинутых скриптах, таких как интернет магазины, этот результат проходит проверку на сервере. Особенно остро это проявляется при автоматической торговле цифровым товаром. Но нет ни одного скрипта или программы (в виде конструктора), которые могут пересчитать динамический калькулятор. Этот компонент такую проверку выполняет.

7. Работа в режиме магазина. QuickForm 2 - это генератор форм, у него нет собственного каталога товаров и нет многих специфичных для магазина функций. Тем не менее, функция корзины включена в программный код компонента. Это будет удобно, если у вас небольшое количество товаров, и вам не нужен для них каталог. Уникальной особенностью тут является возможность работать с динамическим товаром, чего не может делать ни один другой скрипт и ни один магазин. Пример работы компонента в режиме магазина можно посмотреть на этой странице.

8. Встроенная защита от спама. QuickForm 2 имеет встроенную защиту на JavaScript, которая будет барьером для большинства спам-ботов. Это позволяет обходиться без каптчи, которая, впрочем, у него тоже есть. А формы, не имеющие кнопки "submit", например, чистые калькуляторы, вообще не могут быть отправлены на почту никаким способом.

9. Пример формы оптового заказа товаров, который начинается с одного поля.
0руб.



Как вывести форму QuickForm 2 на страницу сайта?

Вывод осуществляется разными способами:

1. Вывод content плагином quickform. Позволяет вставить форму в текст материала другого компонента, например com_content. Можно выводить через любой компонент, который поддерживает content плагины. Для этого нужно вставить в нужное место текстового сопровождения инструкцию вида: {QuickForm id=3}, где номер - это id проекта формы.

2. Вывод модулем mod_quickform. Это позволит выводить форму на нескольких страницах. Опубликуйте модуль в нужной позиции шаблона, укажите в его параметрах id проекта формы, которую вы хотите вывести.

3. Вывод программным кодом. Это очень просто сделать:
require_once("components/com_quickform/classes/buildform.php");
$qf = new QuickForm();
echo $qf->getQuickForm($id); // id проекта формы


Скачать

Скачать компонент QuickForm 2 можно по ссылке.

Совместимость Joomla! 3+

Актуальную версию расширения QuickForm 3 можно скачать со страницы: plasma-web.ru/dev/quickform3



Старая версия компонента QuickForm 2: QF2_v1.3.13.zip.

Как пользоваться?

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

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

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


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

1. Заходим в панель управления QuickForm, нажимаем кнопку "создать". Заполняем два поля - "Заголовок" и "Сообщение после отправки формы". Жмем "сохранить".

2. Переходим по ссылке "Поля". Нажимаем кнопку "создать". Заполняем поле "Заголовок" и создаем при помощи меню пять полей: "Имя Фамилия", select (без заголовка) с опциями выбора, "Ваше сообщение", checkbox с политикой конфиденциальности, кнопку submit. Сохраняем.

3. Создаем вторую группу полей для опции частного лица. Заполняем заголовок, я рекомендую давать группам полей четкие названия и обозначать иерархию (уровень вложенности) плюсиками или текстом. Добавляем два поля: "Контактный телефон" и "Email". Сохраняем.

4. Аналогично делаем группу полей для юридического лица. Сохраняем, и в списке групп полей проекта смотрим и запоминаем id двух последних групп.

5. Открываем первую группу, раскрываем select и в настройках его опций (related-fields) вставляем запомненные id. Выводим форму на страницу.

6. С помощью CSS придаем форме необходимый для вашего сайта вид. Для этого в папке /components/com_quickform/assets/css/ создаем новый файл .css с уникальным именем, копируем в него стили из default.css. В настройках проекта выбираем новый файл как рабочий. Редактируем стили по своему усмотрению.


Настройки проекта

1. Заголовок. Обязательное поле, определяет заголовок проекта.

2. CSS файл для формы. Поле содержит список всех css файлов из папки /components/com_quickform/assets/css/. Не стоит использовать и изменять включенные в дистрибутив файлы, они перезапишутся при обновлении компонента и ваши стили слетят.

3. Сообщение после отправки. Обязательное поле, включает сообщение, которое увидит пользователь после успешной отправки формы. Если у вас сообщения не показываются, убедитесь, что в вашем шаблоне предусмотрен вывод сообщений: <jdoc:include type="message" />.

4. E-mail. Если вы не знаете, что такое DMARC, тогда оставьте поле пустым.

5. Тема письма. Можете указать тему, но учитывайте, что если письмо будет отправляться на бесплатный почтовый сервер, такой как mail.ru или gmail.com, то они могут блокировать письмо, если им что-то не понравится.

6. Шаблон письма. QuickForm включает три шаблона. default - табличный вывод содержимого формы. simple - упрощенный вывод. json - для программистов.

7. Отображать заголовок проекта. Если выбрано - "да", тогда заголовок проекта будет включен в письмо и некоторые другие интерфейсы.

8. Записывать историю. Определяет, будет ли сохраняться история отправлений в базе данных и, соответственно, выводиться в интерфейсе компонента.

9. Форма в модальном окне. Если выбрано - "да", значит форма будет показываться во всплывающем окне. Типичная ситуация для форм заказа звонка или подобных.

10. Отправка аяксом. Определяет, будет ли форма отправляться без перезагрузки страницы или с перезагрузкой. Новичкам стоит отметить, что правильная отправка формы в www осуществляется с перезагрузкой страницы.

11. keepalive. Если активирован, работает алгоритм, который в фоновом режиме, периодически (в зависимости от времени жизни сессии сайта), отправляет простой аякс запрос на сервер. Таким образом, время жизни сессии на данной странице продляется бесконечно. Если на странице уже запущен стандартный keepalive из Джумла, функция не запускается. В отличие от стандартной, эта функция не подгружает библиотеку mootools.

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

13. Изображение в корзине. Настройка, используемая режимом магазина. Ссылка вида /images/joomla_black.png. Покажет картинку в корзине для визуализации товара.


Описание полей

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

Например, "required", вынесенное из "custom" обозначает не только то, что поле является обязательным, но и то, что сервер должен его проверить еще и после отправки, после чего сообщить пользователю об ошибке, если оно не будет заполнено. А атрибут "placeholder" - это не только заполнение пустого поля, но еще и заголовок поля в письме, если у поля нет самого этого заголовка. Атрибут "value" у кнопок вынесен отдельно, чтобы была возможность использовать его значением языковую константу на многоязычных сайтах. Атрибут "class" вынесен с той целью, чтобы присвоить class не только самому полю, но и контейнеру, в котором это поле размещено. Если вы пропишите class через "custom", тогда он будет только у самого поля. И т. д. и т. п.

1. input[type="button"]. Затрудняюсь сказать, для чего это поле может быть использовано в компоненте. Я, например, использую его в примерах на этой странице вместо "submit", чтобы вы не отправляли их мне на почту. Возможно, опытные пользователи смогут его использовать для JavaScript или других целей.

2. input[type="checkbox"]. Из особенностей стоит отметить, что заголовок поля на странице выводится два раза - перед кнопкой и после. Ненужный заголовок прячется средствами css. В настройках можно убрать поле из письма, но если оно задействовано в калькуляторе, то на калькуляцию это не повлияет.

3. input[type="file"]. Единственным отличием от стандарта является то, что к контейнеру с полем динамически добавляется class="filled", если файл выбран. Это позволяет стилизовать спрятанную в css кнопку.

4. input[type="hidden"]. Поле может использоваться в калькуляторе для вывода нужной математики. Есть много других способов использования, но вам нужно их находить самостоятельно.

5. submit. Это кнопка отправки формы на почту. Если это поле не включено в вашу форму, то она не сможет быть отправлена. Можно выводить это поле динамически - в этом случае вы полностью защитите себя от спама без всяких каптч, только человек сможет отправить такую форму. В настройках есть опция "redirect" - перенаправление на любую указанную страницу.

6. customHtml. Позволяет встраивать в форму произвольный html код. Очень помогает, когда нужно применить стиль к нескольким полям в одной группе. В этом случае эти поля оборачиваются контейнером с определенным классом, а стили к ним применяются путем наследования в css. Кроме того, customHtml может использоваться для вывода картинок, скриптов и прочего, в том числе динамически. В данном примере показана форма подбора дверей по параметрам, с использованием customHtml.

0руб.

Конечно это упрощенный схематичный пример. Он показывает, как используя только CSS и QuickForm можно делать интерактивные карты товаров. Для этого используется функционал зависимых полей, в которых расположен customHtml, содержащий определенный стиль. Например, при нажатии кнопки "Цвет обоев", подгружается контейнер, содержащий следующий код: <style>.f_6_img_box {background-color: #b5e9bd;}</style>

7. customPhp. Это наиболее универсальное поле, которое включает две произвольные пользовательские функции. Одна для вывода в форме, другая для вывода в письме. По сути, это тот же customHtml, но с парсингом php кода. Описывать какие-то подробности не имеет смысла, так как это поле для опытных пользователей, способных разобраться с ним самостоятельно.

8. calculatorSum. Вывод результата калькулятора. Если ваш калькулятор выводит несколько результатов, значит и calculatorSum нужно вывести несколько раз. Настройки этого поля не вызовут вопросы.

9. recaptcha. QuickForm 2 использует каптчу, предоставляемую поисковой системой google и получает данные из соответствующего системного плагина Джумла. Для настройки откройте в административной панели менеджер плагинов и системный плагин CAPTCHA - reCAPTCHA. В описании найдите ссылку, и перейдя по ней получите ключи. Сделайте выбор версии 2.0, введите ключи и сохраните настройки плагина. Сам плагин можно не публиковать, если он вам больше нигде не нужен.

10. cloner. Предназначен для вывода клонируемых блоков полей. Функционально представляет из себя контейнер, в который заключена группа полей компонента. При нажатии на кнопку "плюс" происходит подгрузка копии группы. В настройках можно выбрать вертикальный или горизонтальный cloner, их функциональность различна. Это определяется тем, что разметка горизонтального варианта табличная, соответственно, не подразумевает вывод зависимых полей внутри клона. Вертикальный вариант, напротив, может содержать как зависимые поля, так и другие вложенные клонеры. Ниже пример горизонтального расположения:

0
0руб.


11. calcCondition. Это поле также как и предыдущее является контейнером, включающим группу полей компонента. Его поведение похоже на работу функции include. Но кроме этого, в случае использования калькулятора, поле имеет дополнительную функциональность. Оно может добавлять математику в зависимости от выполнения некоторого условия. Конкретно, это работает так: компонент рассчитывает математику в группе полей, заключенной в calcCondition. Полученный результат "s" сравнивается по условию, которое вы задаете в настройках, и в случае его удовлетворения, в итоговую математическую строку включаются математические выражения, заданные в start и end.

12. backemail. Выводит чекбокс, выбрав который пользователь сможет получить копию письма на свой почтовый адрес.

13. addToCart. Поле, которое используется в режиме магазина вместо кнопки submit. Подробнее про режим магазина можно узнать на странице QuickForm 2 в режиме магазина.

14. qfTabs. Выводит интерфейс "вкладки". Можно указать вертикальное или горизонтальное положение. Пример вертикальных вкладок ниже.

Список услуг
Услуга 1
Услуга 2
Услуга 3
Услуга 4
Услуга 5
Услуга 6






Проблемы и часто задаваемые вопросы

1. Форма не выводится на страницу сайта. Убедитесь, что вы указали правильный id проекта формы.Убедитесь, что плагин или модуль QuickForm опубликованы, а в самом компоненте созданы поля формы.

2. Форма появляется на мгновение и исчезает. Эта ошибка, как правило, связана с проблемами авторской ссылки. Если вы не имеете активационного кода, авторская ссылка должна присутствовать на странице вашего сайта и должна быть открыта для индексации поисковыми системами. Если вы используете плагины, закрывающие внешние ссылки от индексации, тогда добавьте QuickForm в исключения или получите активационный код.

3. Калькулятор не считает. Проверьте консоль браузера на наличие ошибок JavaScript. Серьезные ошибки в скриптах могут полностью или частично блокировать работу компонента или всего сайта. Возможны также другие причины, например, были сообщения о том, что формы, выводимые компонентом SP Page Builder работают не корректно.

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

5. Письма приходят в папку спам. Это говорит о том, что IP адрес, с которого ваш хостинг отправляет письма, находится в чёрном списке почтового сервера, который письмо получает. Существуют и другие причины, но они также никак не связаны с QuickForm.

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

7. Форма выглядит не красиво. Компонент QuickForm не создавался как дизайнерское решение, - это решение функциональное. Соответственно, стилевому оформлению форм на данном этапе не уделяется много времени. Это не является проблемой для опытных пользователей, но вызывает затруднения у новичков. В этом случае можно обратиться за сторонней помощью, обычно, оформление под дизайн вашего сайта займет меньше одного часа.

8. Не работает каптча. Проверьте настройки плагина CAPTCHA - reCAPTCHA. В настройках должны быть введены ключи, соответствующие домену вашего сайта. Если ваш сайт переехал на другой домен, соответственно, вам нужно получить новые ключи.

9. Авторская ссылка выводится крупным шрифтом. Как правило, это означает, что в настройках проекта не выбран css файл, отвечающий за стилевое оформление.

10. Обсуждение и поддержка компонента на форуме: joomlaforum.ru.



Donate и удаление авторской ссылки.

QuickForm 2 является свободным продуктом с полностью открытым исходным кодом. Как автор этого расширения, я буду признателен всем пользователям, оказавшим любую поддержку для этого проекта.

Сделать перевод:
А также получить код активации:
YandexMoney
руб.
WebMoney
руб.
Payeer
usd