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 |
|---|---|---|---|
| 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>