Forma

Установка

1. Скачать и распаковать последнюю версию

2. Создать директорию с формой (например, callme).

   В директории создать файл-обработчик формы: handler.php и шаблон письма email.php (необязательно).

3. Подключить файл forma.min.js

   <scriptsrc="js/forma.min.js"></script>

4. Обернуть форму в элемент <forma-form>. Атрибут target формы должен содержать адрес обработчика формы (например, /forma/callme/handler.php)

   <forma-form><formaction="/forma/callme/handler.php" method="post"></form></forma-form>

5. Добавить элементы для вывода сообщений:

   Сообщение об успешной отправке:

   <forma-successdefault="Спасибо! Мы свяжемся с вами в ближайшее время!"><forma-success>

   Сообщение об ошибке (то, что зависит от отправителя):

   • неправильно заполненные поля
   • и т.д.

   <forma-faildefault="Произошла ошибка! Проверьте данные и попробуйте отправить форму ещё раз!"></forma-fail>

   Сообщение о фатальной ошибке (то, что не зависит от отправителя):

   • ошибка сервера
   • невозможность отправки письма
   • и т.д.

   <forma-errordefault="Произошла ошибка! Попробуйте отправить форму ещё раз позднее!"></forma-error>

Пример формы

<forma-formclass="callme" imnotarobot="imnotarobot!"><h2>Заказать звонок</h2><divclass="callme-success"><forma-successdefault="Спасибо! Мы свяжемся с вами в ближайшее время!"><forma-success></div><divclass="callme-errors"><forma-faildefault="Произошла ошибка! Проверьте данные и попробуйте отправить форму ещё раз!"></forma-fail><forma-errordefault="Произошла ошибка! Попробуйте отправить форму ещё раз позднее!"></forma-error></div><formaction="/forma/callme/handler.php" method="post"><inputtype="text" name="name" requiredplaceholder="Введите имя" /><inputtype="tel" name="phone" requiredplaceholder="Введите телефон" /><buttontype="submit">Отправить</button></form></forma-form>

Пример обработчика

<?phpnamespacePopArtDesign\Forma;
require_once__DIR__ . '/../forma.php';
imnotarobot();
recaptcha();
$data = validate([
'name' => 'required|minlength:2|maxlength:50',
'phone' => 'required|phone',
]);
$config['mail_message'] = loadTemplate(__DIR__ . '/email.php', $data);
mail();
success();

Валидация

Валидация осуществляется при помощи вызова функции validate(), принимающей список имён полей и соответствющих им правил валидации, разделённых символом |:

// Возвращает массив проверенных данных$data = validate([
'name' => 'required|minlength:2|maxlength:50',
'phone' => 'required|phone',
'email' => 'nullable|email',
'message' => 'required|maxlength:1000',
'file' => 'nullable|uploaded_file:0,1M',
]);

Для валидации используется библиотека rakit/validation.

Основные правила:

• required: Поле обязательно для заполнения
• nullable: Поле НЕ обязательно для заполнения
• phone: Номер телефона
• email: Email
• url: URL
• minlength: Минимальная длина строки. Пример: minlength:5
• maxlength: Максимальная длина строки. Пример: maxlength:1000
• min: Минимальное значение числа. Пример: min:5
• max: Максимальное значение числа. Пример: max:10

Все поля формы должны быть описаны в массиве правил. Для каждого поля обязательно нужно указать required или nullable.

Конфигурация

После установки поведение форм можно изменить в следующих файлах:

• config.php: файл с глобальной конфигурацией для всех форм

• в файле обработчика формы (callme/handler.php и т.д.):

  require_once__DIR__ . '/../forma.php';
  $config['mail_subject'] = $config['site_name'] . ': заказать звонок';

Состояния

Элемент <forma-form> может находиться в нескольких состояниях:

• initial - исходное состояние
• submit - форма отправляется
• success - форма успешно отправлена
• fail - ошибка, которую можно исправить
• error - фатальная ошибка

Информация о состоянии доступна через атрибут state. Это можно использовать для настройки внешнего вида формы через CSS:

/** Сокрытие кнопки во время отправки формы */forma-form[state="submit"] [type="submit"] {
display: none;
}

I'm not a Robot

В простейшем случае для защиты от роботов можно добавлять в форму специальное поле при помощи JavaScript:

<forma-formimnotarobot="imnotarobot!">

Значение поля нужно указать в config.php:

$config['imnotarobot_value'] = 'imnotarobot!';

reCAPTCHA v3

1. Создать капчу в консоли администратора

2. Подключить скрипт:

   <scriptsrc="https://www.google.com/recaptcha/api.js"></script>

3. Добавить к форме идентификатор (например, id="myForm")

   <formid="myForm"></form>

4. Изменить кнопку отправки, указав ключ для капчи и корректный идентификатор формы:

   <buttontype="submit"
   class="g-recaptcha"
   data-sitekey="КЛЮЧ ДЛЯ КАПЧИ"
   data-action="myForm"
   data-callback="submitMyForm"
   ><script>functionsubmitMyForm(token){document.forms['myForm'].requestSubmit()}</script>
   Отправить
   </button>

5. В файле config.php указать секретный ключ:

   $config['recaptcha_secret'] = 'SECRET KEY';
   // Также полезно указать идентификатор действия (формы)// из data-action в файле-обработчике$config['recaptcha_action'] = 'myForm';