Как автоматически переходить при выборе варианта на следующую страницу

Добрый день!

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

Чтобы реализовать такую возможность вам нужно сначала добавить такой JavaScript код:

<script>
    $(function(){
         $('.navigator input').on('change', function(){
               setTimeout(function(){
                   $('.current .next').trigger('click');
               }, 500);
         });
    });
</script>

Зайдите во вкладку "Настройки" в раздел "Произвольный код". Откройте менеджер скриптов:

Как автоматически переходить при выборе варианта на следующую страницу 1

В менеджере скриптов нажмите кнопку добавить:

Как автоматически переходить при выборе варианта на следующую страницу 2

Введите название для скрипта в поле "Название" и выберите в списке "Тип подключения" отображать "На всех страницах". В поле "Код" вставьте необходимый скрипт код. Нажмите кнопку "Сохранить":

Как автоматически переходить при выборе варианта на следующую страницу 3

Когда в менеджере скриптов, после модерации администратором, в статусе появится значение "Одобрено", значит вы можете его использовать в своих формах:

Как автоматически переходить при выборе варианта на следующую страницу 4

Далее во вкладке "Настройки" в раделе "Произвольный код", вам нужно подключить добавенный код. Для этого, в "Списке добавленных скриптов", выберите этот код:

Как автоматически переходить при выборе варианта на следующую страницу 5

Откройте вкладку "Элементы" в необходимой форме и вам нужно открыть меню редактирования элемента, кликнув на иконку "Редактировать":

Как автоматически переходить при выборе варианта на следующую страницу 6

Далее вам нужно задействовать этот код, прописав в поле "Имя CSS класса" значение - navigator:

Как автоматически переходить при выборе варианта на следующую страницу 7

Если вы исплользуете в квизе, или у вас подключены другие значения классов, то вам нужно прописать значение класса через пробел. Т.к. мы для примера испльзовали шаблон квиза, то у нас там было значение "columns-2". Поэтому итоговое значение класса у нас имеет вид "columns-2 navigator". В многостраничной форме, если вам нужно, чтобы такое действие выполнялось для каждой странице, также необходимо прописать значение на других страницах, если такое действие не нужно, то соответственно - имя CSS класса остается прежним.

Чтобы просмотреть настроенную форму, нажмите в правом углу иконку "Просмотр:

Как автоматически переходить при выборе варианта на следующую страницу 8

Форма откроется в новом окне браузера:

Как автоматически переходить при выборе варианта на следующую страницу 9

Вот так легко можно добавить такую возможность и использовать в своих формах.

Удачи вам в ваших проектах!

Комментарии
Готовые шаблоны веб-форм
Platinum

Что вы знаете о своем здоровье и теле?

Для размещения на интернет-ресурсах ЗОЖ, медицинских и оздоровительных центров, аптек, фитнес-залов, тематических СМИ, магазинов продуктов и т.д.
$5.00
Подробнее
Gold

Куда отправиться в путешествие?

Для турфирм. Пройдите короткий тест, выберите страну для идеального отдыха и получите скидку 10% на любой тур из нашего каталога!
$6.00
Подробнее
Basic

Онлайн-запись на встречу

Записывайте ваших клиентов или партнеров на встречу учитывая дату и время с помощью онлайн формы Подробнее
Platinum

Как выбрать свои "личные духи"?

Этот тест из 10 вопросов – мини-руководство, которое поможет тебе найти свой уникальный аромат. Для посетителей магазинов косметики,парфюмерии, тематических блогов, соцстраниц, СМИ.
$6.00
Подробнее

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас