Конструктор ajax-форм - nm_forms

Краткое описание

Данный конструктор предназначен для простой интеграции форм в ваш проект. Поддерживаются формы двух видов:

модальне (modal)
инлайновые (inline)

В nm_forms формы хранятся в отдельных файлах-шаблонах, каждая со своими стилями. Подгружаются формы посредствам ajax-запросов. Во все формы можно передать необходимые параметры, чтобы затем их обработать или подставить в нужные поля. Также присутствует валидация полей:

на пустоту
на тип поля (пока только телефон, email и url)
на расширение прикрепленного файла

##Требования

Наличие на сайте подключенной библиотеки jQuery 1.8.2+
PHP 5.2+

##Подключение

Скопируйте папку nm_forms в корень сайта вручную. Либо скопируйте файлы nm_forms_zipped.zip и nm_forms_unzip.php из папки zipped, залейте их на сайт в папку /nm_forms/ (нужно создать ее в корне сайта). Затем запустите файл nm_forms_unzip.php: будет произведена операция разархивирования в текущую папку, после чего файлы nm_forms_zipped.zip и nm_forms_unzip.php будут автоматически удалены с сервера.
Убедитесь, что у вас в проекте подключена библиотека jQuery 1.8.2+
В <head> или перед закрывающим </body> вставьте скрипт и рабочие стили конструктора:

<!--nm_forms-->
<script type="text/javascript" src="/nm_forms/assets/js/nm_forms.js"></script>
<link rel="stylesheet" type="text/css" href="/nm_forms/assets/css/nm_forms.css" />
<!--/nm_forms-->

##Настройка action.php

Файл action.php отвечает за обработку переданных в него данных и отправку писем. Рассмотрим основные натройки и за что они отвечают.

$mail_type - задает тип отправки письма. Может быть равен либо 'mail', либо 'smtp'. Если указан тип 'smtp', то ниже по файлу необходимо будет прописать настройки подключения к smtp-серверу.
$from - параметр, в котором указывается от имени какого email-адреса будет отправлено письмо.
$from_name - параметр, отвечающий за то, от чьего имени будет отправлено письмо.
$arRecievers - массив получателей письма.
$subject - тема письма.
$form_type - в этом параметре передается цифра, за которой закреплен тот или иной ответ на отправку письма. То, что увидет пользователь, когда письмо будет отправлено.

##Использование nm_forms

###Файл формы и ее шаблон. Основные требования и возможные параметры.

Все файлы-шаблоны с формами располагаются в папке /nm_forms/assets/tpl. В начале каждого файла должна быть вставлена строчка:

<?include "../../helper.php";if(check_access(__FILE__)){$arParams = getParams($_POST);loadCSS(__FILE__);}?>

Она не допускает отрисовки формы через прямое обращение к файлу. Также она подгружает стили формы и обрабатывает входящие параметры, переданные форме (об этом ниже).

Возьмем код типичной модальной формы и разберем подробно все параметры и особенности:

<?include "../../helper.php";if(check_access(__FILE__)){$arParams = getParams($_POST);loadCSS(__FILE__);}?>
<!--form layout here -->
<div id="login-modal" data-nmforms data-fadeout-delay="3000">
		<div class="formmodal-container">
			<h1>Форма обратного звонка</h1><br>
		  <form>
			<input type="text" name="text:Ваше имя" class="required" data-nm-forms-validate placeholder="Введите имя">
			<input type="text" name="text:Ваш телефон" class="required" data-nm-forms-validate="phone" placeholder="Введите телефон">
			<input type="text" name="text:Удобное время звонка" class="" placeholder="Удобное время звонка">
			<input type="hidden" name="hidden:norobots">
            <input type="hidden" name="hidden:subject" value="Новая заявка на обратный звонок">
            <input type="hidden" name="hidden:form_type" value="2">
            <input type="hidden" name="hidden:yandex_metrika_id" value="id-otpravit">
			<input type="submit" name="login" class="login formmodal-submit" value="Отправить" data-nmforms-send-button>
		  </form>
		</div>
</div>

**ОБЯЗАТЕЛЬНЫЕ ПАРАМЕТРЫ!!!**

Чтобы формы работали, они должны быть обязательно обёрнуты в div с атрибутом data-nmforms. Форме не обязательно давать id или class, обработчик прекрасно отличит одну форму от другой.
На кнопку отправки формы вешается атрибут data-nmforms-send-button. Кнопка отправки формы должна находиться внутри div'a с атрибутом data-nmforms.

**Элементы управления**

Все управляющие элементы формы разделены на несколько групп:

Текстовые: text - input[type="text"], textarea
Чекбоксы: checkbox - input[type="checkbox"]
Радиокнопки: radio - input[type="radio"]
Селекты: select
Скрытые (системные): hidden
Файлы: file - input[type="file"] (пока не введен, но в процессе разработки)

Синтаксис названий следующий: в атрибуте name= задается тип поля, и через двоеточие задается название этого поля. Например, name="text:Ваше имя". То, что пользователь укажет в этом поле, будет значением. Валидация

К каждому элементу формы можно прикрутить валидацию. По умолчаню ее нет, и форма отправится даже без заполненных полей. Чтобы добавить валидацию, нужно к полю добавить атрибут data-nm-forms-validate и класс required. Если атрибут data-nm-forms-validate (совместно с классом required) будет добавлен без значения, то будет выполнена простая проверка на то, что поле не пустое. Также в атрибут можно передать такие значение:

phone - будет произведена валидация по маске телефона
email - будет произведена валидация по маске email'а
url - будет произведена валидация по маске url'а
file - валидация по расширению файла. Допустимые расширения передаются в атрибуте data-format, без пробелов. Например, data-format="doc,docx,xls".

Скрытые (системные) элементы управления

Отдельно хочется выделить такую группу управляющих элементов, как скрытые или системные.

hidden:norobots - отвечает за защиту от роботов. Если это поле будет передано с каким-либо значением, письмо не отправится
hidden:subject - тема письма
hidden:form_type - тип сообщения об успешной отправке письма. См. файл action.php.
hidden:yandex_metrika_id - в этом поле передается идентификатор события Яндекс.Метрики. При успешной отправке формы, событие выполнится. Но чтобы данное правило заработало, нужно в файле nm_forms.js, в функции sendFormNM(), в переменной metrika_counter указать объект счетчика вашей Яндекс.Метрики.

##Вызов модальных и инлайновых форм

Вот мы и познакомились с основными настройками и параметрами nm_forms. Осталось разобраться, как же вызывать эти формы.

Вызов модальных форм

Для того, чтобы вызвать модальную форму, нужно на любой html-элемент (кнопка, ссылка и пр.) повесить атрибут data-get-modal-nm-form=, в значении которого вам нужно указать название файла-шаблона формы без расширения. Например, data-get-modal-nm-form='simple_form_1'.

Вызов инлайновых форм

Для того, чтобы встроить в контент ту или иную форму, нужно разместить div с атрибутом data-nmforms-container=, в значении которого вам нужно указать название файла-шаблона формы без расширения. Например, data-nmforms-container='simple_form_1'. Инлайновых форм на странице может быть сколько угодно.

###Стили формы и дополнительные параметры

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

Стили формы

Каждая форма может иметь свой файл со стилями. Этот файл должен лежать в папке /nm_forms/assets/css/forms и называться точно так же, как и файл-шаблон формы. То есть, если файл-шаблон называется simple_form_1.php, то файл стилей для этой формы должен называться simple_form_1.css. В таком случае он подгрузится вместе с формой автоматически.

Параметры, передаваемые в форму

В любую форму (модальную или инлайновую) можно передать свой набор параметров. Для этого существует data-атрибут data-nm-form-params. Вешается этот атрибут на элемент вызова формы (для модальных форм), либо на контейнер (для инлайновых форм).

Формат для передачи параметров следующий: "param1":"aaa","param2":"bbb","param3":"ccc".

Например, data-nm-form-params='"param1":"aaa","param2":"bbb","param3":"ccc"'.

В самом файле-шаблоне формы эти параметры будут доступны в массиве $arParams.

Дополнительные data-атрибуты

У nm_forms существуют также дополнительные вспомогательные и просто полезные атрибуты (по мере развития конструктора, список будет расширяться). В примере формы выше вы могли заметить такой data-атрибут, как data-fadeout-delay=.

data-fadeout-delay="3000" - параметр для модальной формы. Устанавливает значение в милисекундах, после которого модальная форма автоматически закроется (после успешной отправки письма).

vaivaivai / nm_forms Goto Github PK

nm_forms's Introduction

Конструктор ajax-форм - nm_forms

Краткое описание

nm_forms's People

Contributors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent