QuickForm – это мощный плагин для создания форм на вашем сайте, который позволяет легко реализовать любые формы заказа, калькуляторы и формы обратной связи.
Данное расширение предлагает встроенную защиту от спама, а также специальные виджет-поля и калькуляторы, обеспечивая минималистичный код и интуитивно понятные настройки. В административной панели вы сможете просматривать историю отправлений, управлять вложениями через файловый менеджер, осуществлять поиск по письмам, а также импортировать и экспортировать проекты для удобного переноса форм на другие ресурсы. Кроме того, QuickForm предоставляет инструменты для разработки форм и встроенное описание, что делает его идеальным выбором для профессионалов.
Плагин QuickForm предлагает мощные инструменты для создания разнообразных форм, которые значительно превосходят традиционные контактные формы и калькуляторы. С его помощью вы сможете разрабатывать сложные диагностические формы с зависимыми полями и многоуровневой структурой, а также проводить опросы и тесты. Он обеспечивает сохранение вложенных файлов, что является важной функцией в условиях возможной блокировки почтовыми сервисами. Уникальный виджет магазина позволяет вам строить товарные предложения без ограничений по структуре и сложности расчета стоимости, что делает его идеальным выбором для таких задач, как оформление заказов пластиковых окон, типографской продукции, интерактивных форм с динамическими полями и изображениями, а также записи на прием. Вы также можете создать научный калькулятор или форму для расчета стоимости продуктов.
Несмотря на свою впечатляющую функциональность, QuickForm также отлично подходит для создания простых форм, таких как форма обратной связи. Его компактность, отраженная в названии, соответствует концепции разработки. Опытный разработчик сможет реализовать сложные формы всего за 2-3 дня, в то время как традиционные методы потребовали бы около месяца. Плагин предоставляется бесплатно при условии сохранения ссылки на автора.
Конструктор поддерживает создание форм в модальном окне, отправку данных с использованием AJAX, клонирование групп полей, пошаговые формы, зависимые поля, возможность размещения нескольких форм на одной странице, функционал "форма в корзину", а также индивидуальный или унифицированный дизайн для форм. Он также предлагает различные алгоритмы для калькуляторов, позволяя решать как простые, так и сложные задачи.
QuickForm — это универсальный конструктор динамических форм и калькуляторов. Вы можете ознакомиться с динамическими возможностями на нашем сайте. Примеры форм на этом сайте деактивированы для отправки, но вы сможете увидеть их функционал в действии.
На этой странице вы найдете простые формы, готовые к скачиванию. Разработка более сложных форм потребует определенных знаний и навыков, однако, чем больше у вас опыта, тем более функциональные и интересные формы вы сможете создать. Этот конструктор форм совместим с любыми версиями Joomla и WordPress, а также легко интегрируется в другие CMS, что делает его мультиплатформенным решением.
Пример разработки (гайд): Делаем форму "Запись на Консультацию" для сайта.
QuickForm способен создавать разнообразные веб-интерфейсы. С его помощью можно разработать мощный интернет-магазин даже на одностраничном сайте.
Адаптивная контактная форма.
Готовый проект, который можно скачать и импортировать в QuickForm. Разрабатывался для модального отображения:Contact us
Простая контактная форма для сайта.
Простой проект в нейтральном стиле. Он же в модальном варианте:Contact us
Другие примеры:
Форма записи на прием к врачуПростой кредитный калькуляторБольше примеров
Пример. Интерактивная форма с картинками, зависимыми полями и калькулятором.
QuickForm и CSS.
QuickForm предлагает готвоые функции на PHP и JavaScript для работы с формами, но когда дело доходит до их визуального оформления, тут начинается ваша творческая свобода! В простых случаях вы можете воспользоваться одним из примеров, доступных на нашем сайте. Однако помните, что дизайн формы — это уникальный элемент вашего проекта, который отражает вашу индивидуальность.
Стоит отметить, что в комплект входит только один CSS файл — default.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;
}
Теперь вы можете стилизовать форму под дизайн сайта, задать мне вопросы через поддержка, в общем, делать обычные вещи.
Обратите внимание, что в 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" поля. В формуле пишется математическое выражение, которое включает эти переменные. Обычная распространенная логика. Это простой, но ограниченный по возможностям тип калькулятора, так как он считает поля, value которых изменяются пользователем. В качестве примера можно посмотреть Простой кредитный калькулятор.
Тип калькулятора "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
Описание полей.
Перед тем, как описывать, уточню несколько моментов. Все атрибуты, доступные полям в стандартном 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 — это бесплатное расширение, которое добавляет авторскую ссылку на страницу сайта. Однако, существует легальный способ удалить эту ссылку. Для этого вам необходимо поддержать развитие проекта. После оказания помощи, активационный код для удаления ссылки будет автоматически отправлен на указанный вами адрес электронной почты.