Бесплатный
конструктор форм
для Yootheme Pro

С помощью конструктора форм обратной связи, созданного на основе RadicalForm вы можете легко создавать любые формы с помощью мыши в привычном вам конструкторе страниц.
Скачать
Телеграм чат
Github
Вы можете спросить, если что-то вам не понятно,
в нашем телеграм чате.

Как это работает?

RadicalForm Elements работает совместно с плагином форм обратной связи RadicalForm. В область формы обратной связи можно превратить как секцию, так и любую колонку - достаточно им установить css класс rf-form
Выбираем область, которая у вас будет служить формой - это может быть секция или колонка.
Назначаем ей CSS класс rf-form
Добавляем в эту область нужные элементы билдера в обычном порядке.
Не забываем добавить кнопку отправки формы.
Настраиваем действия, которые нужно совершить после отправки и необходимые интеграции в плагине RadicalForm.
Историю отправки форм можно будет найти там же.

Что делать с именами полей?

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

Используйте стандартные средства Joomla по переопределению языковых констант

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

Многошаговые формы (Квизы, Quiz)

Для содания опросов, квизов, калькуляторов и других форм, разбитых на несколько шагов, предназначены дополнительные кнопки, «Next» и «Previous».
Многошаговая форма строится внутри секции. Вся секция представляет собой одну многошаговую форму, а каждый шаг в ней – это один ряд (или строка).
Ключевыми точками по которым осуществляется переход от одного шага к другому, является кнопка NEXT. Именно поэтому в каждом шаге должна находиться такая кнопка или элемент с классом .rf-next
Последний шаг в форме тоже должен содержать элемент NEXT или можно добавить класс .rf-next кнопке Submit.

Как создать многошаговую форму?

  • 1 шаг:
    Указываем классы rf-form и rf-steps для секции
  • 2 шаг:
    Для каждого ряда (строки) нужно установить внешний отступ в none.
  • 3 шаг:
    Неактивные шаги (строки или ряды) помечаются атрибутом hidden
  • 4 шаг:
    проверяем Step CSS классы – они указывают на следующие шаги.

Какие классы нужно указывать в поле Step CSS classes?

  • Если секция используется по умолчанию:
    не меняем ничего и оставляем классы как были:
    .rf-steps > .uk-container > div
  • Cекция имеет фоновое изображение:
    устанавливаем этот класс:
    .rf-steps > div > .uk-container > div
  • Ряд (строка) имеет установленную максимальную ширину:
    устанавливаем этот класс:
    .rf-steps > .uk-container > div > div
Для работы многошаговых форм в RadicalForm была создана специальная функция, которая скрывает предыдущий шаг и открывает следующий. Были предпринятые специальные меры, чтобы при переключении шагов страница не дергалась.
Чтобы эта функция работала корректно ей надо передавать имя класса кнопки ровно таким, каким оно написано в инструкции – .rf-steps > .uk-container > div. Это просто путь к строке, которая которая является шагом в мношаговой форме. Переход по шагам осуществляет сам скрипт и ориентируется по элементам NEXT, которые служат для него индикатором шага.

пример оформления подобной формы

© Hika.su