Главная » Статьи » Многостраничные калькуляторы и формы за 5 шагов

Многостраничные калькуляторы и формы

Наверняка многие из вас, кто уже попробовал и воспользовался сервисом uCalc, задаются вопросом — а как мне уменьшить высоту калькулятора? Да, они бывают разные, — от маленьких форм связи до огромных махин с кучей данных и расчетов.

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

Многостраничный калькулятор — как это?

Давайте разберем на примере — форме заказа индивидуального пошива, сделанной в uCalc.pro:

Пощупать в живую

Что это и как это работает? Давайте разбираться

Перед нами все та же форма из конструктора — только к ней добавились кнопки «Далее» и «Назад». Она занимает меньше места на странице, более интерактивна (человеку интересно посмотреть, что будет дальше, а чем больше времени и действий он совершит на странице, тем лучше для SEO и конверсии). И такая горизонтальная форма удачнее вписывается в сайт, чем вертикальное полотно на несколько экранов.

Не бойтесь делать — бойтесь жалеть о том, чего не сделали © Джейсон Стэтхэм

Итак, все привычно: заходим в кабинет, выбираем шаблон или создаем проект с нуля (как в нашем случае) - и заполняем нужными элементами. В отличие от обычного создания формы, мы добавляем кнопки перехода там, где должны переключаться слайды. Для этого под содержимым будущего 1-го слайда размещаем кнопку «Далее» (назвать кнопку можно и по-другому), а со второго по предпоследний слайд — по две кнопки, «Назад» и «Далее».

Смотрим ID ваших кнопок и блоков в веб-инспекторе

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

Для всех кнопок смотрим в надпись button-N (где N и есть наш ID). Для остальных элементов поступаем аналогично - только ищем обозначение grid-N (где N — ID блока):

Теперь, зная ID, скрываем в редакторе все элементы после первого слайда.

Для этого добавляем виджет «HTML-код» в самый конец формы и вставляем код, в котором указываем ID всех кнопок и элементов со второго слайда по последний:

<script>
 $('#grid-N. #grid-M, …, #grid-Z').css('display','none','!important') // скрываем блоки
 XD.postHeight();
</script>

Активируем кнопки «Далее» и «Назад»

Берем еще один виджет «HTML-код» и размещаем перед самым полем результата в форме. Затем вставляем этот код, заменяя ID на те, что встречаются в вашем проекте:

<script>
 $('#button-N').click(function () { // где N - ID кнопки, который мы узнали на 2 шаге
 $('#grid-N. #grid-M').css('display','none','!important') // скрываем блок текущего шага, вписываем ID блоков этого шага
 $('#grid-Y. #grid-Z').show() // открываем блок следующего шага, вписываем ID блоков следующего шага
 XD.postHeight();
})
</script>

Готово!

Сохраняйте проект и устанавливайте на сайт.

Понимаем, это сложно. Но выход есть!

Напоминаем, что наши коллеги из конструктора uKit собрали команду проверенных фрилансеров, которые и написали для вас код многостраничного калькулятора или формы. Сэкономьте свое время — оставьте им простую заявку и получите готовый проект в течение 3 дней всего за 1500 рублей.

Деньги не перейдут исполнителю, пока вы не примете заказ. А с готовым калькулятором вы получите месяц премиум-тарифа от uCalc в подарок.

Заказать прямо сейчас!

Всего комментариев: 3
Не работает ваш метод! Точнее скрытие блоков срабатывает, но кнопки не работают.
Разобрался, к кнопке надо добавить #, то есть так 
Код
$('#button-2').click(function () {
  $('#grid-1').css('display','none','!important')
  $('#grid-3, #grid-4, #grid-5, #grid-7, #grid-12, #grid-13, #grid-14').show()
  XD.postHeight();
})
0
Вы молодцы!

ps. В статье поправили, спасибо.
avatar