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

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

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

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

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

Cube calculation
0
100
0
100
0
100
0m3
send it to email

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

QuickForm можно скачать бесплатно. Устанавливаем обычным способом. Открываем: "компоненты -> QuickForm", нажимаем на зеленую кнопку "New" и попадаем в интерфейс настройки нашей будущей формы. Я заполнил только заголовок, больше ничего не делал. Нажимаем "Save & Close". Проект формы создан.

В админке компонента появилась строчка, содержащая ссылку "fields" справа от заголовка и колонку "Plugin code". Plugin code – это инструкция, которую нужно скопировать и вставить в контент материала. Я не буду здесь останавливаться подробно, так как это стандартная процедура в Джумла. Если вы тут, то скорее всего, знаете, как работают контент-плагины.

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

instruction 6

Как видно, в QuickForm можно обрамлять поля html тегами, как вы это делаете в своем любимом редакторе кода. Я добавил стили для класса .ex3inline, чтобы расположить поля горизонтально в ряд.


.qf3form.default .ex3inline {
    margin-left: 30%;
}

.qf3form.default .ex3inline .qf3label {
    text-align: left;
}

.qf3form.default .ex3inline select {
    width: 90%;
}

.qf3form.default .ex3inline .qfselect {
    width: 30%;
    margin-left: 0;
}

В форме несколько полей. Для полей Name, Email и Your message можно прописать placeholder. Кликните кнопку настроек и впишите placeholder в открывшемся окошке. Там же пометьте поле как обязательное (required). У окошка есть две кнопки: зеленая – запомнить и красная – не запоминать. Нажмите зелёную.

Это все, форма готова. Нажмите зелёную кнопку "Save" в верхнем левом углу окна. Если непонятно и остались вопросы, то их можно задать на форуме, где осуществляется поддержка компонента

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

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

3. QuickForm и CSS.

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

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

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

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

instruction 8

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


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

.qf3form.new_example form {
    padding-top: 268px;
    max-width: 340px;
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    background-image: url(/images/sputnik.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

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

.qf3form.new_example input,
.qf3form.new_example textarea {
    width: 100%;
    height: 28px;
    font-size: 1em;
    color: #bcd0e3;
    padding: 0;
    margin-top: 20px;
    background: none;
    border: 0;
    border-bottom: 1px solid #668aad;
}

.qf3form.new_example textarea {
    height: 58px;
}

.qf3form.new_example .qfsubmit {
    width: 100%;
}

.qf3form.new_example .qfsubmit input {
    font-size: 1.2em;
    height: 54px;
    margin-top: 52px;
    background: #5ec2de;
    color: #fff;
    cursor: pointer;
}

.qf3form.new_example .qfsubmit input:hover {
    background: #59c9e8;
}

.qf3form.new_example input::placeholder,
.qf3form.new_example textarea::placeholder {
    color: #88a8c7;
    opacity: 1;
}

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

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

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

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

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

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

Basic Details

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

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

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

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

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

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

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

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

5.2 Тип калькулятора "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.

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

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

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

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

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

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

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

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

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

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

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

Форма.

7.1. CSS файл для формы. Файл можно выбрать или создать новый. Вносить изменения в CSS файлы из дистрибутива нельзя. Если вам нужно внести изменения, создайте свой. Подробнее описано в разделе QuickForm и CSS.

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

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

7.4. Форма с календарем. Этот пункт добавлен, чтобы сделать предварительную загрузку datepicker.js на страницу, если календарь лежит где-то в зависимом поле.

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

Письмо.

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

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

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

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

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

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

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

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

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

0руб.


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

8.3. qf_file.

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

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

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

8.6. cloner.

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

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

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

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

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

8.10. qfTabs.

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

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

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

Example:
Name:
Next

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

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

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

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

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

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

9.3. Калькулятор считает не правильно. Калькулятор считает по правилам математики. Если результат не соответствует ожидаемому, вызовите искусственно ошибку. Строка расчёта отобразится на странице.

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

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

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

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

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

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

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

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

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