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

Добрый день!

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

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

Шаблон для определения индекса потребительской лояльности (NPS)

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

Рассчитайте стоимость доставки грузов

Ответьте на несколько простых вопросов и получите примерный расчёт стоимости доставки вашего груза Подробнее
Gold

Ремонт квартиры

Рассчитайте стоимость ремонта квартиры Подробнее
Platinum

Расчёт ОСАГО

Вы можете получить расчёт ОСАГО с помощью онлайн калькулятора, введя данные транспортного средства Подробнее

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

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