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

Добрый день!

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

Чтобы реализовать такую возможность вам нужно сначала добавить такой 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

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

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

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

Форма регистрации на курс

Шаблон формы регистрации на курс обучения с выбором дисциплины Подробнее
Platinum

Знаете ли вы международную кухню?

Все пробовали итальянскую пиццу, узбекский плов и турецкий кебаб. Но не все могут назвать себя знатоками шотландской, португальской или чешской кухни. Для ресторанов, сервисов доставки еды, магазинов продуктов, кулинарных ресурсов.
$ 5.00
Подробнее
Platinum

Настройте свой стиль платья

Конфигуратор платья с визуальным отображением изменений декольте, типа рукавов, длины платья Подробнее
Platinum

Подбор автозапчасти

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

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