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

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

Сразу стоит оговориться, что понадобятся базовые знания 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". Видим такую картину.



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



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



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

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



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



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



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



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



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



3. QuickForm 3 и CSS.

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



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


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




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




Если мы выведем проект на страницу сайта и откроем панель "инструменты разработчика" в браузере, то увидим, что верхнему контейнеру с формой присвоен класс "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". Теперь создадим первую группу полей, как на картинке:.




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







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. Сделайте вывод формы на страницу сайта.



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


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

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




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