Георгиевская ленточка

Конструктор калькуляторов и формы обратной связи для сайтов

05.12.2018

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





Как создать калькулятор или форму для сайта


1. Сначала нужно зарегистрироваться на сайте, это займет у Вас 2 минуты.



2. Затем выберите, как будете создавать проект:
  •      Собрать самостоятельно
  •     Использовать шаблон 


3.  Посмотрим, какие шаблоны нам предлагают - рубрики шаблонов форм и калькуляторов для сайтов:
  • Автосервис (расход топлива авто, форма заказа такси, калькулятор ОСАГО и др.)
  • Строительство и ремонт (расчет расхода краски, ламината, расчет стоимости окна, натяжного потолка и др.)
  • Служба доставки (расчет веса упаковки)
  • Ресторан или кафе (форма заказа пиццы)
  • Бытовая техника (выбор и покупка холодильника)
  • Мебель и интерьер (покупка кухонного гарнитура и др.)
  • Недвижимость (расчет строительства дома, ипотеки и др.)
  • Экономика и финансы (расчет показателя CTR (кликабельности) сайта и др)
  • Клининговые услуги (расчет уборки помещений)
  • Красота и здоровье (расчет индекса массы тела, % затраченной жизни на работу)
  • Спорт и фитнес (расчет набора веса)
  • Организация мероприятий (форма заказа Деда Мороза на праздник).



   Поскольку приближается Новый год, заглянула в форму "Праздник с Дедом Морозом".  Составляли её явно люди с юмором 😃

Под картинкой идет описание формы, затем можно выбрать на шкале возраст аудитории: от 0 до 50 лет.

Далее "параметры" заказа: провести хоровод,вручение подарка, проверка заготовленного стишка, нужна или нет в комплекте с Дедом Морозом Снегурочка, а самые главные 2 параметра, которые меня повеселили - "Настоящая борода" и "Трезвый" 😁


Еще ниже уточнение даты, времени праздника, контактные данные заказчика и кнопка "Заказать".


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

4. Сейчас о том, как создать калькулятор или форму самостоятельно.

    Покажу на примере формы обратной связи. (Пример - на моем сайте https://bessonowa.blogspot.com/)

1) Слева будут расположены блоки, которые простым перетаскиванием в правую часть встраиваются в Вашу форму, это может быть:
  • Список
  • Ползунок
  • Галочка
  • Флажок
  • Поле
  • Текст
  • Картинка
  • Кнопка



2) Для создания формы обратной связи использовать будем несколько раз блок "Поле".


  После того как Вы перетащили блок вправо, он отображается в зеленой рамочке. 
  Для того, чтобы данный блок был текстовым, нужно кликнуть на второй значок и выбрать "Тип поля" - "Текстовое".


  Значок "шестеренка" дает возможность настроить включение/отключение Заголовка, Описания, Обязательность заполнения поля, а также указать текст-подсказку.


    Третий значок - регулировка отступов текста от края блока сверху и снизу:

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


Над блоком есть еще 1 панель настроек: 


Первая иконка - выбор цвета фона всего блока:


Вторая - выбор цветовой схемы.


Третья - выбор темы оформления.


3) После того как Вы настроили 1 блок, перетаскивайте вправо еще 1 блок "Поле" и также его настраивайте. Только для того чтобы автоматически проводилась проверка на корректность ввода E-mail - в настройках выберите "Тип поля" - "E-mail адрес", (или, если нужны такие поля - номер телефона, дата, время). 


4) Итак, Вы добавили и настроили все поля, сейчас нужна "Кнопка заказа" или расчета.

   В нижнюю часть Вашей формы перетащите из левой части блок "Кнопка".


 Кнопку также можно настроить на панельке есть соответствующие иконки: в первой можно указать сообщение об успешной отправке, согласие на сбор данных, антиспам. Вторая иконка "Действия" - настройка оповещения владельца, уведомление клиента, переход по ссылке, переход к оплате.


Третья иконка - сбор статистики.


Четвертая - настройка цветового оформления кнопки отправки или кнопки заказа: текст на кнопке, текст при наведении, рамка, фон, фон при наведении. (И пятая иконка - отступы).


5) Перед тем как сохранить форму, нажмите кнопку Предпросмотр

  
И Вы увидите, как будет выглядеть форма или калькулятор на разных устройствах, например:

 Можно что-то отредактировать (если нужно) или нажать кнопку Сохранить.

5. Как встроить готовую форму или калькулятор на сайт.

  
1) В своем аккаунте перейти к списку проектов, выбрать нужный и навести курсор и в выпадающем меню выбрать Получить код


 2) Затем скопировать код проекта справа
    


   3) Дальнейшие действия зависят от того, на какой платформе, CMS создан Ваш сайт.

     В блоге на платформе Blogger я встроила форму обратной связи на отдельную страницу "Контакты". Пример - на моем сайте https://bessonowa.blogspot.com/

    Еще предусмотрена интеграция с сайтами на:
  • Joomla (Джумла)
  • NetCat (НетКэт)
  • Bitrix (Битрикс)
  • Drupal (Друпал)
  • OpenCart (ОпенКарт)
  • Tilda (Тильда)
  • MODx (МОДикс)
  • Wix (Викс)
  • uCoz (юКоз)
  • uKit (юКит)
  • WordPress (ВордПресс)
  • AdobeMuse (АдобМьюз)
  • amoCRM (амоЦРМ)
  • PlatformaLP (Платформа LP)
  • VK (ВКонтакте)
  • Google Tag Manager (Гугл Тег Менеджер)
  • Appglobus (Эпглобус)
  • Bitrix24 (Битрикс24)
Создайте в uCalc адаптивный калькулятор для сайта любой платформы

Все подробные инструкции по настройке и встраиванию калькуляторов, форм есть в Базе знаний на сайте ucalc


P.S. В бесплатном тарифе Вы можете создать 3 проекта (т.е., например, 2 калькулятора и 1 форму, или 1 калькулятор или 2 формы). И, к сожалению, есть некоторые ограничения (см. в разделе "Цены"). Но и на бесплатном формы хорошо работают.

Попробуйте прямо сейчас
🔻
Нужен калькулятор или форма? Создайте в uCalc!

Еще статьи по этой теме:


6 комментариев:

  1. Классный и полезный сервис! Калькуляторы — это то, что очень украшает контент)))

    ОтветитьУдалить
  2. А как установка подобного виджета будет влиять на скорость загрузки сайта?

    ОтветитьУдалить
    Ответы
    1. Авторы постоянно работают над виджетом. В официальном блоге написано, что в марте 2017 года "ускорили его загрузку ни много ни мало в 10 раз". Соответственно, и сайт с виджетом будет быстро загружаться. Если сомневаетесь - поставьте калькулятор на отдельную страницу сайта, на которой будет мало информации и других виджетов. (К тому же все калькуляторы и формы адаптивные - быстро подстраиваются под разные экраны и устройства).

      Удалить
  3. Анонимно27.08.2019, 20:14

    Хороший сервис, есть еще stepFORM, тоже под калькуляцию и под формы.

    ОтветитьУдалить
  4. Лучшие WordPress шаблоны для создания презентабельного сайта с современным дизайном.

    ОтветитьУдалить
  5. A very good and interesting article,I loved the Florist and Accessories shop in Boadilla del Monte, in the Community of Madrid. They are experts in Custom Flower Bouquets. Plants and bouquets for hospitals, residences, companies and individuals. They also have home accessories and items for women and men. Bags, necklaces, clothes, belts and many accessories to wear. The website of the HANA Florist is Hana Floristeria.
    We have a notice from Restaurante Chapoo , which tells us that we can (Eat and Eat) on Fridays, Saturdays, Sundays and from the month of September on Thursdays (Meals) from 12.00 to 18.00.
    I found the website House Alarms where I found answers to my questions How to avoid theft by the Bumping method ?, tired of finding spyware and Stalkerware programs on my cell phone

    ОтветитьУдалить

Загляните и на другие страницы ^