Форма контакта 7 Условный переадресация

Вопрос или проблема

<script type="text/javascript">
inputs = event.detail.inputs;
inputs.forEach( function(el) {
    if ( el.name == "menu-52" ) {
        if ( el.value == "Below $10,000" ) {
            location.href = "https://www.facebook.com";
        } else if ( el.value == "Above $10,000" ) {
            location.href = "https://google.co.in";
        }
    }
});
</script>

<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
inputs = event.detail.inputs;
inputs.forEach( function(el) {
    if ( el.name == "menu-52" ) {
        if ( el.value == "Below $10,000" ) {
            location.href = "https://www.facebook.com";
        } else if ( el.value == "Above $10,000" ) {
            location.href = "https://google.co.in";
        }
    }
});
}, false );
</script>

.

Ответ или решение

Условный редирект в Contact Form 7

В данной статье мы рассмотрим, как реализовать условный редирект для плагина Contact Form 7 на WordPress, основываясь на вашем примере кода и возникших проблемах.

Описание проблемы

Вы добавили следующий код для реализации редиректа в зависимости от выбранного значения в поле формы:

<script type="text/javascript">
inputs = event.detail.inputs;
inputs.forEach( function(el) {
    if ( el.name == "menu-52" ) {
        if ( el.value == "Below $10,000" ) {
            location.href = "https://www.facebook.com";
        } else if ( el.value == "Above $10,000" ) {
            location.href = "https://google.co.in";
        }
    }
});
</script>

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

Решение

Ваша проблема решается добавлением кода в слушатель события wpcf7submit. Вот исправленный вариант вашего кода:

<script type="text/javascript">
document.addEventListener('wpcf7submit', function(event) {
    inputs = event.detail.inputs;
    inputs.forEach(function(el) {
        if (el.name == "menu-52") {
            if (el.value == "Below $10,000") {
                location.href = "https://www.facebook.com";
            } else if (el.value == "Above $10,000") {
                location.href = "https://google.co.in";
            }
        }
    });
}, false);
</script>

Объяснение кода

1. Слушатель событий: Мы добавили слушатель событий wpcf7submit, который срабатывает после успешной отправки формы. Это гарантирует, что ваш код выполняется только тогда, когда форма была отправлена.

2. Сбор данных формы: Мы используем event.detail.inputs для получения всех вводимых данных формы. Это позволяет нам обрабатывать каждое поле формы, в том числе поле с именем "menu-52".

3. Условный редирект: В зависимости от значения поля "menu-52", выполняется перенаправление на указанные URL-адреса.

Рекомендации

• Консоль ошибок: Всегда проверяйте консоль браузера на наличие ошибок JavaScript, особенно если код не работает. Они могут указать на синтаксические ошибки или проблемы с доступом к элементам.
• Тестирование: После внесения изменений обязательно протестируйте функциональность в разных браузерах, чтобы убедиться в совместимости.

Заключение

Реализация условного редиректа в Contact Form 7 может быть выполнена легко, если следовать приведенному выше примеру с корректным использованием слушателя событий. Если у вас возникнут дополнительные вопросы или сложности, не стесняйтесь обращаться за помощью на форумы или к специалистам в области веб-разработки.