Как сделать калькулятор для сайта без программирования с помощью stepFORM

Есть несколько методов как сделать ваш сайт более удобным, привлекательным и полезным для аудитории. Один из вариантов — добавить интерактивный опрос, форму или калькулятор, которые бы помогали посетителям решать определенные задачи или давали ответы на те или иные вопросы. Кроме улучшения юзабилити это позволит увеличить показатели конверсии и продаж.

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

Сервис stepFORM

Основные преимущества платформы stepFORM:

  • она подходит для бизнес проектов разных тематик: сфера доставки (еды, цветов), услуги по ремонту/перевозке, проведение мероприятий, набор персонала и др.;
  • ее могут использовать и фрилансеры, и веб-студии;
  • в системе есть визуальный конструктор, максимально упрощающих работу пользователям;
  • имеются решения для популярных CMS либо можно интегрировать готовый HTML-код в любую веб-страницу;
  • доступны уведомления по email / sms;
  • поддерживается адаптивность;
  • есть защита от спама и некоторые другие полезные фишки (весь список ищите на их сайте).

Начало работы с конструктором

Переходим на главную страницу сервиса https://stepform.io/ и нажимаем на кнопку «Создать бесплатно». Справа появится вкладка для быстрой регистрации в несколько кликов — там вводим имя, email, пароль и потом нажимаем «Создать аккаунт».

Регистрация в stepFORM

После этого мы сразу переходим в панель администрирования, где можем выбрать один из двух путей:

  • «Создать пустую форму» — начать разработку с нуля.
  • «Создать из шаблона» — использовать уже готовую заготовку и переделывать ее под себя.

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

Создание новой формы

Под термином «квиз-калькулятора» (quiz) подразумевается специальная форма (чаще всего пошаговая), которая используется для получения заказов с сайта и включает в себя: 1) выбор разных параметров по предоставляемым вами услугам; 2) предварительный просчет их стоимости; 3) поля для отправки контактов посетителя.

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

Конструктор stepFORM

Разработка квиз-калькулятора

В первую очередь добавим виджеты:

  • «Сообщение» — где укажем заголовок калькулятора.
  • «Выбор изображений» — тут будут картинки товаров и описания к ним (также произведем настройку самого виджета, задав ему 3 колонки).

Создаем квиз-калькулятор

Первая страничка нашей quiz формы готова, для создания второй страницы кликнем на «+».

На следующей странице используем те же виджеты («Сообщение» и «Выбор изображений»), только для второго выберем уже 4 колонки. Вот что у нас получится:

Создаем квиз-калькулятор

Следующим шагом будет добавление калькуляции стоимости товаров, для этого на каждую страницу добавим виджет «Формула» и пропишем в нем необходимые значения.

Создаем калькулятор для сайта

Далее создадим общую страничку с формулами, где пользователь увидит отдельную и полную стоимость заказа.

Создаем калькулятор для сайта

Далее добавим в форму шаг для сбора данных и оформления заказа. На этом этапе нам необходимо узнать:

  • имя/номер заказчика;
  • имя/номер получателя;
  • адрес получателя;
  • дата и время доставки.

Для этого воспользуемся аналогичными виджетами:

  • «Текстовый ввод».
  • «Моб. телефон».
  • «Дата и время».

По итогу страница будет выглядеть так:

stepFORM - создание контактной формы

Осталась самая малость — подобрать дизайн. Для этого откроем панель дизайна и определим необходимые нам цвета и шрифт.

stepFORM - задание дизайна формы

На последнем этапе перейдем в «Настройки» и активируем поле «Email», чтобы мы получали данные о заказе и могли связываться с клиентами.

stepFORM - активируем Email

Теперь квиз-форма полностью готова, и мы можем ее использовать. Получившийся результат из примера доступен для просмотра по данной ссылке: https://app.stepform.io/CRnQiw0.

Интеграция формы на сайт

Вставить квиз-калькулятор на ваш веб-проект также довольно просто, для этого необходимо перейти во вкладку «Публикация» и выбрать желаемый вариант размещения:

  • через Javascript код;
  • через iFrame;
  • или как Popup.

Кстати, форму можно использовать по прямой ссылке и поделиться ею в соц.сетях. Также ее легко установить на платформы WordPress и Joomla с помощью соответствующих плагинов.

Интеграция формы stepFORM на сайт

Итого. Если у вас в коммерческом веб-проекте еще нет квиз формы или калькулятора стоимости услуг, то самое время их добавить. Тем более, что как вы могли убедиться сами, в наше время это сделать совсем не сложно, и не требуется никаких знаний в области разработки. С помощью специальных конструкторов по типу stepFORM весь процесс создания будет простым и займет минимум времени. В конце концов, вы получите хорошую возможность увеличить конверсию площадки и сделать ее более полезной для своей ЦА. Кстати, в сервисе есть полностью бесплатный тариф для начинающих.

2 комментария к статье “Как сделать калькулятор для сайта без программирования с помощью stepFORM”
  1. Anfisa

    Выглядит не так уж и сложно, а я всегда думала, что создать такой калькулятор заказа — дорогое удовольствие.. его можно установить на любой сайт?

  2. Tod

    Anfisa, в данном сервисе есть бесплатный тариф, поэтому вы можете смело тестировать его на своем сайте.

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *