Як зробити калькулятор або форму для сайту: огляд 4 спеціальних конструкторів

1. Конструктори калькуляторів - навіщо вони потрібні і як з'явилися
2. Проекти з Росії і країн СНД
3. 1. uCalc.pro
4. Робота з калькулятором
5. Відгуки
6. 2. CalcCreator
7. Відгуки
8. Проекти з Заходу
9. 3. Formsite
10. 4. Calculoid
11. PS
12. PPS

Наша команда-партнер Artmisto

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

Конструктори калькуляторів - навіщо вони потрібні і як з'явилися

Скільки коштує зробити калькулятор? Студія може вимагати від вас і 25 тисяч рублів:

За ці гроші рішення повинно включати провязку з CRM і іншими системами автоматизації бізнесу. Більш поміркована і поширена ціна в 5-10 тисяч може обернутися сюрпризом - від відсутності адмінки (тобто будь-яка зміна ціни або дизайну перетвориться в пісню) до умов на кшталт "оренда калькулятора на рік".

Фрілансер на біржі "все по 500 рублів" запросить ті самі 500 рублів за простий скрипт. Але зазвичай ціна, за яку попрацює приватний фахівець, починається від 2-3 тисяч рублів. Плюс час на очікування. І це непогано - кожному за потребами і можливостями.

Але штука в тому, що успіх Facebook, "Вконтакте", Instagram, Avito та інших масових проектів виніс в інтернет нову хвилю підприємців, які в змозі освоїти прості системи самі, звикли пробувати безкоштовно, отримувати перший результат моментально, а якщо і платити - то потім і по-мінімуму.

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

Їх плюс: універсальність - не має значення, яку CMS ви використовуєте, а також мінімум витрат на підтримку і зміна форми в майбутньому.

Ахіллесова п'ята: такі сервіси не обросли великою кількістю інтеграцій, які вам запропонують студії. Тобто, конструктори швидше підійдуть підприємцям і маркетологам з обмеженим бюджетом і відсутністю знань JQuery, JS, HTML5 та CSS3 - а може, і не тільки їм одним.

Проекти з Росії і країн СНД

загальне порівняння

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

Тестування проходило в два етапи.

Етап перший. Ми оцінювали сервіси за вимогами, які пред'являються до сучасних інструментів - наявність мобільного (адаптивної) версії для сайту, шифрування даних з форм замовлення, готові шаблони, база знань, дизайн і бізнес-можливості. Ось результат:

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

Етап другий. Потім ми відібрали потенційних користувачів таких сервісів - невелику студію, фрілансера і підприємця. Чому? Студія і фрілансер, що працюють з бюджетними замовленнями, чи зможуть винести самопісний калькулятор в окрему послугу і багато заробити на його підтримку. Підприємець - людина, у якого просто може не бути часу на освоєння технологій або зайвих ресурсів на один-єдиний віджет. Знайомтеся:

Олена Потоліцина, маркетолог в агентстві «Б'юті-Маркетинг»

Володимир Таранець, фрілансер, робить сайти-візитки за 3-5 тисяч рублів

Марія Бикбулатова, підприємець, власниця кількох проектів в індустрії гостинності

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

Ключові клієнти:
малі бізнеси в сфері послуг - від міні-готелів і автомайстерень до приватних охоронних підприємств

Ключові клієнти:
перша категорія - замовники послуг промоутерів і аніматорів в Уфі; друга - замовники туристичних послуг

Завдання: створити калькулятор для сайту оренди спецтехніки (автокрани, екскаватори тощо) - просто у вигляді тесту

Завдання: зібрати калькулятор розрахунку монтажу відеоспостереження для сайту охоронного підприємства

Завдання: оформити калькулятор на основі шаблону для будь-якого проекту, витративши якнайменше часу і сил

Олена, Володимир і Марія поряд зі мною випробують вітчизняні конструктори калькуляторів і поділяться враженнями.

1. uCalc.pro

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

Платна: з'явиться навесні 2017 го, буде коштувати $ 5 в місяць за 1 калькулятор, який використовує платні опції - якщо перестати платити, калькулятор продовжить працювати, але без "фішечек". Калькулятори, які не використовують функції на кшталт відправки sms, тарифікуватися не будуть.

УТП: прийом оплати через «Яндекс.Кассу», робота в соціальних мережах і месенджерах по спецссилке.

Мінус: проект не дає редагувати код калькулятора.

Плани проекту з розвитку: випуск модулів для платформ WordPress, uKit (запущено під час тестів) і uCoz - щоб калькулятор встановлювався туди автоматично, без копіювання коду з сервісу. До осені заявлені перші інтеграції з CRM.

Робота з калькулятором

Для початку вам потрібно зареєструватися на сайті через соцcеть або пошту - краще через пошту: це стане в нагоді, якщо захочете отримувати повідомлення про нові замовлення.

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

Редактор калькулятора трохи схожий на Google Forms - дві вкладки, між якими можна перемикатися в вільному режимі. У вкладці «Дизайн» зліва розташовані готові блоки - повзунок, що випадає список, галочки, прапорець (вибір 1 з декількох параметрів), поля для збору даних клієнтів і додаткові фішечки. Їх треба розставити на вільному полі.

Так як по життю маю справу з сайтами, зробимо калькулятор попереднього замовлення веб-сторінки для бізнесу - його ж будемо робити у всіх інших сервісах.

Спочатку накидала структуру - розташуємо потрібні елементи, перетягуючи їх. Потім займемося оформленням. При установці елемента uCalc сам задає цифрові діапазони: міняти їх потрібно у вкладці "Формула". До неї ми перейдемо пізніше.

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

Підписи над блоками теж можна приховати: мені вони не потрібні. Просто підпишу самі галочки.

Над кожним блоком можна додати картинку: знаходжу перші-ліпші готові іконки в пошуковику. Думаю, якщо використовувати свої фото або будь-які великі і не квадратні картинки, їх краще буде попередньо обробити в умовному Paint або Photoshop.

Після додавання картинок краще вирівняти елементи відносно один одного по вертикалі.

Можна додати текстові поля з поясненнями для клієнта ( "Текст") і поля збору контактів: в настройках поля можна вибрати, які дані ми збираємо (пошта, телефон, час і т.п.), чи буде поле обов'язковим, а також задати свої підписи-підказки для заповнення.

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

В налаштуваннях кнопки також можна налаштувати прийом оплати, вказавши дані "Яндекс.Касси", або задати текст email або SMS-повідомлення для клієнта (наприклад, висилати йому промо-код після заповнення форми).

Основа калькулятора готова. Тепер "пограємось зі шрифтами". Над калькулятором є три іконки: зміна фону, зміна обрамлення у елементів (10 варіантів) і вибір з 4 шрифтів. Вибір квітів для фону нічим не обмежений - тому краще знати код кольору фону зі свого сайту.

Зовнішній вигляд готовий. Залишилося налаштувати логіку. Значення цін і принцип роботи калькулятора задаються у вкладці «Формула» - переходимо в неї. Справа з'являються підписані латинськими буквами блоки, зліва можна вказати, які блоки враховувати при розрахунку - і при бажанні вбити знижки (множення на%) за комбінацію послуг.

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

Після заповнення формули, калькулятор можна тестувати в самому редакторі.

Далі перевіряємо відображення і роботу на різних пристроях в режимі "Превью". Тепер залишається лише отримати код для сайту.

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

Відгуки

Думка представника веб-студії, Олена: «Спочатку було незрозуміло, чому одні параметри треба йти налаштовувати у вкладку« Формула », а інші, майже такі ж - в« Дизайн »(мова про налаштування повзунка). Але потім звикаєш. З плюсів - є можливість виводити кілька варіантів остаточного розрахунку: наприклад, ціна зі знижкою і без. У інших конструкторів калькуляторів такого не помічено.

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

Думка фрілансера, Володимир: "В цілому, зручний і красивий інтерфейс і сучасний вигляд елементів. Робота зайняла близько 15 хвилин".

Думка підприємця, Марія: «Після ознайомлення не відразу знайшла, як повернутися до вибору шаблонів - було б зручніше, щоб посилання на шаблони була видна завжди. Ті блоки, які я додавала в шаблон сама, відображалися з іншим кольором тексту - це потрібно правити вручну; а краще, щоб було однаково відразу. Але в підсумку розібралася, додала посилання для оплати через кнопку замовлення - прийом платежів через «Яндекс.Кассу».

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

2. CalcCreator

Безкоштовна версія: безстрокова, з обмеженням на використання платних бізнесових (додавання файлу і т.д.) і дизайн-функцій.

Платна: працює за принципом передплати на 1 аккаунт, незалежно від числа створених калькуляторів. Місячна підписка коштує - 795 рублів, при оплаті на три місяці можна отримати знижку 10%, при оплаті на півроку - 20%. Якщо ви перестанете оплачувати тариф, калькулятори продовжать працювати без платних опцій.

УТП: можливість прикріплювати файли і редагувати логіку калькулятора, використовуючи свій код. Також ви можете переїхати з сервісу, забравши з собою код калькулятора.

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

Плани з розвитку: «Плани розширення функціональності є, жартома ми називаємо це планами по захвату світу», - відповіла команда і порекомендувала стежити за їх спільнотою в соцмережах.

Робота з калькулятором

CalcCreator - єдиний в огляді проект, який не вимагає реєстрацію при вході: клікнувши на посилання "Створити" в меню сайту , Ви відразу потрапляєте в редактор.

Інтерфейс нагадує AutoCAD або Photoshop. Ліве меню містить елементи калькулятора. Насамперед ставимо межі робочого поля (сіра область по центру) і починаємо кидати в нього елементи.

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

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

Додамо місце для текстового опис. На прикладі цього поля подивимося, як працюють налаштування ширини.

Щоб поміняти розміри елемента, задаємо потрібні значення в пунктах "Ширина" та "Висота" в правому меню - значення краще залишити в%. В цьому ж меню є налаштування фону, шрифтів і відступів (в пікселях) - відступами можна рухати елементи вліво-вправо і відбивати один від одного по вертикалі.

У тому ж правому меню можна змінювати назви елементів - для цього знаходимо пункт "Текст".

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

Тут нас чекає облом ... Дизайн-шаблони елементів доступні тільки на тарифі. У безкоштовної версії залишається гратися зі шрифтами і кольором фону. Або правити CSS вручну.

Продовжимо роботу так. Додаємо кнопку: поміняти напис на ній можна в пункті "Дані" у правому меню.

Потім центруємо кнопку відступами. І, нарешті, додамо ще одне важливе поле - збір імейлів. Беремо з лівого меню, в правому задаємо назву ( "Текст") і підказку ( "Дані"). Поле кинуто тимчасово - при бажанні його можна перетягнути вище, затиснувши іконку руки поруч з елементом, а потім вирівняти відступами.

Але ми провели в системі 20 хвилин - в інших сервісах на цьому етапі у нас вже були готові калькулятори. Хочеться подивитися, як все буде виглядати. Тиснемо "Переглянути". При виборі мобільної версії калькулятор вилазить за межі екрану - причому неочевидно, чому так ...

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

Подивимося, що скажуть наші тестери.

Відгуки

Думка представника веб-студії, Олена: «З першого погляду інтерфейс схожий на Axure [програма для прототипування сайтів і додатків, прим.] - але як виявилося, крім перетягування елементів з лівого меню на робочу поверхню між системами немає нічого спільного. Виникло питання, а як це налаштовувати? Справа відкривається купа налаштувань, але це все дизайн. А як же дані? Тільки через кілька хвилин до мене дійшло, що введення даних знаходиться в самому низу цього меню, десь за першим екраном мого монітора. Зробивши кілька спроб налаштувати калькулятор, я здалася і пішла шукати в бібліотеку у них же на сайті - раптом знайдеться щось для мене підходяще?

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

Думка фрілансера, Володимир: «Є навіть можливість прикрутити до форми файл, яка, правда, доступна тільки після оплати - відмінно. Саме число налаштувань радує, але без підготовки складно розібратися, що, куди і де.

Сам інтерфейс здався недружнім, тому я швидко кинув спробу створити щось з нуля, а користуватися шаблонами мені було заборонено за умовами тестування ».

Думка підприємця, Марія: «Я вибрала шаблон, але не зрозуміла, як редагувати його. Хоча зрозуміло, що в цілому конструктор цікавий, багато можливостей.

У підсумку я протестувала готову форму на сайті: сподобалося, що після введення інформації відразу з'являється підпис-інформер для клієнта, що "дані отримані і з вами зв'яжуться". Але база електронних адрес від клієнтів збирається тільки на платному акаунті - я не готова платити за це ».

Проміжний результат тестування

За підсумками тестування Володимир і Марія встановили отримані калькулятори на сайти. Олена пробувала сервіси, щоб в цілому зрозуміти, чи варто пропонувати їх замовникам, які не використовують CRM - поки замовлень на сайти з калькуляторами не було, але вона використовує два калькулятора від uCalc на власному майданчику: за її словами, статті з калькуляторами залучають на 45 -50% більше трафіку.

Проекти з Заходу

На прохання редакції "Текстерри", далі ми оцінили закордонні сервіси. На Заході такі конструктори з'явилися раніше, їхня аудиторія - більше і різноманітніше, а значить, в них має бути більше можливостей. І це так: інтеграції з CRM і сервісами розсилок ви знайдете саме тут.

Крім цих плюсів, є у зарубіжних проектів і мінус: інтерфейс чужою мовою, англоговорящая техпідтримка - і інтеграції із зарубіжними ж сервісами: PayPal і Stripe замість "Я.Касси" і так далі. Не факт, що у розробників дійдуть руки російських сервісів - винятком міг би стати Calculoid, який робиться в Чехії, але ці хлопці вирішили питання по-іншому, давши користувачам API.

Через мовний бар'єр наші тестувальники в порівнянні участі не брали.

3. Formsite

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

Платна: включає лінійку тарифів з щомісячною оплатою, які різняться за кількістю заявок, які можна прийняти: 500 заявок за $ 15, 1000 - за $ 25 і так далі. Найдорожчий тариф - $ 100 в місяць і 10 000 заявок. Крім зростання кількості заявок, від тарифу до тарифу зростає місце, виділене вам для зберігання результатів і картинок.

УТП: найбільший вибір елементів і дизайнів, найбільший набір готових інтеграцій серед всіх сервісів в огляді.

Мінус: навіть в платній версії вбудовану в ваш калькулятор рекламу сервісу можна відключити тільки на тарифі за $ 25 в місяць і вище.

Робота з калькулятором:

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

Перше, що потрібно після реєстрації - натиснути на зелену кнопку Create New Form ( "Створити форму").

Далі, як і в uCalc, можна вибрати між складанням з нуля і редагуванням готового шаблону. Обов'язкове заповнити поле зліва, а після вибору - натиснути на зелену кнопку праворуч.

Велика кількість елементів зліва вражає: в кожному випадаючому списку таїться за десятку варіантів. Що не дивно: історія Formsite почалася ще в 1999 (!) Році - у розробників був час написати стільки віджетів.

З лівим меню і будемо працювати в першу чергу. Верхнє меню відповідає за роботу з калькулятором після складання.

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

Шкода, але ось повзунка в цьому різноманітті немає. Я вибрав віджет "набір картинок" - це кілька картинок з галочками під ними.

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

Вбивши фразу в верхнє поле і натиснувши "Enable text editor", можна поміняти шрифт і розмір тексту - як в «Ворді».

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

Ще трохи нижче знаходяться настройки: обов'язковим чи буде поле (Required), показ підписів (Show Labels), а також налаштувати зовнішній вигляд - картинки можна ставити в ряд (Grid) або один під одним. Заповнивши всі і натиснувши зелену кнопку "Зберегти", можна помилуватися результатом.

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

Задаємо значення і натискаємо "Зберегти".

Наступне поле, яке мені потрібно додати - збір імені. Під деякі завдання в Formsite є готові поля - наприклад, готове поле для збору пошти. Його спробуємо трохи пізніше, а для збору ПІБ використовуємо поле "Короткого відповіді" (Short Text Answer) з лівого.

Крім заголовка, тут ми поставимо Placeholder - підказку всередині поля.

У тій же вкладці нижче можна задати автоперевірка заповнення. Оскількі нам потрібно тільки ім'я - виберемо Text Only. Це ж поле можна перетворити в збирач телефону і т.д. помінявши налаштування і заголовок.

Тепер перевіримо готовий блок Email Address, перетягнувши його в область збоку від поля для імені. Як і uCalc, Formsite дозволяє ставити блоки поруч.

Самі по собі настройки збирача пошти не відрізняються від стандартного текстового поля. Основа готова - пора налаштовувати видачу результату. Перетягнемо для цього готовий блок Calculate з лівого меню.

Все стандартно - задаємо заголовок. При бажанні, в блоці Format можна задати округлення. Але зараз нам важливіше налаштувати Equation - в нього треба вписати назву потрібного поля і, якщо необхідно, доповнити математичними знаками.

Щоб взяти id поля, натискаємо на Add Equation - беремо в новому віконці текст з рядка Code, повертаємося - і вставляємо в рядок Equation.

Напевно ви запитували себе: "А де ж кнопка?"

Вона підставляється до вашого калькулятори автоматично - щоб задати її кольору і вид, в лівому меню тиснемо вкладку Style і вибираємо в підміню Themes з готових варіантів.

Ще один пункт дизайн-меню - розділ Customize, де можна поміняти колір фону, додати на фон готову або свою картинку, налаштувати розміри самої форми і так далі.

Третій пункт підміню - Advanced - відкриє код калькулятора і настройки CSS. Без підготовки туди краще не ходити;)

Калькулятор готовий. Перейдемо до верхнього меню. Вибираємо розділ Form Settings, в ньому знаходимо Notifications - і вказуємо пошту, на яку хочемо отримувати заявки.

У цьому ж розділі можна налаштувати прийом оплати від клієнтів через Stripe і PayPal (пункт лівого меню Payments) і прив'язати сервіс розсилок MailChimp і CRM Salesforce - в пункті Integrations.

Нарешті, останній крок - у вкладці Share в верхньому меню можна отримати посилання для соцмережі або код для сайту.

4. Calculoid

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

Платна версія: включає три тарифу. Перший коштує $ 9 на місяць - розрахований на 2000 показів форми відвідувачам вашого сайту і не дає підключити прийом оплати. Далі тарифи зростають за принципом: на 10 доларів дорожче і в п'ять разів більше разів ще можна подивитися в місяць.

УТП: проект дозволяє відправляти дані замовлень в будь-яку CRM чи іншу систему автоматизації бізнесу по API.

Мінус: технічна підтримка оплачується окремо за тарифом $ 45 за годину.

Робота з калькулятором:

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

На наступній сторінці достатньо заповнити верхню строчку (назва калькулятора) і натиснути Save: інші поля потрібні для пошуку по загальній базі шаблонів, їх можна залишити недоторканими.

Редактор калькулятора виглядає не зовсім звичайно - меню управління знаходиться знизу в згорнутому вигляді. Щоб вибрати елемент, тиснемо на Add Field: меню розгортається і показує набір готових "детальок".

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

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

Якщо ми хочемо поставити кілька елементів поруч, для початку їх треба "стиснути", просто потягнувши за кордон кожного.

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

Для збору імен, телефонів і т.д. можна використовувати поле Textarea. Для збору пошти - поле Send Results, яке автоматично "поставляється" з кнопкою.

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

У налаштуванні кожного елемента є кілька вкладок. Basic - відповідає в основному за тексти. Рядок Name - наш заголовок, рядок Hint - додаткова підпис. Заповнимо їх.

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

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

Продовжуємо перейменовувати поля, змінюючи Name і Hint в налаштуваннях кожного елемента.

Потім задаємо ціни: для полів, які увійдуть в формулу, задаємо Option Value у вкладці Option у потрібного елемента.

Решта поля налаштовуються по аналогії. Єдиний момент, який варто окремої згадки - текст на кнопці змінюється в налаштуваннях дизайну.

Залишається додати розрахунок. Для цього вибираємо елемент Formula і в його налаштуваннях знаходимо однойменну вкладку: в ній видно всі наші поля - натискаємо на потрібні і при необхідності підставляємо математичні знаки.

Коли калькулятор готовий, вибираємо в нижньому меню вкладку Configure Calc. Тут можна вибрати одну з 4 колірних схем - вони стануть в нагоді, якщо ви не правили кольору раніше або хочете заповнити білі прожилки між блоками. Також в цьому пункті меню потрібно натиснути Yes - і ви зможете отримати отримати код для установки на сайт в пункті Embed.

PS

Ефективність калькуляторів на сайті доведена в одному випадку - вони точно можуть підняти SEO-трафік і поведінкові фактори, якщо серед ключових слів для вашої теми в "вордстат" попадаються запити "розрахувати" і "калькулятор".

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

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

PPS

Безумовно, ви можете знайти інші конструктори форм і калькуляторів в мережі - тема активно розвивається, нові гравці з'являються і помирають. У разі c самостійним пошуком завжди звертайте увагу на відгуки та огляди на незалежних майданчиках кшталт "Текстерри", а також фактори з наших табличок-порівнянь: мобільну версію, захист даних і так далі - адже ви будете нести перед відвідувачами і клієнтами відповідальність за те, що "поселили" на своєму сайті.

kak-sdelat-kalkulyator-ili-formu-dlya-sayta-obzor-4-spetsialnykh-konstruktorov