QuickForm – это мощный плагин для создания форм на вашем сайте, который позволяет легко реализовать формы заказа, калькуляторы, формы обратной связи.
Данное расширение включает встроенную защиту от спама, специальные виджет-поля и калькуляторы, минималистичный код и интуитивно понятные настройки. В административной панели вы можете просматривать историю отправлений, управлять вложениями через файловый менеджер, осуществлять поиск по письмам, а также, импортировать и экспортировать проекты для удобного переноса форм на другие сайты. Кроме того, QuickForm предоставляет интересные инструменты для разработки форм, есть встроенное описание. Он подходит и для начинающих вебмастеров, и для профессиональных разработчиков.
Расширение существует в виде плагина (WordPress) и в виде компонента (Joomla). С его помощью вы сможете разрабатывать сложные диагностические формы с зависимыми полями и многоуровневой структурой, создавать древовидные структуры, разделяющиеся формы, проводить опросы и тесты. Он обеспечивает сохранение вложенных файлов, что является важной функцией в условиях возможной блокировки почтовыми сервисами. Встроенный режим магазина позволяет вам строить товарные предложения без ограничений по структуре и сложности расчета стоимости, что делает его идеальным выбором для таких задач, как оформление заказов пластиковых окон, типографской продукции, интерактивных форм с динамическими полями, формы записи на прием, фильтры подбора по параметрам, и так далее. Вы также можете создать научный калькулятор или форму для расчета стоимости продуктов.
QuickForm отлично подходит для создания простых форм, таких как, например, простая форма обратной связи. Он компактный, быстрый, не требует дополнительных ресурсов. QuickForm предоставляется бесплатно при условии сохранения ссылки на автора.
Плагин поддерживает создание форм в модальном окне, отправку данных с использованием AJAX, клонирование групп полей, пошаговые формы, зависимые поля, возможность размещения множества форм на одной странице, функционал "форма в корзину", индивидуальный или общий дизайн для форм. Он также предлагает различные алгоритмы для калькуляторов, позволяя решать как простые, так и сложные задачи.
В целом, QuickForm - это универсальный конструктор динамических форм и калькуляторов. Вы можете ознакомиться с динамическими возможностями на этом сайте. Примеры форм на этой странице деактивированы для отправки, но увидеть их функционал в действии можно.
На этой странице вы также найдете формы, готовые к скачиванию. Разработка более сложных форм потребует определенных знаний и навыков, однако, чем больше у вас опыта, тем более функциональные и интересные формы вы сможете создать. Этот конструктор форм совместим с любыми версиями Joomla и WordPress, а также легко интегрируется в другие CMS, что делает его мультиплатформенным решением.
Пример разработки (гайд): Делаем форму "Запись на Консультацию" для сайта.
QuickForm способен создавать разнообразные веб-интерфейсы. С его помощью можно разработать мощный интернет-магазин даже на одностраничном сайте.
Адаптивная контактная форма.
Готовый проект, который можно скачать и импортировать в QuickForm. Разрабатывался для модального отображения:Contact us
Простая форма обратной связи.
Простой проект в нейтральном стиле. Он же в модальном варианте:Contact us
Другие примеры:
Форма записи на прием к врачуПростой кредитный калькуляторБольше примеров
Пример. Интерактивная форма с картинками, зависимыми полями и калькулятором.
QuickForm и CSS.
Этот конструктор форм включает готовые функции PHP и JavaScript для работы с формами, но когда дело доходит до их визуального оформления, тут начинается творческая свобода. В простых случаях вы можете воспользоваться одним из примеров, доступных на этом сайте. Однако помните, что дизайн формы — это уникальный элемент вашего проекта, который отражает вашу индивидуальность. Расширение поможет создать функциональную форму, но ее оформление остается за вами.
В комплект входит только один CSS файл — default.css. Но не стоит его использовать в своем проекте. Этот файл содержит базовые стили для всех виджетов и предназначен для того, чтобы сделать с него копию. Вносить изменения в него не следует, так как файл обновляются вместе с компонентом. Вместо этого создайте свой собственный файл CSS в настройках проекта формы.
Откройте настройки проекта и создайте новый файл стилей с именем, например, example.css. Не забудьте отметить кнопку "копировать стили". Это позволит автоматически создать файл с уже прописанным префиксом классов, который обеспечит совместимость форм с разными дизайнами на одной странице. В данном случае префикс будет "example". Так вы сможете легко управлять стилями и придавать вашим формам уникальный вид.
Пример:
.example {
font-size: 14px;
max-width: 800px;
margin: 0 auto;
padding: 80px 0;
background: linear-gradient(0, #1a5889, #56d7d3);
}
.example .qf3 {
width: 74%;
margin: 0 auto;
}
Теперь вы можете стилизовать форму под дизайн сайта. Если у вас нет опыта работы с CSS, можно оставить заявку здесь: поддержка.
Обратите внимание, что в QuickForm есть особенности. Например, класс "compact", который добавляется к форме, если ширина родительского контейнера становится меньше 500px. Это полезный элемент для адаптивной верстки. Еще QuickForm добавляет класс "touch" или "desk", в зависимости от того, является ли устройство тачпадом или нет.
QuickForm и зависимые поля.
QuickForm предлагает мощные возможности для создания зависимых полей и групп полей, что позволяет вам создавать динамичные и интерактивные формы. В качестве зависимых полей могут использоваться текст, изображения, стили или HTML-код. Зависимые поля в QuickForm поддерживают неограниченный уровень вложенности и легко интегрируются с калькуляторами и другими виджетами.
Вы можете создать древовидную структуру формы любой сложности, процесс интуитивен, не требует дополнительных инструкций. Просто свяжите группу полей с полем из другой группы, и они станут связанными.
Ниже представлен пример, демонстрирующий использование зависимых полей вместе с виджетами "qfAdder" и "spoiler", который иллюстрирует преимущества данной функциональности.
QuickForm и калькулятор.
QuickForm создает калькуляторы, начиная от простых торговых расчетов и заканчивая научными. Вы можете интегрировать в форму калькулятор уже после того как она будет создана. При этом, сама форма может включать зависимые и клонируемые поля, динамические структуры, интерактивные элементы, подформы, логические разделители. В QuickForm предусмотрены четыре типа калькуляторов, каждый из которых может быть удобнее в том или ином случае. Более подробную информацию о каждом из типов вы найдете в настройках проекта формы на вкладке "Калькулятор". Ниже некоторые детали.
Тип калькулятора "default". Это динамичный вариант, который не требует формулы. Зайдите в настройки любого поля и посмотрите на вкладку калькулятора. Впишите параметр "math", например, +5. Добавьте еще одно поле с таким же "math". Добавьте специальное поле "calculatorSum" для вывода результата. Вы увидите, что калькулятор заработал и показывает результат: 10. Используя различные модификаторы, скобки и зависимые поля, можно решить большинство математических задач. Каждое зависимое поле в данном случае может выступать в роли условия типа if else, разветвляя логику и запуская собственную ветку расчета.
К сожалению, не каждый вариант расчета можно выполнить при помощи этого типа. Из ограничений можно отметить то, что таким способом выводится только один результат. Кроме того, бывает математическая логика, требующая повторного использования какой-либо переменной при расчете. Например, мы имеем формулу: итог = (a + b) * c + a * c + b. Сделать такой калькулятор способом "default" будет сложно.
Тип калькулятора "multiple". Особенностью этого типа калькулятора является привязка математической логики к id полей формы. Это гибкий вариант, способный выводить любое количество результатов расчета. Он поддерживает логические операции, распределение математики между полями и задающей формулой.
Формула этого калькулятора:
408.4 = {408.2};
408.5 = {408.1} * {408.2}
408.4 и 408.5 - это id специальных полей calculatorSum (их два). Одно выводит количество дней, второе выводит произведение количества дней на тариф. {408.2} - это id поля календаря. {408.1} - id радиогруппы выбора класса апартаментов. В "math" радиокнопок записан суточный тариф.
Выражение 408.5 = {408.1} * {408.2} буквально означает: напиши в поле с id 408.5 "math" поля {408.1} умноженный на "math" поля {408.2}.
Скачать пример можно здесь: Калькулятор стоимости проживания в отеле
Тип калькулятора "simple". Этот калькулятор использует традиционную запись формулы, используя переменные. Имя переменной записывается в "math" поля. В формуле пишется математическое выражение, которое включает эти переменные. Распространенная логика, на которой сделаны 99% всех калькуляторов для сайтов. Это простой, но ограниченный по возможностям тип калькулятора, так как он считает поля, value которых изменяются пользователем. В качестве примера можно посмотреть Простой кредитный калькулятор.
Тип калькулятора "custom". Этот пишется на php как вам нужно. Просто создайте php файл с логикой, а QuickForm обеспечит простую интеграцию с формой. Самый функциональный и гибкий тип калькулятора. В большинстве случаев, я использую именно этот, поскольку ко мне обращаются за сложными решениями.
Калькуляторы QuickForm обладают высокой гибкостью и адаптивностью. Вы можете создавать как торговые калькуляторы (Cost calculator), так и научные (Scientific calculator), используя встроенные типы. Или вы можете встроить собственный тип калькулятора на программном уровне. Для получения более подробной информации, посетите страницу Форма с калькулятором. Если у вас возникнут вопросы, не стесняйтесь обращаться — я с радостью окажу помощь.
Как вывести форму на страницу сайта.
Вывод осуществляется разными способами:
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
Описание полей.
Перед тем, как описывать, уточню несколько моментов. Все атрибуты, доступные полям в стандартном 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. При нажатии кнопки, форма не будет отправлена на почту, а будет добавлена в корзину компонента. Подробнее про режим магазина на странице Форма с корзиной.
10. qfTabs.
Выводит интерфейс "вкладки". Можно указать вертикальный или горизонтальный вариант. На картинке пример горизонтальных вкладок.. Подробнее про вкладки есть здесь: Форма со вкладками.
11. qfcalendar. Выводит стилизованный календарь. Можно выводить одиночный или сдвоенный календарь. Сдвоенный календарь при использовании калькулятора пишет в v настройки "math" количество дней, составляющих его разницу. В настройках можно отключить прошедшие дни, выходные дни.
12. stepper. Выводит пошаговый интерфейс формы (шаг 1, шаг 2...).
stepper состоит из двух частей.
1. stepperbox - контейнер, ограничивающий область формы, в которой он будет выполняться. То есть, границы действия виджета. Может быть всей формой или ее частью.
2. stepperbtns - кнопки "вперед назад". (Должны находиться внутри контейнера).
Скачать пример можно здесь: форма с футболками
Еще один пример: Простой пример формы с виджетом "stepper"
13. spoiler. Поле, которое выводит спрятанный контент (часть формы). При нажатии кнопки контент появляется. При повторном нажатии - прячется. В настройках можно указать модальный вывод спрятанного контента.
14. qfAdder. Виджет, предоставляющий интерфейс упрощенной корзины. Для использования не нужно включать режим магазина в компоненте. Виджет состоит из двух специальных полей: "boxadder" - набор добавляемых товаров, и "addercart" - корзинка с добавленными товарами. Таким образом, корзинку можно вывести отдельно в нужном месте формы.
Проблемы и часто задаваемые вопросы.
1. Форма появляется на мгновение и исчезает. Эта ошибка связана с проблемами авторской ссылки. Если у вас нет активационного кода, авторская ссылка должна присутствовать на странице. Иначе, форма не будет отображаться. Если вы используете плагины, закрывающие внешние ссылки от индексации, тогда добавьте QuickForm в исключения или получите активационный код.
2. Калькулятор не считает. Проверьте консоль браузера на наличие ошибок JavaScript. Серьезные ошибки в других скриптах могут полностью или частично блокировать работу компонента или всего сайта.
3. Калькулятор считает неправильно. Калькулятор считает по правилам математики. Если результат не соответствует ожидаемому, ищите ошибку в математике.
4. Письма приходят в папку спам. Это говорит о том, что ваш хостинг отправляет письма с IP адреса, находящегося в чёрном списке почтового сервера, который письмо получает. Существуют и другие причины, они определяются условиями работы почтового сервиса, на который приходит письмо и настройками почтового сервера вашего хостинга.
5. Письма не приходят совсем. Компонент использует встроенную в CMS функцию отправки почты. Таким образом, в первую очередь нужно убедиться, что ваш сайт в принципе способен отправлять письма. Сделайте отправку тестового письма из глобальных настроек панели управления Joomla.
6. Форма выглядит некрасиво. Компонент QuickForm не создавался как дизайнерское решение, – это решение функциональное.
7. Не работает капча. В настройках компонента должны быть введены ключи, соответствующие домену вашего сайта. Если ваш сайт переехал на другой домен, соответственно, вам нужно получить новые ключи.
8. Авторская ссылка выводится крупным шрифтом. Как правило, это означает, что в настройках проекта не выбран css файл, отвечающий за стилевое оформление.
Поблагодарить за QuickForm.
QuickForm — это бесплатное расширение, которое добавляет авторскую ссылку на страницу сайта. Однако, существует легальный способ удалить эту ссылку. Для этого вам необходимо поддержать развитие проекта. После оказания помощи, активационный код для удаления ссылки будет автоматически отправлен на указанный вами адрес электронной почты.