[АНОНС] SendIt - "It's revolution, Johnny!"

Приветствую вас, мои читатели. Никто не просил, но я создал новый компонент для работы с формами на сайте. И имя ему — SendIt. Вам, наверное, интересно чего же такого революционного в моём пакет? Если коротко то, при его использовании не нужно вызывать сниппет для отправки формы. Просто добавьте форме 1 атрибут и она будет отправляться на почту. Подробности ниже.

1. Отправка простых форм.

Чтобы отправить форму нужно добавить ей атрибут data-si-form в качестве значения нужно указать имя формы (параметр formName у сниппета FormIt). Имя формы должно быть уникальным в пределах сайта. Оно используется для хранения данных формы в LocalStorage и Cookie.
В будущем планирую создать в админке интерфейс для управления формами, аналог Formalicious, только название попроще придумаю. И тогда по имени формы можно будет найти её в БД.

Несмотря на то, что вызывать сниппет необязательно, в большинстве случаев, вы не захотите использовать стандартные настройки. Чтобы задать свои параметры для формы, нужно создать пресет в файле sendit.inc.php (путь к файлу с пресетами можно будет изменить в системных настройках). Выглядит это так

<?php

return [
    'default' => [
        'validate' => 'phone:required,username[second]:required,user[*][name]:required,user[*][email]:email,politics:checkbox:required,email:email:required'
    ],
    'onestepform' => [
        'extends' => 'default',
        'redirectTo' => 1,
        'redirectTimeout' => 3000,
        'clearFieldsOnSuccess' => 1,
        'fieldNames' => 'phone==Телефон',
        'successMessage' => 'Форма отправлена!',
    ]
];

Обратите внимание на параметр extends — он позволяет наследовать параметры другого пресета, в данном случае с ключом default. Наследование не рекурсивное, т.е. если defaults тоже будет иметь параметр extends например со значением third, параметры пресета third унаследованы не будут.

Какие параметры доступны?
Вы можете использовать все те же параметры, что и при работе с AjaxFormItLogin. Но есть и отличия. В частности, чтобы передать псевдонимы полей, не нужно использовать параметр aliases, вместо этого следует использовать fieldNames.. Параметр transmittedParams вообще не используется. Все параметры пресета передаются в JS по умолчанию и изменить это нельзя.
Для удобства обработки полей в письме, все данные массива $_POST упаковываются в JSON. Это позволяет выводить поля в чанке письма таким образом

{set $fields = $fields | replace: '"' : '"' | fromJSON}
{set $fieldsAliases = $fieldsAliases | replace: '"' : '"' | fromJSON}

{foreach $fields as $k => $v}
    {if !($k in list ['fields', 'fieldsAliases'])}
    <p><strong>{$fieldsAliases ? $fieldsAliases[$k] : $k}</strong>: {$v | join: ', '}</p>
    {/if}
{/foreach}

Вам больше нет нужны передавать такой параметр как customValidators он будет сформирован автоматически на основании параметра validate. Так же больше не возникнет ситуации в которой пользователь получает сообщение об успешной отправке, хотя на самом деле форма отправлена не была по той причине, что в параметре validate было поле, которого нет в передаваемых данных. Теперь если поле есть в validate, у него нет псевдовалидатора checkbox и оно отсутствует в $_POST, это поле будет удалено из validate. Если же псевдовалидатор checkbox есть, а поля нет в $_POST, поле будет добавлено в $_POST с пустым значением. Как вы поняли, это позволяет валидировать чекбоксы как и все остальные поля. Сниппет-валидатор checkbox создавать не нужно, его роль только в ом, чтобы отметить поле типа чекбокс.

Для обработки форм используется сниппет FormIt, однако вы можете пожелать использовать свой сниппет. На здоровье! Более того, ваш сниппет может быть файловым, если на сайте установлен pdoTools. Кроме того, вы можете использовать валидацию FormIt, для этого нужно просто указать в пресете параметр validate.

Нечасто, но бывают кейсы, когда вы заранее не знаете какой объем данных будет отправлен через форму. Например, форма с возможностью зарегистрировать несколько человек на мероприятие. По каждому участнику нужно передать одинаковы набор данных, допустим ФИО и телефон. Проще всего создать такую форму

<form data-si-form="regPeople">
        <label>
            <input type="text" name="fio[0]"  placeholder="ФИО">
            <p class="color_error px-15 fs-16-12" data-si-error="fio[0]"></p>
        </label>
        <label>
            <input type="email" name="email[0]"  placeholder="Email">
            <p class="color_error px-15 fs-16-12" data-si-error="email[0]"></p>
        </label>
        <label>
            <input type="text" name="fio[1]"  placeholder="ФИО">
            <p class="color_error px-15 fs-16-12" data-si-error="fio[1]"></p>
        </label>
        <label>
            <input type="email" name="email[1]"  placeholder="Email">
            <p class="color_error px-15 fs-16-12" data-si-error="email[1]"></p>
        </label>
        <button type="submit">Оправить</button>
    </form>

Такой вариант позволяет с помощью JS добавлять N пар полей fio-email, но как их валидировать? При использовании SendIt допускается использовать такую запись

'validate' => 'fio[*]:required,email[*]:required:email'

Так же обратите внимание, блок для вывода ошибок валидации определяется не классом, а атрибутом data-si-error с именем валидируемого поля. В отличие от класса, тут есть больше вариантов селекторов, в частности класс «email[1]» при попытке получить по нему DOMElement в JS привёл бы к ошибке.

По умолчанию, форма отправляется по событию «submit», однако бывают ситуации, когда нам нужно отправить какое-то поле после изменения, например, кода делаем регистрацию по телефону и нужно выслать код подтверждения, или при вводе, когда хотим вывести подсказки. SendIt позволяет это сделать добавив полю или всей форме атрибут data-si-event, который поддерживает два значения change и input. Все события должны быть инициированы пользователем, т.е. event.isTrusted должно быть true. Думаю это ограничение положительно скажется на количестве спама. Однако, защита от отправки форм ботами этим не ограничивается. После первого клика пользователем, в куки добавляется параметр, который позволяет идентифицировать запрос, как запрос отправленный пользователем.
Для защиты от внешнего доступа SendIt генерирует токен, которым подписывается каждый запрос на сервер.

Как вы можете влиять на все эти процессы? Конечно же через события в JS. Вам доступны следующие события

• si:init — возникает после загрузки всех модулей
• si:send:before — возникает перед отправкой данных на сервер, позволяет изменить параметры или прервать отправку.
• si:send:reset — возникает перед сбросом введенных данных, позволяет отменить сброс.
• si:send:after — возникает сразу после получения ответа от сервера и до выполнения обработчиков success или error, позволяет отменить дальнейшие действия
• si:send:success — возникает если задача выполнена успешно, позволяет отменить обработчик success
• si:send:error — возникает если задача не выполнена, позволяет отменить обработчик error
• si:send:finish — возникает после выполнения всех обработчиков

С базовым функционалом всё. Но возможности SendIt не ограничиваются отправкой простых форм.

Вы можете создавать поэтапные формы с произвольным ветвлением. Такие формы отображают на каком вопросе находится пользователь, на какой примерно процент вопросов он ответил и поддерживают все те же возможности, что и обычные формы. Вы так же можете вмешаться в работу модуля, используя событие si:quiz:change позволяющее управлять переключением вопросов.

Я знаю, что вы всегда мечтали дать пользователям сайта возможность отправлять на сервер огромные файлы. Поздравляю, теперь вы можете это сделать. SеndIt умеет загружать файлы пачками отдельно от остальных полей с отображением прогресса загрузки каждого отдельного файла. После загрузки, пользователь может удалить один или все файлы и загрузить новые. Файлы можно прикрепить к письму передав всего один параметр. При этом сервер не будет захламляться, все загруженные файлы после обновления страницы или закрытия вкладки браузера будут удалены с сервера. Для любителей всё контролировать так же предусмотрено событие fu:before:add — срабатывает после полной загрузки файла и перед добавлением его в список загрузок.

Ну и вишенка на этом шикарном торте: сохранение данных форм. Значения всех полей, кроме паролей, форм с атрибутом data-si-form сохраняются в localStorage и не теряются при перезагрузке страницы, однако удаляются после отправки формы. Конечно же есть события

• sf:set — возникает перед установкой сохраненных данных формы, позволяет это прервать установку значений или изменить данные
• sf:save — возникает перед сохранением данных формы, позволяет это сохранение прервать или изменить данные
• sf:remove — возникает перед удалением данных формы, позволяет это удаление прервать

Есть ещё модуль уведомлений. Из коробки используется библиотека IziToast. Их можно использовать отдельно от остального функционала. Я реализовал возможность обновления данных в уведомлении и передачу индивидуальных параметров для каждого уведомления, если нужно. Так, например, для отображения прогресса загрузки файлов, используются изменённые параметры.

В конце ещё пару слов о серверной части. Компонент генерирует системное событие OnGetFormParams, используя его можно на лету менять параметры отправки формы. В частности если вы используете Formalicious, то можно получить параметры заданные в нём и добавить их к параметрам пресета из файла.

Поддержка AjaxFormItLogin прекращена, однако весь функционал будет доступен в SendIt.

Посмотреть на работу SendIt можно на демо-сайте
О возможности скачать пакет для установки будет сообщено отдельно.

Спасибо за внимание!