Те, про що ви просили бещліч разів, сталось: тепер в 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. На ньому є вся документація, відповіді на запитання, можливість скачати скрипт і купити ключ.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Ruslanbog

Купил лицензионную версию callme v2.5, не работают смски. Не отправляются на телефон. Номер в скриптах указан

Ruslan

Добрый день, Назар. Отличная получилась форма обратной связи! Но к сожалению, не работает атрибут data-cme, т.е. письмо на почту приходит без него. В комментах ниже читал о такой же проблеме. Можно узнать, устранена ли проблема? Если устранена, то по какой причине может не работать? Заранее спасибо )

Руслан

Добрый день, Назар, использую ваш скрипт для отправки обычной формы через класс cme-btn. Столкнулся с проблемой на мобильных устройствах ios. Не работает валидация для незаполненных инпутов. При попытке отправить форму с пустами инпутами – перезагружается страница с формой. На ПК и мобильных устройствах андроид валидация работает как полагается. Подскажите в чем может быть проблема.

Ігор Ч.

Назаре, дякую за такий чудовий модуль. Є таке запитання: чи підтримує Callme зміну теми email листа в залежності від того, з якої форми було відправлено повідомлення? Мені здалося, що ні бо змінна $subject = ‘CallMe’; та все одно у вас запитаю, якщо можна :)

Назар Токар

Вітаю! Ні, тема завжди одна й та ж, це зручно для сортування у Gmail. Ви самостійно можете це змінити у go.php.

Алексей

Здравствуйте. Мне необходима версия скрипта 2.1 . Как её можно скачать?

Назар Токар

Вітаю, ніяк. У мене її немає.

Олександр

Назар, підкажіть, будь ласка. Встановив останню версію Callme, налаштував config та smtp, а мені видає “No email settings”. Налаштування пошти правильні, перевіряв як gmail так і корпоративну пошту. Ось посилання https://logist.academy/mod/book/view.php?id=63&chapterid=5 Можливо ще якісь налаштування потрібні?

Назар Токар

Все працює.

Олександр

Так, я вже пізніше прочитав про файл go і додав там пошту. Але пошта на неї не надходить. Я Вам написав листа про додаткові можливості скрипта. Напишіть мені, будь-ласка, відповідь.

Назар Токар

Значить, помилка у налаштуваннях, спробуйте SMTP.

Tibald

Купил лицензию , установил, на айпадах не открывается форма. На демке сайта со скриптом тоже не октрывается, что делать?

Назар Токар

А дайте урл.

Артем

Капча и выпадающий список только для обладателей лицензии, или у меня проблемы со скриптом ( хостером ) ???

Назар Токар

Так і є, ось порівняння ліцензій:
http://getcallme.com/ru/license.html

Стас

Page referrer
у меня к этому прикрепилась ссылка из карточки товара
как вернуть все в нормальный вид
ведь должен быть урл сайта

Никита

Назар, добрый день.

Огромное спасибо за CallMe 2.3, бесконечно благодарен за разработку такого скрипта.
Сейчас хотим купить лицензию CallMe 2.5.
Возник вопрос: нужно ли покупать для каждого домена отдельную лицензию?

Ещё раз огромное спасибо!

Назар Токар

Так, одна ліцензія на один домен.

Стас

Здравствуйте все
как на произвольную картинку на сайте повесить вызов скрипта
код подскажите пожалуйста
у меня не получается
Спасибо

Андрій

Назаре, доброго часу доби)
Перш за все хочу подякувати за ваш скрипт.
У мене виникла ситуація, що на сторінці є 6 форм. І мені потрібно відслідковувати з якої форми приходить запит.
В інструкції написано, що можна використати атрибут data-cme=”link attribute #1″>
Але нажаль, у листі, який приходить на мейл, цей атрибут не відображається.
Ось приклад коду кнопки:
Заказать звонок
Можливо я роблю щось не так? Чи ця функція доступна тільки у платній версії?

Назар Токар

Вітаю. Так, мені вже написали, що це не завжди працює. Маю перевірити і виправлю.

Виталий

Проблема.
Смс не надсилається, тому що воно порожнє (в сервісі bytehand.com)
На емайл повідомлення приходять як треба.
На скріншоті показав стрілками які налаштування зроблені в скрипті, більше нічого не чіпав.

Скріншот:
http://s018.radikal.ru/i511/1701/63/b3fb68f2b5e1.jpg

Назар Токар

Цікаво, я перевіряв і працювало. І подивлюсь, в чому може бути справа.

Виталий

Спробував старий скрипт buyme, з яким працював в кінці 2013 року. Він працює, смс не порожнє.

Назар Токар

Добре, перевірю, дякую.

Robert

Назаре, ще одне питання:
Чи є можливість якось сховати “зірочки” у required input?

Назар Токар

а як ви плануєте показати користувачеві, які поля є обовЯзковими? Ні, такого я не робив.

Robert

Бувають випадки коли всі поля є обов´язковими. Тоді немає потреби показувати “зірочки”, а, наприклад, на початку форми вказати про необхідність заповнювати їх всі. Чи ці ж самі “зірочки” зробити іншого кольору… Тощо.
Можливо було б розумно “зірочки” обгорнути якимось строковим тегом?

Назар Токар

Так, можливо. Подумаю, як краще.

Robert

Уточнення до попереднього питання: мав на увазі ту кнопку, що дефолтно виводится з боку екрану.

Маю ще одне питання:
Чи є можливість разом з формою передати й URL сторінки, на якій було викликано цю форму?

Назар Токар

Сторінка, як і referrer, передаються за замовчуванням у листі, це можна відключити.

Robert

Дякую, а то я вже почав думати як приціпити URL “паровозом” :)

Robert

Доброго дня, Назаре.
Є питання стосовно відображення кнопки виклику модального вікна.
Чи є можливість вимкнути її відображення у разі виклику форми зі стороннього елементу DOM?

Назар Токар

Звичайно, в документації про це написано.

Robert

Мається на увазі ключ “show” у файлі опцій?
Якщо “так” то в мене не працюэ у такому варіанті:
“button”: {
“show”: false,
“text”: “Как нам с вами связаться?”
}
Все одно отримую кнопку “Request a callback” на Front-end…

Назар Токар

Так, це він, дивіться будь ласка доки, там все є.

Robert

Ну ось, відкриваю http://getcallme.com/docs.html#settings-button.
“show” приймає boolean – тру чи фелс. В моєму файлі опцій вказано false, але все одно кнопка на фронті є…
Змушений сховати її через таблиці стилів що не є кашерно… :(

…а загалом дякую – скрипт гарний, зберігає розробникам час.

Денис

Здравствуйте, Назар.
У конторы подразделения в Москве, Питер, Казань и еще ряд городов
Есть ли возможность при отправке сообщения выбрать подразделение, куда сообщение можно/нужно отправить?

Тарас Климець

Де взяти стару версію модулю де випадашки безкоштовні?

Тарас Климець

Швидкого замовлення. Про яке замовлення йде мова?

Назар Токар

Зворотній дзвінок, наприклад.

Тарас Климець

Я вже подумав що ти написав модуль, що замінює кошик в інтернет-магазинах)

Sfera

откуа берется вся эта фигня в конце url ?_=1478620707091
думаю кеширование. но как его не получать?
.ru/callme/js/config/main.js?_=1478620707091

Назар Токар

Це робить Chrome, просто не звертайте увагу :)

Бодан

Огромное спасибо за новую версию!

Проблема – не могу скачать скрипт – http://prntscr.com/d3s2oo
Очень жаль, что выпадающий список в платной версии, он жизненно необходим был :)

Назар Токар

Спробуйте ще раз, перевірив — працює.

Очень жаль, что выпадающий список в платной версии, он жизненно необходим был :)

Якщо купити скрипт, це не проблема.