QuickForm 3QuickForm 3 – это мощное расширение для создания веб форм. Один из лучших конструкторов, написанный для дизайнеров, вебмастеров, простых пользователей и опытных разработчиков, которые работают с популярным движком Joomla! Компонент превосходит аналоги по возможностям, но имеет простой интерфейс и высокую скорость отрисовки кода. Он будет лучшим выбором, если вы стремитесь к разработке быстрых сайтов с низкой нагрузкой на сервер. Благодаря гибкости и нестандартной архитектуре, QuickForm 3 позволяет делать уникальные формы, заявки, калькуляторы, определители, разветвлённые тесты, опросы, модули динамического контента.



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



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



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

Subscribe Now
Choose
Anything
Anything 2
Anything 3
Anything 4
Anything 5
0
100
Enter your name
Contact details
Gender
Date of Birth


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



Скачиваем расширение: скачать. Устанавливаем обычным способом. Открываем: "компоненты -> QuickForm 3". Видим такую картину.


instruction 1

Нажимаем на зеленую кнопку "New" и попадаем в интерфейс настройки проекта нашей будущей формы.


instruction 2

Тут нам нужно заполнить только заголовок, больше ничего не делаем. Нажимаем "Save & Close". Проект формы создан.


instruction 3

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

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


instruction 4

Сейчас у нас не создано ни одной группы, поэтому нажимаем кнопку "New" и создаем. Открывается интерфейс для работы с полями:


instruction 5

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


instruction 6

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


instruction 7

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



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

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



3. QuickForm 3 и CSS.


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



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


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


instruction 9


Сама форма состоит из четырех полей. В настройках трех первых, нам нужно прописать placeholder и отметить пункт "обязательное". В поле "submit" нужно убрать назначенный по умолчанию "class" и изменить "value", которое у нас теперь будет "Send Massege".


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. Это очень удобно при адаптивной верстке, потому что, здесь зависимость строится не от ширины окна браузера, а от ширины родительского контейнера.




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


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

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


Basic Details

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


Давайте рассмотрим пример подробнее. Сначала нужно создать проект формы и в нем создать новый файл стилей "conditional.css". Теперь создадим первую группу полей, как на картинке:


instruction 10


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


Для этого примера я подготовил адаптивные стили, которые можно скопировать ниже.



.qf3form.conditional {
    font-size: 14px;
    max-width: 800px;
    margin: 0 auto;
    background: #4ca4e9;
    padding: 0 0 0 160px;
}

.qf3form.conditional form {
    padding: 0 20px;
    background: #fff;
}

.qf3form.conditional .qf3 {
    float: left;
    width: 50%;
    padding: 0 15px;
}

.qf3form.conditional .qf3label {
    font-size: 0.8em;
    color: #ababab;
}

.qf3form.conditional .relatedblock .qf3 {
    width: 25%;
}

.qf3form.conditional select,
.qf3form.conditional input {
    font-size: 1.2em;
    font-weight: bolder;
    margin: 0 0 1.1em 0;
    padding: 0;
    width: 100%;
    height: 1.2em;
    border: 0;
    border-bottom: 1px solid #dfdfdf;
    background: #fff;
    color: #877b5b;
}

.qf3form.conditional .qf3btn input {
    margin: 35px 0;
    border: 0;
    color: #ababab;
    font-size: 1em;
    width: auto;
    height: 2.5em;
    cursor: pointer;
    box-sizing: content-box;
}

.qf3form.conditional .qf3btn.qfsubmit {
    text-align: right;
}

.qf3form.conditional .qf3btn.qfsubmit input {
    border: 1px solid #ccc;
    color: #fff;
    background: #369bde;
    border-radius: 2em;
    padding: 0.4em 1.5em;
}

.qf3form.conditional .basic_details {
    color: #369bde;
    padding: 40px 0 10px;
    font-size: 1.5em;
    font-weight: bolder;
    border-bottom: 1px solid #e0eaf3;
    margin: 0 10px 40px;
}

.qf3form.conditional input::placeholder {
    color: #ababab;
    opacity: 1;
}

.qf3form.conditional .qf3btn.qfreset input:hover {
    border-bottom: 4px solid #ccc;
}

.qf3form.conditional .qf3btn.qfsubmit input:hover {
    background: #61b3e9;
}

.qf3form.conditional.compact {
    padding: 100px 0 0 0;
}

.qf3form.conditional.compact div.qf3 {
    width: 100%;
}

.qf3form.conditional.compact div.qf3btn {
    width: 50%;
}



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

Все, что вы вводите в QuickForm может переводиться. Для этого нужно использовать языковые константы, которые начинаются с префикса QF_, например, QF_NAME. Для того, чтобы определить константу, ее можно прописать стандартным функционалом: "расширения" -> "языки" -> "переопределение констант". Таким образом можно вводить html код в заголовки, например, ссылки для политики конфиденциальности и согласия на обработку персональных данных. Однако, если вам нужно перевести в "customHtml" (где-то внутри поля), тогда его нужно разбить на части.



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



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


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


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


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



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


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


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

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

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

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

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


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


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


Структура 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/classes/buildform.php");
$qf = new QuickForm3();
echo $qf->getQuickForm($id); // 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. Все крупные почтовые серверы перешли на протокол DMARC. Поэтому нельзя ввести любой адрес и ожидать, что письмо будет доставлено. Оставьте это поле пустым, если не уверены.

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

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

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

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

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

7.11. Изображение в корзине. Подробнее о режиме магазина будет позже.



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



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


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


0руб.


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


8.3. calculatorSum. Выводит результат вычисления калькулятора. Сакральных каких-то особенностей не имеет.


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


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


0
100
0
100
number 1number 2number 3
0+×
0units


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


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


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


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


step 1
step 2
step 3


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






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



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


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


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


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


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


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


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


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




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



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

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