Описание конструктора форм

• Как пользоваться конструктором
  1. JSON передача данных
  2. Передача через data-атрибуты
• Добавление новых шаблонов
• Служебные функции
  1. Особый атрибут data-skip-form
  2. Построение тестовой формы
• Примеры

Как пользоваться конструктором

Для добавления формы нужно выставить data-атрибут data-form у элемента, который будет контейнером (кнопкой) формы. Существует два способа передать данные для формы.

Способы не могут работать одновременно. Для одной формы можно выбрать только один способ передачи данных.

JSON передача данных

Параметры формы можно передать через JSON, указанный в атрибуте data-form.

ВАЖНО: все специальные символы в JSON должны быть закодированы! Это ограничение админки, иначе она просто не сможет сохранить страницу.

Например, символ кавычки должен быть заменён на ".

JSON имеет следующую структуру:

{

• "id": "form-id", // идентификатор формы; заполняется латинскими буквами, цифрами, тире и нижним подчёркиванием; должен быть уникальным для каждой формы на странице
• "reachgoal": "reachgoal", // ричгол формы; можно опустить, будет использовано стандартное значение "FORM"
• "mode": "inside/popup" // режим отображения формы: inside - форма будет встроена в контент; popup - форма будет "всплывающей"; обязательное значение
• "template": "PLAIN" // имя шаблона формы; стандартное значение - "PLAIN"
• "promo_text": "Текст над формой"
• "name": {"placeholder": "плейсхолдер", "label": "лейбл", "required": true/false}
• "phone": {"placeholder": "плейсхолдер", "label": "лейбл", "required": true/false}
• "email": {"placeholder": "плейсхолдер", "label": "лейбл", "required": true/false}
• "comment": {"placeholder": "плейсхолдер", "label": "лейбл", "required": true/false}
• "agreement": {"label": "лейбл"}
• "button": "текст на кнопке"

}

Передача данных через data-атрибуты

Данные можно передавать через data-атрибуты контейнера. В этом случае data-form нужно оставить без значения (например, указать data-form="").

ВАЖНО: все специальные символы в значениях атрибутов должны быть закодированы! Это ограничение админки, иначе она просто не сможет сохранить страницу.

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

Доступны следующие data-атрибуты (их назначение аналогичны таковым в JSON передаче):

• data-id="..."
• data-reachgoal="..."
• data-mode="..."
• data-template="..."
• data-promo-text="..."
• data-button="..."
• data-name-placeholder="..."
• data-name-label="..."
• data-name-required="1"
• data-phone-placeholder=""
• data-phone-label=""
• data-phone-required=""
• data-email-placeholder=""
• data-email-label=""
• data-email-required=""
• data-comment-placeholder=""
• data-comment-label=""
• data-comment-required=""
• data-agreement-placeholder=""
• data-agreement-label="..."
• data-agreement-required=""

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

Добавление новых шаблонов

Новые шаблоны добавляются в TEMPLATE.HTML (сам текст шаблона может быть вынесен в FORM_BUILDER_TEMPLATES). Шаблон обязательно должен содержать в себе оверлей и сообщения (для оповещения о статусе отправки формы), соглашение о передаче персональных данных и кнопку отправки.

Поля ввода, лейблы, оверлей и промо-текст должны быть помечены специальными атрибутами:

• data-overlay-container - оверлей
• data-message-container - сообщение
• data-promo-container - промо-текст
• data-name-field - поле "Имя"
• data-name-label - лейбл поля "Имя"
• data-phone-field - поле "Телефон"
• data-phone-label - лейбл поля "Телефон"
• data-email-field - поле "E-mail"
• data-email-label- лейбл поля "E-mail"
• data-comment-field - поле "Комментарий"
• data-comment-label- лейбл поля "Комментарий"
• data-agreement-field - поле "Согласие на передачу персональных данных"
• data-agreement-label- лейбл поля "Согласие на передачу персональных данных"
• data-upload-field - поле "Загрузить файлы"
• data-close-button - кнопка закрытия формы (для всплывающих форм; может быть представлена несколько раз)
• data-submit-button - кнопка "Отправить"

Служебные функции

Особый атрибут data-skip-form

Контейнеры, отмеченные атрибутом data-skip-form, не будут участвовать в построении форм. Это может быть полезно для тестирования или подготовки функционала в рамках промо-акций (менеджер может подготовить все данные форм заранее, но до начала акции они будут скрыты от пользователя). Для показа такой формы достаточно удалить атрибут с контейнера (локально - если нужно проверить форму не публикуя её, либо в WYSIWYG-редакторе - при публикации формы.

Построение тестовой формы

В решение встроен функционал построения тестовой формы. Функционал строит форму с передачей данных на основе data-атрибутов и добавляет её в конец контейнера с контентом. Дополнительно в консоль выводится HTML, на основе которого будет построена форма.

Одним из вариантов использования этой функции может быть построение корректного HTML для WYSIWYG-редактора.

Функция запускается следующим кодом (пример использует не все поля, создан исключительно для демонстрации):

FORM_BUILDER.buildTestForm({
	id: 'test1234', 
	reachgoal: 'какой-нибудь ричгол',
	mode: 'inside', 
	template: 'ALL', 
	promo_text: `
		Здесь может быть любой текст, даже тот, что содержит <strong>HTML-символы</strong>; 
		более того, HTML будет корректно отображён. 
		Но админка ломает HTML, потому все символы должны быть экранированы.
	`, 
	button: 'Текст на кнопке', 
	name_placeholder: 'Плейсхолдер может содержать только текст',
	name_label: '<i>Лейбл с HTML</i>',
	name_required: 1,
	phone_placeholder: '', // пустое (или совсем не указанное) значение будет заменено стандартным
	agreement_label: 'в лейблах HTML <a href="#">для ссылок</a>'
});

Примеры

Этот параграф содержит тег data-form со значением {"id":"test-plain","mode":"inside","template":"PLAIN"}. В него будет вставлена форма с полями "Имя", "Телефон", "Комментарий", "Загрузить файлы" и "Согласие на обработку персональных данных". Форма использует все стандартные тексты.

Кнопка в конце этого параграфа выводит простую всплывающую форму{"id":"test-popup-small","mode":"popup","template":"SPOPUP"}

Этот параграф сам по себе является кнопкой для показа всплывающей формы, которая будет содержать поле загрузки файлов. Просто нажмите на него.