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

Добрый день!

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

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

Сюжет твоей карьеры

Шаблон тестирования в игральной форме поможет выяснить Вашим пользователям,в каком виде развивается его карьера: драма, комедия или боевик Подробнее
Gold

Узнайте стоимость лечения у стоматолога

Необходимо ответить на несколько простых вопросов Подробнее
Platinum

Суши-тест для истинных ценителей суши

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

Разбираетесь ли вы в драгоценностях?

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

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