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

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


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


Итак, что нужно знать в первую очередь:

  • 1. QuickForm 3 умеет создавать динамические формы. То есть, делает динамическое добавление полей в форму. И не только полей, но вообще любого контента.
  • 2. Вы сможете сделать абсолютно любой дизайн формы. Разметка элементарно вставляется между полями.
  • 3. Есть простой для понимания калькулятор. Его функцию можно легко включить в настройках.
  • 4. Обычные интерфейсы, такие как отправка формы аяксом, форма в модальном окне, функционал корзины и др. - всё это работает по отдельности и вместе.
  • 5. Встроенная защита от спама. Этим компонентом можно пользоваться без капчи.
  • 6. QuickForm 3 - это бесплатное расширение, но оно развивается за счет добровольных пожертвований, которые вы делаете в обмен на удаление авторской ссылки.
  • 7. Этот компонент поддерживает мультиязычность, множественность форм, сохраняет историю отправлений.


1. Примеры простых форм

Как можно видеть, QuickForm 3 не имеет ограничений в плане дизайна, он позволяет интегрировать в форму любую разметку. Это делается при помощи функционального поля customHtml и обыкновенного css.

Subscribe Now
Choose


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

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






2. Скачать компонент QuickForm 3
Совместимость Joomla! 3+


3. Пример динамической формы + калькулятор

QuickForm 3 обладает уникальной способностью делать динамические калькуляторы, то есть такие, логика которых меняется в процессе выбора полей формы. Причем, меняться может не только логика калькулятора, вся форма преобразовывается и делает это на любом этапе, любом уровне вложенности, позволяя легко получать интересные и неожиданные эффекты. Но здесь я стараюсь показывать упрощенные примеры, поэтому, приведу простую форму калькулятора ОСАГО.



Нужно понимать, что это пример, созданный за 20 мин. для демонстрации работы QuickForm 3, а не рабочий калькулятор. Для интеграции всей тарифной сетки Росгосстраха понадобится несколько часов.


4. Почему QuickForm 3?

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


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

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

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

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

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


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

  • 6.1. Создайте проект будущей формы, отметив необходимые настройки.
  • 6.2. Создайте одну или несколько групп полей. Для статичной формы нужна одна группа, для динамической - несколько.
  • 6.3. Сделайте вывод формы на страницу сайта.

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



Чтобы получить такую форму, нужно создать три группы полей. Одна группа будет "по умолчанию" - она загрузит вашу форму. Две другие группы будут содержать поля для опции частного лица и опции юридического лица соответственно. Запомните id этих двух групп. Зайдите в основную группу полей, и для select в настройках его опций (related-fields) вставьте запомненные id.


Я использую стиль default.css для примеров на этом сайте. Но вы, наверняка, захотите сделать собственные стили для своей формы. Это можно сделать следующим образом:
В папке /components/com_quickform/assets/css/ создаем новый файл .css с уникальным именем, например, pinkpunk.css, копируем в него стили из default.css. С помощью редактора заменяем вхождения "default" на "pinkpunk". В настройках проекта выбираем новый файл как рабочий. Редактируем стили по своему усмотрению.



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

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

7.1. customHtml. Позволяет встраивать в форму произвольный html код, может использоваться для вывода текста, картинок, стилей, скриптов и прочего, в том числе динамически.

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

7.3. calculatorSum. Выводит результат вычисления калькулятора.

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

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

0
100
0
100
step 1step 2step 3step 4
0+×
0
0units


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

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

7.8. addToCart. Поле, которое используется в режиме магазина вместо кнопки submit. При нажатии, форма не будет отправлена на почту, а будет добавлена в корзину компонента.

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

step 1
step 2
step 3
step 4
step 5




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

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

8.2. Калькулятор не считает. Проверьте консоль браузера на наличие ошибок JavaScript. Серьезные ошибки во внешних скриптах могут полностью или частично блокировать работу компонента или всего сайта.

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

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

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

8.6. Форма выглядит не красиво. Компонент QuickForm 3 не создавался как дизайнерское решение, - это решение функциональное. Стили вам нужно писать самостоятельно или использовать встроенные. Вы также можете обратиться ко мне или к другому специалисту, если не знакомы с CSS.

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

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

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



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

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

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