Як зробити калькулятор для сайту без програміста. Частина 1: конструктор калькуляторів

Відео - "Як зробити калькулятор на сайт на JQUERY. Вчимося писати скрипти."

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

Приклад калькулятора, створеного без знання технологій і найму програмістів

Вам знадобиться

Ноутбук або комп`ютер, будь-який браузер, 10-30 хвилин часу, поштовий ящик або аккаунт в соцмережі (Facebook, Вконтакте, Google+, UID), плюс розуміння, яким має бути ваш калькулятор.

Інструкція

Щоб розпочати складання і надалі керувати своїм калькулятором, реєструємося на сервісі uCalc.pro через пошту або одну з популярних соцмереж.

Після реєстрації через пошту вам прийде лист з порадами по дизайну калькулятора

Після реєстрації ви потрапляєте в особистий кабінет, де будуть зберігатися ваші калькулятори. Тут ви можете вибрати готовий шаблон, або розпочати складання калькулятора з нуля.

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

Елементи можна розташовувати як поруч (кілька в ряд), так і один під одним.

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

При бажанні, ви можете видалити будь-який елемент, клікнувши на нього і натиснувши

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

Щоб поміняти колір тексту, натисніть на сірий кружечок і виберіть колір з палітри

Щоб поміняти колір фону або змінити колір повзунка і галочки скористайтеся іконками над калькулятором. Ліва іконка відповідає за колір підкладки - її краще зафарбувати в кольори сторінки вашого сайту. Середня іконка - це кольори елементів: ви можете вибрати з 10 готових схем.

Ви також можете змінити стиль шрифту, натиснувши на праву кнопку - зараз доступні 4 варіанти.

Для наочності ви можете додати в калькулятор картинки: зображення можна додати як в шапку, так і до будь-якого з елементів калькулятора. Для цього виберіть значок "Картинка" з лівої панелі, перетягніть його в потрібне місце, а потім, клікнувши на елемент, завантажте картинку з комп`ютера.

Щоб калькулятор швидше завантажувався на вашому сайті, використовуйте картинки з мінімальним

Щоб вказати діапазон цін на послуги і будь-які інші числові параметри, перейдіть у вкладку «Формула». Ви побачите схему калькулятора, в яку можна вписати потрібні вам значення.

Будь-яке число може позначати як суму, так і вагу або, наприклад, відстань.

Кожному елементу калькулятора на схемі присвоюється літера. Підставляючи літери в віконце формули зліва і додаючи математичні знаки, ви зможете створити одну або кілька формул: наприклад, якщо потрібно видавати ціну зі знижкою або без, зробіть дві формули, додавши в другу множення на число менше 1 (наприклад, 0.8 означатиме знижку в 20% і так далі).

Другу або третю формулу можна задати, якщо ви хочете окремо показати ціну за матеріал і за роботу і так далі.

Якщо ви хочете отримувати заявки клієнтів на пошту або по смс, поверніться у вкладку "Дизайн", натисніть на кнопку вашого калькулятора. В налаштуваннях можна вказати. Там же ви знайдете настройку оплати - якщо хочете приймати передоплату через "Яндекс.Кассу".

Тут же можна задати вид кнопки (овальна, квадратна і т.д.) і додатковий колір кнопки при наведенні на неї мишки

Щоб відправляти клієнту результат розрахунку або іншу інформацію (промо-код, посилання, повідомлення "Замовлення прийнято"), натисніть "Сповіщати клієнта" в налаштуваннях кнопки і заповніть шаблон листи. Щоб збирати контакти клієнтів, додайте в калькулятор елемент "поле" і в настройках вкажіть "email", "телефон" і так далі.

Ваша персональна інформація буде передаються по SLL - іншими словами, ніхто не зможе їх перехопити.

Отже, калькулятор готовий. Щоб поставити його на сайт, натисніть кнопку "Зберегти" в правому куті - і перед вами з`явиться віконце з готовим кодом віджета. Скопіюйте код і вставте на нову або існуючу сторінку сайту.

Код вашого калькулятора можна буде скопіювати з вашого сайту і вставити на чужій

Якщо не впевнені в своїх силах - використання попередніх інструкції для додавання калькулятора. На сайті uCalc є ілюстровані поради по установці калькулятора на CMS Wordpress, Joomla, Drupal, NetCat, конструктори сайтів uKit, uCoz, Tilda і Wix і інші відомі платформи. Якщо ви не знайшли свою платформу в списку - відкрийте будь-який опис і дійте за аналогією.

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

Я наприклад, після установки на сайт зауважив, що фон калькулятора мені не підходить - повернувся в конструктор і замінив його на готову кольорову схему з сірим кольором

Поділися в соц мережах:

Увага, тільки СЬОГОДНІ!

Схожі