Englishdom public form

Contributing

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

Demo

https://englishdom.com

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 ------ | ---- | ------- | ----------- key[DEPRECATED] | 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')

Form html examples

You can set 'data-country' attribute in body tag and phone input will set correct country flag. Default value is 'RU'. Example:

<body data-country='GB'></body>