Как сделать калькулятор в Тильде
Онлайн-калькуляторы на сайте позволяют реализовать сложные интерактивные формы, которые облегчают расчёт комплексных показателей, добавляют элемент интерактивности и дают другие преимущества.
Ниже о том, как добавить такой калькулятор или форму к уже имеющемуся сайту на платформе Tilda.
Tilda – это один из популярных в России онлайн-конструкторов, подходит для создания лендингов и малостраничных проектов. Наш подробный обзор платформы можно изучить здесь.
Этот конструктор выделяется на фоне конкурентов возможностью выгрузки сайтов в HTML-формате и наличием продвинутого редактора Zero-Block. Но есть у сервиса и слабые места. Одно из таких мест – ограниченные возможности для создания сложных форм калькуляторов.
Рассмотрим процедуру добавления таких форм с расчётом основных и промежуточных результатов на основе двух способов: с помощью штатных средств Tilda и с помощью специального сервиса uCalc (наш обзор этого конструктора калькуляторов).
Последний намного проще и понятнее для непрофессионалов. Поэтому начнём с него.
Калькулятор для Tilda — создаем с помощью uCalc
uCalc – это универсальный кроссплатформенный конструктор сложных форм, квизов и онлайн-калькуляторов. Легко встраивается в любые страницы, в том числе созданные внутри платформ конструкторов сайтов (например, как Тильда). Главное, чтобы у вас был доступ к вставке своего HTML-кода.
Плюс, формы калькуляторов можно открывать по прямой ссылке (без встраивания). Через сервис можно принимать платежи и обеспечивать интеграцию с внешними инструментами (с CRM-системами, сервисами аналитики и т.п.). Сам uCalc умеет рассылать SMS или email-уведомления клиентам, указавшим свои персональные данные, и владельцам формы.
Теперь непосредственно о процедуре создания калькулятора. Процесс можно условно разделить на следующие этапы:
- Создание формы/калькулятора в специальном онлайн-редакторе uCalc.
- Получение HTML-кода для встраивания.
- Добавление блока со своим HTML-кодом в конструкторе Tilda.
О каждом шаге немного поподробнее.
Создание калькулятора в uCalc
Самый простой и быстрый способ создания нового калькулятора – на основе готовых шаблонов. Плюс, так вы сможете ознакомиться с примерами форм и лучше разобраться с работой конструктора.
Алгоритм будет следующим:
- Регистрируете новый аккаунт или входите с уже имеющимся.
- Нажимаете кнопку создания новой формы.
- Выбираете пункт «Использовать шаблон».
Если вы выберете пункт «Собрать самостоятельно», то сразу попадёте в онлайн-редактор. Только здесь не будет готовых элементов интерфейса и формул расчёта. Их нужно будет собрать с нуля.
В вашем распоряжении: списки, ползунки, галочки, флажки, поля ввода, кнопки, изображения и т.п. Нужные элементы просто перетягиваются на холст и настраиваются так, как вам нужно. Справятся даже пользователи без какого-либо опыта.
Результаты расчёта формул можно выводить в форме калькулятора, а можно скрывать и использовать для других расчётов.
Внутри формулы можно использовать не только математические, но и логические операторы: если, и, или, больше, меньше, равно/не равно. Приоритет операций можно расставлять с помощью скобок. Сборка формулы легко осуществляется мышкой – достаточно нажимать на нужные поля и операторы.
Когда форма калькулятора готова, вы правильно настроили действия кнопок, отправку уведомлений, сбор статистики, интеграцию с CRM, приём оплаты и другие нужные вам функции, не забудьте нажать кнопку «Сохранить».
Форма готова к встраиванию.
В случае проблем всегда можно обратиться к документации или заказать разработку калькулятора «под ключ» (у uCalc есть такая услуга).
Получение кода калькулятора
Перейдите в раздел со всеми вашими формами «Мои формы» и найдите онлайн-калькулятор, который хотите встроить внутрь страниц Tilda.
Наведите на него указатель мышки и выберите всплывающее меню дополнительных опций. Нажмите пункт «Получить код».
Выделите код мышкой и скопируйте через меню правой кнопки мыши или просто нажмите кнопку «Скопировать код».
Встраивание калькулятора в страницы Tilda
Теперь откройте конструктор Tilda и найдите страницу, внутри которой вы хотите разместить свой онлайн-калькулятор. Перейдите в режим редактирования.
В редакторе используйте меню добавления нового блока или воспользуйтесь кнопкой «+» между имеющимися блоками на странице.
Найдите раздел блоков «Другое» и выберете элемент T123 (HTML-Код).
В появившемся блоке нажмите кнопку «Контент». Вставьте скопированный код калькулятора uCalc и сохраните изменения («Сохранить и закрыть»).
Вы можете вставлять свои калькуляторы uCalc на любых страницах Tilda, в любых местах макета, где доступна вставка своего HTML-кода (например, во всплывающих окнах или в редакторе Zero-Block).
Если вам нужно внести какие-либо изменения в калькулятор, достаточно это сделать в конструкторе uCalc (редактор Tilda при этом трогать не нужно). Все правки будут вноситься одновременно во все версии формы, вставленные на разных сайтах и страницах.
Штатные средства для создания калькуляторов в Tilda
Для расчёта параметров на основе значений из кастомных полей ввода в Tilda используются специальные формы, например, они есть в блоках: BF311N, BF502N, BF204N, BF310N, BF402N или BF403N.
Сразу предупреждаем – функционал максимально простой.
Вместо готовых блоков вы можете задействовать редактор Zero-Block и собрать свой набор полей, участвующих в расчёте.
Чтобы добавить онлайн-калькулятор внутри форм, нужно выбрать специальное поле «Калькулятор» (Calculations field).
Всем полям, участвующим в расчёте, обязательно нужно присвоить имена переменных (Variable name в редакторе Zero-Block). Имена должны быть только на английском языке (латиницей).
В настройках поля расчёта впишите свою формулу с участием переменных. Допускаются только математические операции: сложение, умножение, деление, вычитание. Для расстановки приоритетов можно использовать скобки. Будьте осторожны, неправильное написание переменных приведёт к ошибке.
Поддержки логических операндов или сложных правил ветвления у Tilda нет.
Результат будет выводиться внутри формы – там, где вы вставили поле «Калькулятор».
Если вы хотите в расчётах задействовать выпадающие списки, то напротив каждого из пунктов нужно добавить оператор присваивания с нужным числом (например «Название пункта = 400»).
Итоги расчёта можно использовать для добавления в корзину (при наличии модуля магазина). Такая опция точно есть в редакторе Zero-Block.
Выводы
Вы можете сделать свой онлайн-калькулятор в Тильде двумя способами: с помощью штатных средств (конструктора форм) или с помощью внешних сервисов (за счёт вставки HTML-кода).
В первом случае можно получить только простейшую логику расчёта, при этом никаких внешних инструментов задействовать не нужно.
Во втором, с внешним сервисом калькуляторов, можно получить гораздо больше возможностей, а сама процедура настройки будет существенно удобней и понятней. Наиболее удачный сервис для встраивания – uCalc. Почему и как создать калькулятор для Tilda в этом сервисе мы подробно рассмотрели выше.
Калькулятор для сайта(Тильда)
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.
Добрый день. Нужно сделать калькулятор для сайта на тильде, вот пример: https://www.oknakomforta.ru/ceny/okna-veka-kalkulator/.
Есть готовый дизайн калькулятора, исходники и прописана логика работы. Верстать сам калькулятор на тильде не нужно! Мы сами готовы это сделать. Калькулятор не служит для расчета стоимости, а нужен лишь для того что бы собрать заполненные данные и отправить их на почту.
От исполнителя требуется(прописать java скрипт, что бы заполненные данные приходили на почту в виде заявки, а также выполнение технической части калькулятора(движение при нажатии, изменение формы при выполнение шагов по заполнению и т.п.))
Готов рассмотреть все варианты!
tilda — кастомный калькулятор на zero блоке
Основная задача — сделать калькулятор на базе zero блока, без использования конструкторов по типу uclalc.
Было 2 важных вопроса:
1. Как реализовать расчет по условию;
2. Как передать данные о заказе с выбранными параметрами.
Вводные данные
Калькулятор предназначен для расчета стоимости изготовления портретов на холсте. В качестве параметра-условия, был принят размер картины. Необходимо было сделать так, чтобы при выборе того или иного размера, автоматически менялись значения остальных параметров (стоимость дополнительных услуг) в калькуляторе.
Ограничения tilda
- В вычисляемом поле формы возможно использовать только простые математические действия (суммирование, вычитание, деление, умножение);
- Возможности стандартной и step by step анимации не позволяют показывать или скрывать элементы, и создавать действия по триггеру;
Как было сделано
Для каждого размера создан zero блок с формами разного типа:
- формы с выбором дополнительных услуг;
- форма с выбором даты;
- форма с вычисляемым полем;
- форма с вводом контактных данных и кнопкой отправки.
Функционал переключения между размерами реализован как клики по табам в слайдере, т.е. по сути помещаем наши zero блоки в слайдер. За основу был взят кейс https://mo-tilda.ru/slidercopy. Ниже будет приведен мой код.
Вычисляемое поле суммирует все присвоенные значения у выбранных параметров. Для этого, в каждой форме прописываем имя переменной, куда будут передаваться значения выбранных параметров
В вычисляемом поле прописываем имена переменных, и какие действия над ними должны производиться.
Таким образом мы решили вопрос №1
Что получилось
Потрогать калькулятор можно по ссылке http://kupiportret.ru/calc-copy
Передача параметров в заявку
Логика в том, что выбранные параметры будут передаваться в скрытые поля формы, которая производит отправку данных. В этой форме необходимо добавить скрытые поля, и дать им такие же названия, как и у переменных, в которые передаются выбранные параметры, имена которых задавали ранее (a, b, c …..), за исключением формы с калькуляцией. Здесь необходимо указать название “calc”.
Осталось добавить код на страницу
Проблемы
На данный момент не передаются данные о выбранной дате, и некорректно передается итоговая сумма по заказу. По мере решения данных проблем информация будет обновляться.
Благодарности
Выражаю благодарность Андрею Балыбердину, за помощь в написании кода для передачи параметров в заявку.
Вопросы и предложения
Как сделать калькулятор на Тильде
После заполнения всех полей, копируешь сгенерированный HTML код и вставляешь его в блок Т123.
- Если на сайте установлено в настройках «Не продавать товар, если данные о нем отличаются», то в корзине просто появится ошибка и заявку нельзя будет отправить. Для корректной работы необходимо указать вариант «разрешать продавать товар без проверок»;
- После отправки корзины, страница автоматически перезагружается и сбрасывает поля. Если необходимо, чтобы поля не сбрасывались, можно использовать модификацию NLM052 Автозаполнение полей.
- Если на странице есть несколько кастомных форм с калькулятором, то у каждой такой формы должен быть свой блок BF204N и своя уникальная ссылка на кнопку отправки #sendform1, #sendform2 и т.д.;
- Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
- Не нужно подключать приемщики данных к каждому полю внутри зеро блока. Их нужно подключать к стандартной форме BF204N или к Корзине;
- Если языки ошибок внутри форм не совпадает с языком сайта, проверьте настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;