2 Листопад 2016
Рубрика: код

Callme 2.5 — віджет форми зворотнього дзвінку, швидкого замовлення

Те, про що ви просили бещліч разів, сталось: тепер в Callme є капча, маска телефону і ще купа корисних функцій. Навіть шаблони дизайну перероблені.

Оновлений дизайн виглядає так:callme 2.5 default template

Я вирішив не обмежувати користувачів російсько- та україномовною аудиторією, тож ця версія скрипта написана англійською. Завдяки тому, що віднині можна одночасно використовувати будь-яку кількість форм із різними налаштуваннями, це дозволить віджету працювати на сайтах з кількома мовами і легко його перекладати.

Адже тепер всі налаштування, як для форми, так і для пошти (окрім паролів звичайно) зберігаються в js-файлах. Оновив файл — оновилась форма.

Що нового?

Фактично, все. Я повністю переписав скрипт з використанням EcmaScript 2015, нової версії JavaScript. Для повної сумісності зі старими браузерами скрипт зберігається в форматі JS, тож жодних проблем із його роботою не буде.

Тепер в віджеті немає графіки. Зовсім. Кнопка справа — текст, на фоні CSS-градієнту, «крутилка» завантаження теж зроблена на CSS. Навіщо це? По-перше, це суттєво зменшило вагу скрипта, тож він завантажується в три рази швидше, ніж раніше. Окрім того, це дозволить налаштовувати кнопки. Тепер щоб поміняти текст на кнопці, треба лише відредагувати його в файлі конфігу:

"button": {
	"show": true,
	"text": "Текст на кнопці"
}

Тепер розкажу докладніше про нові можливості віджету.

Маска телефону

Додано новий тип поля – «tel», для телефону. Форма може мати будь-яку кількість полів для телефону, для кожного з них можна за бажанням додати маску. Наприклад (999) 999-99-99.

{
	"type": "tel",
	"mask": "(999) 999-9999",
	"name": "Phone Number",
	"required": true,
	"sms": true
}

Валідація пошти

Додано поле «email» для електронної пошти. Якщо поле заповнене, то воно проходить валідацію і форму не можна відправити, поки це поле не заповнять.

Обов’язкові поля

Тут оновлення стосується чекбоксів. Якщо чекбокс позначено обов’язковим (required), то поки його не відмітять, форму не можна буде відправити.

Капча

Так, нарешті. В кожну форму можна за бажанням додати капчу, яка не дозволить відправляти форми ботам і людям, які не можуть відняти від 11 цифру 6.

"captcha": {
	"show": true,
	"title": "Captcha",
	"error": "Captcha is wrong"
}

Конфіги

На одній сторінці відтепер можна використовувати будь-яку кількість форм (навіть із різними шаблонами дизайну). Всі шаблони, окрім основного, завантажуються динамічно, якщо користувач виклакає відповідну форму. Конфіги повністю поміняли свій вигляд, відтепер це не купа страшного коду, а валідні JSON-файли, працювати з якими значно простіше.

Ось приклад нового конфігу:

{
	"button": {
		"show": true,
		"text": "Short form"
	},
	"fields": [
		{
			"type": "text",
			"name": "Your Name",
			"placeholder": "Type your name",
			"required": true,
			"sms": true
		},
		{
			"type": "tel",
			"mask": "(999) 999-9999",
			"name": "Phone Number",
			"required": true,
			"sms": true
		}
	],
	"form": {
			"template": "fb",
			"title": "Request a callback",
			"button": "Request",
			"class": "form-center",
			"welcome": "Fill in the form and we'll call you back as soon as possible"
	},
	"alerts": {
		"yes": "Yes",
		"no": "No",
		"process": "Sending request...",
		"success": "Your request was successfully sent",
		"fails": {
			"required": "Please fill in all required fields",
			"sent": "Previous message was sent less than a minute ago"
		}
	},
	"captcha": {
		"show": true,
		"title": "Captcha",
		"error": "Captcha is wrong"
	},
	"license": {
		"key": "143022181824244220151218223020182821163618181630221820143022",
		"show": false
	},
	"mail": {
		"referrer": "Page referrer",
		"url": "URL",
		"linkAttribute": "Link attribute",
		"smtp": true
	},
	"animationSpeed": 150,
		"sms": {
			"send": false,
			"captions": true,
			"cut": true
		}
}

Відкривши індексний файл Callme (/callme/index.html), ви побачите перелік конфігураційних файлів, що містяться в /callme/js/config/, і побачите, чи код в них валідний.

Додаткові налаштування

  • швидкість анімацій в формі;
  • всі повідомлення, що побачить користувач: підпис капчі, повідомлення про помилки, алерт про відправлене повідомлення чи помилку тощо…

Оновлення

Файли стилів

Для того, щоб на одній сторінці можна було запускати кілька форм з різними шаблонами дизайну, я переробив файли шаблонів, суттєво оптимізувавши їх. Ви помітите, як швидко все тепер завантажується.

«Приліплені» форми

Форму, окрім звичайної появи посередині екрану, можна показувати приліпленою зліва чи справа до країв екрану:

callme 2.5 sticked form

На мобільному екрані вона перетворюється у звичайну форму.

Мобільні стилі

Суттєво оптимізовано мобільні стилі шаблонів, перевірено роботу на iOS та Android. Я впевнений, що вони додадуть нових багів, але ми з ними розберемось :)

Відправка SMS

Відтепер можна вибирати, які поля потрібно надсилати в смс, а які — тільки на пошту. Окрім того, можна вибирати, чи обрізати повідомлення до 160 символів, і чи надсилати назви полів або ж тільки їх значення. Повідомлення, як і раніше транслітеруються.

Відправка через SMTP

Перероблено відправку повідомлень через SMTP, додано стандартні налаштування для Gmail та Яндекс.пошти.

Перевірка IP і швидкість роботи

В версії 2.1 місто і країна відправника визначались за ip-адресою перед відправкою повідомлення, і це сильно впливало на швидкість роботи скрипта. Тож в версії 2.5 було додано окремий сервіс, який показуватиме місто, країну і точку на карті для бажаючих адмінів.

callme 2.5 letter

В повідомленні ви побачите тільки ip-адресу. Щоб побачити деталі, клікніть на неї і перейдете на невеликий сайт, де вся додаткова інформація завантажиться окремо. Це дозволить і мати повний контроль над географією відправників, і не гальмувати роботу скрипта.

whois по ip для callme

Ліцензія

Callme, як і раніше, має ліцензійний ключ. Раніше ключ міг хіба що сховати копірайт, але з версії 2.5 він впливає на функціонал. Так, безкоштовна версія має менше функцій і, щоб отримати повну версію, треба буде купити ключ. Для власників ліцензій на попередні версії діє знижка.

Окремий сайт

Віднині у Callme є окремий англомовний сайт — www.getcallme.com. На ньому є вся документація, відповіді на запитання, можливість скачати скрипт і купити ключ.

Тепер я хочу бачити коментарі 31