QuickFormQuickForm – это расширение, которое можно установить на сайт и легко делать сложные динамические формы. Он имеет простой интерфейс, встроенную защиту от спама и высокую скорость отрисовки кода.

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

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

Скачать компонент QuickForm.

Совместимость Joomla! 3+, Joomla! 4+
Cube calculation
0
100
0
100
0
100
0m3
send it to email

Make a request

Форма заявки в стиле "Plastic".

Готовый проект, который можно скачать и импортировать в QuickForm. Он же в модальном варианте:

Make a request
Скачать файл импорта: plastic.qf3.zip(2 KB)

Форма заявки в стиле "Домино".

Она же в модальном варианте:

Make a request
Скачать файл импорта: domino.qf3.zip(2 KB)
max: 256M

Request a call

Форма заказа звонка.

Простой проект в стиле "Джинс". Он же в модальном варианте:

Request a call
Скачать файл импорта: callorder.qf3.zip(2 KB)

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

0руб.

QuickForm и CSS.

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

По умолчанию, в компонент включен один CSS файл со стилями: default.css. Это нейтральный стиль с адаптивностью и поддержкой всех виджетов компонента. Так как виджеты часто добавляются, мне нужно включать этот файл в обновления. Поэтому вам нет смысла вносить туда какие-либо изменения – они затрутся при обновлении. Чтобы этого не произошло, вам нужно создать свой файл стилей в настройках проекта формы.

Открываем настройки проекта и создаём новый файл стилей с именем, например, new_example.css. Если вы первый раз работаете с компонентом, обязательно отметьте кнопку "копировать стили". Тогда автоматически будет создан файл с уже прописанными префиксами классов.

Если мы выведем проект на страницу сайта и откроем панель "инструменты разработчика" в браузере, то увидим, что верхнему контейнеру с формой присвоен класс "new_example", то есть, равный имени созданного файла. Благодаря этому классу, формы с разным дизайном не мешают друг другу на странице. Все что требуется, это наследовать каждую css инструкцию классом ".qf3form.new_example". Если вы подключите к форме файл с другим именем, будет другой класс. Пример:


.qf3form.new_example {
    font-size: 14px;
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 0;
    background: linear-gradient(0, #1a5889, #56d7d3);
}

.qf3form.new_example .qf3 {
    width: 74%;
    margin: 0 auto;
}

Еще одной особенностью QuickForm является класс "compact". Он появляется, когда контейнер, в который помещена форма, имеет ширину меньше 500px. Это удобно при адаптивной верстке, потому что здесь зависимость строится не от ширины окна браузера, а от ширины родительского контейнера. Также к форме добавляется класс "touch" или "desk", в зависимости от того, является ли устройство тачпадом.

QuickForm и зависимые поля.

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

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

Ниже можно посмотреть пример, в котором при изменении поля "Country" меняются поля "State" и "City".

Basic Details

QuickForm и калькулятор.

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

Тип калькулятора "default". Это уникальный вариант, который не требует никакой формулы. Зайдите в настройки любого поля и посмотрите на вкладку калькулятора. Впишите параметр "math", например, +5. Добавьте еще одно поле с таким же "math". Добавьте специальное поле "calculatorSum" для вывода результата. Вы увидите, что калькулятор заработал и показывает результат: 10. Используя различные модификаторы, скобки и зависимые поля, можно решить большинство математических задач.

Каждое зависимое поле в данном случае может выступать в роли условия типа if else, разветвляя логику и запуская собственную ветку расчета. Посмотрите пример калькулятора ОСАГО, сделанный с помощью этого варианта.

К сожалению, не каждый вариант расчета можно выполнить при помощи этого типа. Из ограничений можно отметить то, что таким способом выводится всего один результат. Кроме того, бывает математическая логика, требующая повторного использования какой-либо переменной при расчете. Например, мы имеем формулу: итог = (a + b) * c + a * c + b. Сделать такой калькулятор способом "default" будет сложно. Поэтому в компонент включены еще несколько.

Тип калькулятора "multiple". Этот вариант лишен недостатков предыдущего, кроме того, может использоваться для вывода нескольких результатов расчета. В общем-то, он вообще не имеет никаких ограничений. Для запуска нужно вписать формулу, структура которой подробно описана в его настройках. Давайте разберем небольшой пример.

Стоимость аренды за
0
дней составит
0руб.

Формула этого калькулятора:
48.1={49.1}{50.1};
48.2={49.1}{49.2}{50.1}{50.3}

48.1, 48.2 – это fieldid полей calculatorSum, которых у нас два. Одно выводит количество дней, другое стоимость аренды. В правой части находится сама формула расчета.

Для первого calculatorSum она состоит из двух fieldid, заключенных в фигурные скобки. Это fieldid поля календаря: 49.1 – для квартиры, 50.1 – для яхты. Так как у нас в форме всегда присутствует только один календарь (сдвоенный), то в расчет принимается только один fieldid из двух. Иными словами, для квартиры первая формула будет считаться как 48.1={49.1}, а для яхты как 48.1={50.1}. То есть, будет выводить количество дней, составляющих разницу сдвоенного календаря.

Вторая формула построена аналогично. В нее только добавлено hidden поле, которое перемножает количество дней на ренту. Это поле лежит в зависимой группе и различно при разном выборе select. Для квартиры параметр math этого поля равен *600, а для яхты *5000.

Тип калькулятора "simple". Обычная логика, использующаяся в расширениях. Это самый простой, но и самый ограниченный тип калькулятора. Здесь у нас привычный способ записи математической логики с помощью переменных. Он подробно описан в самом компоненте, и я не буду на нем останавливаться. К сожалению, логика динамической формы и зависимых полей с ним плохо сочетается. Но простой калькулятор без премудростей сделать можно.

Тип калькулятора "custom". Этот пишется на php "как угодно" и "как нужно". Его единственным недостатком является требование знания языка.

Структура QuickForm гибкая. На нём можно делать калькуляторы вообще не используя встроенную функцию, и даже математику, как таковую: пример. Кроме того, можно легко добавить новый тип калькулятора под конкретный проект на программном уровне. Я всегда буду рад оказать помощь, если у вас появятся вопросы, или просто нет на это времени.

Подробнее о калькуляторе: QuickForm в режиме калькулятора.

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

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

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

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

3. Вывод программным кодом. Это очень просто сделать:

require_once("components/com_qf3/qf3.php");
echo QuickForm\qf::form(id); //form project id

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

Форма.

1. CSS файл для формы. Файл можно выбрать или создать новый. Файл default.css не предназначен для использования в качестве итогового. Вносить изменения в этот файл нельзя нельзя. Это набор базовых стилей для всех виджетов компонента, он нужен для того, чтобы сделать с него копию.

2. Форма в модальном окне. Если выбрать этот пункт, форма будет открываться во всплывающем окне с затемнённым окружающим фоном. Загрузка происходит после клика по ссылке, никаких спрятанных контейнеров предварительно на страницу не грузится. Пример можно посмотреть на форме, которой я оказываю поддержку: Контакт. Простая ссылка, которой при необходимости можно придать вид кнопки с помощью CSS.

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

4. keepalive. Удерживает сессию пользователя на странице с формой.

Письмо.

5. E-mail. Адрес, на который будет отправлено письмо. Можно ввести несколько адресов через запятую.

6. Шаблон письма. В компонент включено четыре шаблона:
default: базовая табличная разметка с html.
simple: простая разметка без html.
simple с html: Вы можете сами создавать html письма, используя специальное поле компонента customHtml.
json: строка всех данных (для разработчиков).

7. Вступительный и заключительный текст. Может содержать переменные подмены:
{replacerName} : заменяется на имя пользователя,
{replacerId} : id заявки в истории отправлений,
{replacerDate} : дата отправки письма.

Дополнительные параметры.

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

9. Изображение в корзине. Подробнее про режим магазина на странице QuickForm в режиме магазина.

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

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

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

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

3. qf_file.

Выводит стилизованную кнопку загрузки файлов. Чтобы добавить несколько файлов, используйте атрибут "multiple", чтобы сортировать файлы на стороне клиента, используйте "accept". В настройках поля можно указать "белый список" типов файлов, а также, включить функцию загрузки на сервер. Загрузка файлов на свой сервер решает проблему блокировки писем с вложениями, так как не нужно прикреплять файл к письму.

4. calculatorSum. Выводит результат вычисления калькулятора. Каких-то особенностей не имеет. Для вывода нескольких сумм, нужно вывести это поле несколько раз.

5. recaptcha. Несёт, скорее, украшательную функцию, поскольку компонент имеет собственную защиту. Использовать не обязательно. Мне не известны случаи автоматического спама через компонент.

6. cloner.

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

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

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

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

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

10. qfTabs.

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

11. qfcalendar. Выводит стилизованный календарь. Можно выводить одиночный и двойной календарь. Пример ниже.

12. stepper. Выводит пошаговый интерфейс формы. Пример ниже

Example:
Name:
Next

stepper состоит из двух частей.
1. stepperbox - контейнер, ограничивающий область формы, в которой он будет выполняться. То есть, границы действия виджета. Может быть всей формой или ее частью.
2. stepperbtns - кнопки "вперед назад". (Должны находиться внутри контейнера).

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

Еще один пример пошагового интерфейса сделан в модальном окне пример. Этот stepper с разветвлением логики. Выбираем цвет футболки и попадаем на страницу с футболками этого же цвета.

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

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

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

3. Калькулятор считает не правильно. Калькулятор считает по правилам математики. Если результат не соответствует ожидаемому, ищите ошибку в математике.

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

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

6. Форма выглядит не красиво. Компонент QuickForm не создавался как дизайнерское решение, – это решение функциональное.

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

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

Поблагодарить за QuickForm.

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

Сделать перевод:

А также получить код активации:
ЮMoney/картой (ру)
руб.
WebMoney/Bitcoin
usd