Englishdom-form NPM

Englishdom public form

Contributing

форк
меняешь код
меняешь версию в пекедж жсон
билд npm run build - билдит исходники
пушиш в ориджин с исходниками
подаешь пул риквест в апстрим
npm publish
в основном проекте меняешь версию пакета

Demo

Example using

<!-- Add main form file -->
<script src="./public/bundles/js/form-logic.min.js"></script>
<!-- Add tintl-tel-input styles -->
<link rel="stylesheet" href="intlTelInput.css"/>

Package Managers

# NPM
npm install englishdom-form

Form html examples

Registration form:

<form action="" method="POST" novalidate="" class="js-ed-form" key="app">
  <div>
    <div>
      <label for="form-name" class="">
        <input id="form-name" type="text" name="first_name" class="js-first_name" placeholder="Имя*" maxlength="25" />
        <p class="js-error-first_name"></p>
      </label>
    </div>
    <div class="">
      <label for="form-email" class="">
        <input id="form-email" type="email" name="email" class="js-email" placeholder="Email*" />
        <p class="js-error-email"></p>
      </label>
    </div>
    <div class="">
      <label for="form-phone" class="">
        <input id="form-phone" name="phone" type="tel" class="js-ed-form-tel-number js-phone" autocomplete="off" />
        <p class="js-error-phone"></p>
      </label>
    </div>
  </div>
  <button type="submit" class="js-ed-form-button">начать бесплатно</button>
</form>
<div>
<div class="js-success-send-ed-form"></div>

Application form:

<form action="" method="POST" novalidate="" class="js-ed-form">
  <div>
    <div>
      <label for="form-name" class="">
        <input id="form-name" type="text" name="first_name" class="js-first_name" placeholder="Имя*" maxlength="25" />
        <p class="js-error-first_name"></p>
      </label>
    </div>
  </div>
  <button type="submit" class="js-ed-form-button">начать бесплатно</button>
</form>
<div>
<div class="js-success-send-ed-form"></div>

import form from 'form-logic';

form.init({ // метод для инициализации формы
  key: "app",
  applicationOnly: true,
  internal: true,
  registration: false,
  phone: true,
  segment: 'kids',
  firstName: true,
  source: 'skype',
  from: 'some text',
  redirectToEd: false,
  partnerTags: '?utm_source=smth&utm_medium=smth',
  successSendText: 'optional text',
  initFormCb: [ cb ],
  loadCb: { start: cb, end: cb },
  successRegSendCb: [ cb ],
  errorRegSendCb: cb
});

function cb() {}

form.uninit(); // метод для сброса формы и удаления слушателей на кнопках

var form = require('form-logic.js');

form.init({  // метод для инициализации формы
  key: "app",
  segment: 'kids',
  internal: true,
  internalCls: 'some-class-name',
  registration: false,
  phone: true,
  firstName: true,
  source: 'skype',
  from: 'some text',
  redirectToEd: false,
  partnerTags: '?utm_source=smth&utm_medium=smth',
  successSendText: 'optional text',
  initFormCb: [ cb ],
  loadCb: { start: cb, end: cb },
  successRegSendCb: [ cb ],
  errorRegSendCb: cb
});

function cb() {}

form.uninit(); // метод для сброса формы и удаления слушателей на кнопках

Option	Type	Default	Description
keyDEPRECATED	string	undefined	вносится в html и в config вызова формы, для идентификации формы и её параметров
preReadRegFormCb	function	undefined	используется только для отправки заявки без проверки на ошибки регистрации
internal	boolean	false	определяет расположение формы на https://englishdom.com или на сторонних ресурсах
internalCls	string	js-ed-form	собирает все формы на странице и навешивает события. Должен быть одинаковым для всех форм на странице
registration	boolean	false	определяет тип формы - регистрационная или нет
phone	boolean	false	определяет необходимость передачи номера телефона
firstName	boolean	false	определяет необходимость передачи имени пользователя
segment	string	individual	определяет сегмент студента, подавшего заявку (kids / b2b)
from	string	undefined	параметр необходим при отправке заявки на занятия с преподавателем
source	string	''	определяет ресурс, с которого поступает заявка
redirectToEd	boolean	false	определяет необходимость редиректа на http://englishdom.com/home/user/login после успешной отправки формы
successSendText	string	''	определяет текст после успешной отправки формы
partnerTags	string	''	utm метки, которые будут добавлены к api url (пример: "?utm_source=smth&utm_medium=smth")
initFormCb	array	undefined	callbacks array, которые вызываются в момента старта формы
loadCb	object	undefined	callbacks, которые вызываются на старте и окончании вызова api ({ start: func, end: func })
successRegSendCb	array	undefined	callbacks array, которые вызываются после успешной отправки формы регистрации
successAppSendCb	array	undefined	callbacks array, которые вызываются после успешной отправки формы подачи заявки
errorRegSendCb	function	undefined	callback, который вызывается при ошибке регистрации на сайте englishdom
AMOCRMTagFormAttribute	string	undefined	название атрибута, если указан то из этого атрибута возьмется строка и отправиться в АМО где вставиться как тег к сделке
errorPhoneEvent	function	undefined	callback, который вызывается при ошибке ввода не верного телефона с параметрами {number: string; error: string; country: string, page: string}

ClassName	Tag/Default ClassName	Default	Description
is-success	.js-ed-form	''	будет добавлен после успешной отправки формы
is-success	.js-success-send-ed-form	''	будет добавлен после успешной отправки формы
is-error	.js- && .js-error-	''	будет добавлен после неуспешной отправки формы (* - error name like 'email')