> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Створення калькулятора у контактній формі Калькулятор у контактних формах дає змогу автоматично розраховувати значення на основі заповнених відвідувачем сайту полів форми. Ви можете відмітити необхідні для розрахунку поля форми та написати формулу, за якою здійснюватиметься розрахунок, — після чого ваш клієнт зможе бачити результат розрахунку одразу після заповнення усіх обов’язкових полів форми. Це значення також передаватиметься разом з усією інформацією після відправлення контактної форми. Або ж ви можете приховати кнопку відправки форми і тоді калькулятор слугуватиме суто як інструмент розрахунку для відвідувачів сайту. У цій статті ми розглянемо приклад того, як ви можете створити та використовувати калькулятор на вашому сайті. **Зміст**: * [Налаштування полів калькулятора](#1-nalashtuvannya-poliv-kalkulyatora) * [Створення формули розрахунку](#1-stvorennya-formuli-rozrahunku) * [Приклади використання](#1-prikladi-vikoristannya) ${youtube}[](IU4SDUsu3iA) Насамперед вам необхідно додати елемент **Контактна форма**, де буде знаходитись калькулятор. Для цього ви можете скористатися [нашою інструкцією](/uk/article/dodavannya-kontaktnoyi-formi-63m9ug/). # Налаштування полів калькулятора Наведіть курсором на контактну форму та натисніть на неї, щоб відкрити її налаштування. У вкладці **Пункти** ви можете керувати присутніми полями та додавати нові: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_16ab37t.png) | ${color}[#1aa900](Підказка:) ви можете детальніше ознайомитися з налаштуваннями полів форми [у нашій статті](/uk/article/nalashtuvannya-poliv-kontaktnoyi-formi-gopctl/). || ${color}[#ffa800](Примітка:) поля, які ми розглядаємо далі, використовуються саме для розрахунків — при цьому, у вашій контактній формі також можуть бути присутні інші поля, як-от для введення імені клієнта, номеру телефона тощо. Для створення власного калькулятора вам будуть доступні наступні поля: ###### Випадний список, Радіокнопка, Чекбокс 1. Додайте відповідне поле та налаштуйте його потрібним вам чином: задайте йому назву, опції для вибору, зробіть обовʼязковим за потреби тощо. 2. Після створення поля активуйте опцію **Використовувати для розрахунків** та вкажіть довільну **назву змінної** для цього поля, яку ви пізніше будете використовувати у формулі розрахунку: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_10g4u47.png) 3. Далі ви зможете для кожної доданої опції вказати потрібну цінність (числове значення), яка буде використовуватися у розрахунках у разі вибору цієї опції: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_171vu2s.png) ###### Число Це поле, яке підтримує виключно числові значення: **цифри**, **кому** та **крапку**. Аналогічно до описаних вище полів, додайте його до вашої форми, та у налаштуваннях активуйте опцію **Використовувати для розрахунків** і встановіть назву змінної: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_wzu7uv.png) # Створення формули розрахунку 1. Для створення формули та відображення результатів розрахунків вам необхідно додати поле **Формула для розрахунку** та перейти до його налаштувань. 2. У налаштуваннях цього поля вам необхідно прописати формулу для розрахунків, яка буде використовувати створені раніше змінні та символи `+` (додавання) , `-` (віднімання), `*` (множення), `/` (ділення) та `()` для виконання потрібних арифметичних дій: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_1cglgup.png) || ${color}[#ffa800](Примітка:) якщо у калькуляторі використані необов'язкові поля, і відвідувач не вибирає або не вписує певне значення, то у формулі цінність відповідної змінної буде 0. Важливо це враховувати, якщо ви використовуєте дію множення у вашій формулі. | ${color}[#1aa900](Підказка:) порядок арифметичних дій визначає послідовність обчислень: спочатку виконуються дії в дужках, далі — множення та ділення, і останніми — додавання та віднімання. 3. Після створення формули ви також можете кастомізувати відображення результатів розрахунків: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_ez64ra.png) * вписати стандартне значення, яке буде додаватися до того, як буде здійснено розрахунок — наприклад, число 0 або ж це може бути базова вартість ваших послуг, до яких буде додаватися вартість обраних додаткових послуг абощо; * додати певний текст чи символ, який буде відображатися до та/чи після результатів розрахунку. 4. Для поля також доступні стандартні налаштування полів – ви можете додати певний опис та приховати поле за потреби: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_1w7p1jd.png) ||| ${color}[#f97700](Важливо:) якщо ви приховуєте поле Формула для розрахунку, результати розрахунків теж будуть надіслані в разі відправки форми клієнтом і ви зможете їх побачити у налаштуваннях сайту в розділі Керування формами та у сповіщеннях про нові відповіді на пошту/месенджери тощо. | ${color}[#1aa900](Підказка:) скористайтеся [нашою інструкцією](/uk/article/nalashtuvannya-stilyu-kontaktnoyi-formi-gh8wwc/) для редагування вигляду контактної форми у разі необхідності змінити її дизайн. # Приклади використання **Для першого прикладу** ми додамо калькулятор розрахунку вартості друку рекламного банера залежно від його розмірів з наступними полями: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_dhgzcp.png) При створенні формули ми враховуємо, що вартість друку банера розраховується на основі його площі. Щоб визначити площу, необхідно помножити ширину на висоту — у результаті ми отримуємо значення в квадратних метрах (м²). Оскільки ціна вказана за 1 м², отриману площу потрібно помножити на вартість друку одного квадратного метра (у нашому прикладі це 1200 грн). У результаті ми отримуємо наступну формулу, використовуючи наші змінні: `висота*ширина*1200` **Для другого прикладу** ми додамо калькулятор розрахунку вартості створення сайту з наступними полями: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/stvorennya-kalkulyatora-u-kont_1d7jsnw.png) На прикладі нашого калькулятора вартості сайту нам необхідно, щоб усі вибрані відвідувачем опції сумувалися, тому перша частина формули буде виглядати наступним чином, використовуючи змінні: `site_type+design_type+addons` У нашому прикладі у поле “Кількість сторінок” клієнт вводитиме число, тому необхідно одразу в формулі прописати на яке значення це число множити (тобто, вартість 1 сторінки). Наприклад, нехай вартість однієї сторінки буде 100: `pages*100` У результаті ми отримуємо наступну формулу, завдяки якій користувач зможе розрахувати вартість створення сайту: `site_type+design_type+addons+pages*100`