Обзор

Описание

Основные характеристики формы:

  1. Встроенная защита от спама, плюс поддержка капчи.
  2. Поддержка отправки сообщения нескольким получателям. Поддержка отправки писем через SMTP.
  3. Поддержка прикрепления неограниченного числа файлов.
  4. Поддержка подключения практически любых форм.
  5. Можно подключать любое число форм на одной странице.
  6. Поддержка всплывающего окна.
  7. В шаблонах имеется поддержка шаблонизатора Twig.
  8. Поддержка валидации в виде всплывающих подсказок, настройки масок ввода.

Системные требования

  • Работает с PHP 5.2.17 и выше.
  • Работает c IE6 и выше. Всплывающее окно работает, начиная с IE9.

Примеры

Простое модальное окно

Запустить пример


Модальное окно заказа обратного звонка

Заказать звонок


Заказ звонка

Установка

Как подключить скрипт

Для установки нужно подключить скрипты в указанной последовательности:

<!-- Rockform -->
    <link href="/rockform/frontend/themes/default/main.css" type="text/css" rel="stylesheet" />
    <script data-main="/rockform/frontend/lib/app" src="/rockform/frontend/lib/require.min.js"></script>
<!-- // Rockform -->

Альтернативный вызов, например, если метод выше не работает.

<!-- Rockform -->
    <link href="/rockform/frontend/themes/default/main.css" type="text/css" rel="stylesheet" />
    <script src="/rockform/frontend/lib/jquery.min.js"></script>
    <script src="/rockform/frontend/lib/jquery.mask.min.js"></script>
    <script src="/rockform/frontend/lib/jquery.form.min.js"></script>
    <script src="/rockform/frontend/lib/baseform.min.js"></script>
<!-- // Rockform -->

Для встроенной формы

Для подключения существующей формы на странице достаточно тегу form добавить атрибут с названием конфигурации data-bf-config="Название_конфигурации".

Можно оставить пустым, тогда конфигурация возьмётся из папки по умолчанию: /configs/default/.

Для начала нужно настроить шаблон, который можно найти в папке /configs/default/templates/form_popup.html. В него можно передать любой html-код с формой, он подхватится автоматически. Работает с поддержкой шаблонизатора Twig.

Для вызова всплывающего окна нужно добавить атрибут data-bf-config="" на любой тег, кроме формы.

В всплывающую форму можно передать параметры через data-атрибуты, например: data-bf-field_title="Параметр"

Где title можно заменить на своё название.

Стоит учесть, что здесь обязательно нужно использовать нижнее подчёркивание.

Переданная переменная будет доступна в шаблонах как: {{field_title}}.

Шаблоны

Шаблон отправки на почту

Шаблон лежит в папке /templates/report_on_mail.html.

В качестве шаблона для полей используется конструкция {{название_поля_ввода}}. Поддерживает работу с шаблонизатором Twig.

Также доступны системные перенные:

Переменная Описание
{{field_page_link}} Адрес страницы оформления формы.
{{field_page_h1}} Тег h1 страницы оформления формы.

Шаблон всплывающего окна

Шаблон лежит в папке /configs/default/templates/form_popup.html.

Для закрытия окна по кнопке из формы - ей нужно добавить атрибут data-bf-popup='close'

Шаблон ответа об успешной отправке

Шаблон лежит в папке /configs/default/templates/form_success.html.

Стоит учесть, что здесь обязательно нужно добавить атрибут data-bf-success="" в тег обёртки шаблона.

Настройки

Как задать настройки

Настройки хранятся в .ini формате и находятся по умолчанию в файле /configs/default/config.php.

rockform/
└── configs/
    └── default
        ├── templates
        │   ├── form_popup.html
        │   └── report_mail.html
        ├── config.php
        └── events.php

Название конфигурации совпадает с именем папки в директории /configs/. По умолчанию, при пустом вызове, настройки берутся из /configs/default/. Можно создать сколько угодно конфигураций, просто копируя папку default с другим названием и меняя параметры на свои.

Стоит отметить, что конфигурации наследуются от /configs/default/config.php, поэтому можно опускать почту и другие повторяющиеся параметры. Не наследуется только секция валидации.

Доступные настройки

Для настроек можно использовать названия полей из формы и суперглобального массива $_SERVER.

Например: subject = 'Письмо от {{username}}'. Где username, - это значение атрибута поля ввода name="username".

Параметр Значение по умолчанию Пример Обязательное Описание
mail_to Да Почта получателей. Можно несколько через запятую.
subject Письмо с сайта Заголовок письма.
from_email from@{{SERVER_NAME}} your_mail@yandex.ru Почта, которая будет указана в качестве адреса отправителя. Совпадает с пользователем SMTP.
from_name Из {{SERVER_NAME}} Имя или название источника отправителя.
used_lexicon default Лексикон
disable_mail_send 0 Не отправлять почту
SMTPHost smtp.yandex.ru Specify main and backup SMTP servers Адрес SMTP сервера
SMTPAuth true Enable SMTP authenticationВключение SMTP авторизации
SMTPUsername your_mail@yandex.ru SMTP username SMTP пользователь
SMTPPassword SMTP password SMTP пароль
SMTPSecure ssl ssl Включение шифрования TLS, также доступен `ssl`
SMTPPort 465 465 TCP порт

Валидация

Для включения валидации полей, надо в конфигурационом файле добавить секцию [validation].

Затем перечислить названия полей и атрибуты валидации к ним.

Пример: name_user = 'required,minlength[3],words'. Это будет означать, что атрибут name со значением - name_user будет обязателен для заполнения, минимальное допустимое число символов будет 3 и на вход должны быть переданы только слова.

Атрибуты валидации
Выражение Описание
required Поле становится обязательным для заполнения.
minlength[1] Минимальное число символов. В скобочках указывается значение.
maxlength[10] Максимально число символов. В скобочках указывается значение.
rangelength[1,10] Диапозон числа символов. В скобочках указывается значение.
email Электронная почта.
url Ссылка.
ip ip-адрес.
number Дробные числа.
digits Только цифры.
letter Только буквы.
words Ввод слов.
file[.jpg,.png] Допустимые расширения файлов. В скобочках расширения через запятую.

Всплывающие подсказки

Существует поддержка настройки позиции всплывающих подсказок. Атрибут data-bf-tooltip="" можно задать как глобально для тега form, так и индивидуально для каждого элемента полей ввода.

Доступны следующие атрибуты
Выражение Описание
top right Сверху справа
top center Сверху по центру
top Сверху
top left Сверху слева
bottom Снизу
bottom left Снизу слева
bottom right Снизу справа
left center Слева
right center Справа

Маски ввода

В форме доступны два атрибута для настроек масок:

1. data-bf-mask принимает на вход выражения из таблицы ниже.

Доступны следующие атрибуты маски
Выражение Описание
A Только буквы
0 Только цифры
S Только буквы и цифры

Пример

data-bf-mask="+7 (000) 000-00-00" 

2. placeholder - плейсхолдер, формируется автоматически, но если в плейсхолдере есть цифры или буквы, тогда нужно задать явно через этот атрибут.

Пример

placeholder="+7 (___) ___-__-__" 

Для работы используется плагин jQuery-Mask-Plugin

Добавление капчи

1. Для добавления капчи нужно картинке присвоить атрибут - data-bf-capcha="".

2. В конфигурационном файле указать в секции [validation] параметр bf_capcha = capcha;. Где bf_capcha - значение атрибута name для поля, в который будет вводиться информация с картинки.

Пример

<div class="bf-row">
    <div class="bf-info-img">
    <img width="100" height="50" title="Обновить картинку" data-bf-capcha="" src="/rockform/init.php?type=capcha" alt="" />
    </div>
    <input class="capcha bf-form-control" name="bf_capcha" placeholder="Код с картинки" type="text" value="" />
</div>

Расширение функциональности

Для расширения фунциональности, например, для записи данных из формы в базу данных существует класс расширения.

Класс находится по пути /configs/default/events.php

Для создания специфичной функциональности в своём конфиге нужно скопировать этот файл со своими изменениями.