Как сделать калькулятор в Тильде

0 1

Онлайн-калькуляторы на сайте позволяют реализовать сложные интерактивные формы, которые облегчают расчёт комплексных показателей, добавляют элемент интерактивности и дают другие преимущества.<p>Ниже о том, как добавить такой калькулятор или форму к уже имеющемуся сайту на платформе Tilda.</p>

Tilda – это один из популярных в России онлайн-конструкторов, подходит для создания лендингов и малостраничных проектов. Наш подробный обзор платформы можно изучить здесь.

Этот конструктор выделяется на фоне конкурентов возможностью выгрузки сайтов в HTML-формате и наличием продвинутого редактора Zero-Block. Но есть у сервиса и слабые места. Одно из таких мест – ограниченные возможности для создания сложных форм калькуляторов.

Рассмотрим процедуру добавления таких форм с расчётом основных и промежуточных результатов на основе двух способов: с помощью штатных средств Tilda и с помощью специального сервиса uCalc (наш обзор этого конструктора калькуляторов).

Последний намного проще и понятнее для непрофессионалов. Поэтому начнём с него.

Калькулятор для Tilda – создаем с помощью uCalc

Как сделать калькулятор в Тильде

uCalc – это универсальный кроссплатформенный конструктор сложных форм, квизов и онлайн-калькуляторов. Легко встраивается в любые страницы, в том числе созданные внутри платформ конструкторов сайтов (например, как Тильда). Главное, чтобы у вас был доступ к вставке своего HTML-кода.

Плюс, формы калькуляторов можно открывать по прямой ссылке (без встраивания). Через сервис можно принимать платежи и обеспечивать интеграцию с внешними инструментами (с CRM-системами, сервисами аналитики и т.п.). Сам uCalc умеет рассылать SMS или email-уведомления клиентам, указавшим свои персональные данные, и владельцам формы.

Теперь непосредственно о процедуре создания калькулятора. Процесс можно условно разделить на следующие этапы:

  • Создание формы/калькулятора в специальном онлайн-редакторе uCalc.
  • Получение HTML-кода для встраивания.
  • Добавление блока со своим HTML-кодом в конструкторе Tilda.

О каждом шаге немного поподробнее.

Создание калькулятора в uCalc

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

Алгоритм будет следующим:

  1. Регистрируете новый аккаунт или входите с уже имеющимся.
  2. Нажимаете кнопку создания новой формы.
  3. Выбираете пункт «Использовать шаблон».
  4. Как сделать калькулятор в Тильде

  5. Подбираете наиболее подходящий под ваши задачи вариант (шаблоны удобно отсортированы по тематике).
  6. Нажимаете кнопку «Выбрать».
  7. При необходимости внесите свои правки в разделах «Дизайн» (здесь всё, что связано с внешним видом) и «Формула» (а здесь всё, что отвечает за логику работы).
  8. Как сделать калькулятор в Тильде

  9. Сохраняете изменения.
  10. Готово!

Если вы выберете пункт «Собрать самостоятельно», то сразу попадёте в онлайн-редактор. Только здесь не будет готовых элементов интерфейса и формул расчёта. Их нужно будет собрать с нуля.

Как сделать калькулятор в Тильде

В вашем распоряжении: списки, ползунки, галочки, флажки, поля ввода, кнопки, изображения и т.п. Нужные элементы просто перетягиваются на холст и настраиваются так, как вам нужно. Справятся даже пользователи без какого-либо опыта.

Результаты расчёта формул можно выводить в форме калькулятора, а можно скрывать и использовать для других расчётов.

Внутри формулы можно использовать не только математические, но и логические операторы: если, и, или, больше, меньше, равно/не равно. Приоритет операций можно расставлять с помощью скобок. Сборка формулы легко осуществляется мышкой – достаточно нажимать на нужные поля и операторы.

Как сделать калькулятор в Тильде

Когда форма калькулятора готова, вы правильно настроили действия кнопок, отправку уведомлений, сбор статистики, интеграцию с 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 в этом сервисе мы подробно рассмотрели выше.

Создать калькулятор бесплатно

  • Автор: Дмитрий Луценко

Источник: uguide.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.