Contact Form 7 как сделать автоматический переход между полями?

Для того чтобы сделать автоматический переход между полями в Contact Form 7 с помощью JavaScript, вам потребуется использовать события клавиатуры для отслеживания нажатия клавиши Enter или Tab.

1. В первую очередь, убедитесь, что у ваших полей формы задан атрибут "tabindex". Это позволит указать порядок, в котором поля перейдут при переходе с клавиатуры.

Пример:

<input type="text" name="name" tabindex="1">
<input type="email" name="email" tabindex="2">
<input type="text" name="subject" tabindex="3">
<textarea name="message" tabindex="4"></textarea>

2. Следующим шагом будет написание JavaScript кода для обработки событий нажатия клавиши Enter или Tab.

Пример:

document.addEventListener('keydown', function(e) {
    var currentElement = e.target; // Получаем текущий элемент, на котором произошло событие
    var form = document.getElementById('your-form-id'); // Замените 'your-form-id' на ID вашей формы

    // Проверяем, является ли нажатие клавиши Enter или Tab
    if (e.keyCode === 13 || e.keyCode === 9) {
        // Получаем все поля формы
        var formFields = form.querySelectorAll('input, textarea, select');
        // Находим индекс текущего элемента в массиве полей формы
        var currentIndex = Array.prototype.indexOf.call(formFields, currentElement);

        // Переходим к следующему полю формы
        if (currentIndex < formFields.length - 1) {
            formFields[currentIndex + 1].focus();
        } else {
            // Если текущий элемент последний, отправляем форму
            form.submit();
        }

        e.preventDefault(); // Предотвращаем действие по умолчанию для клавиши Enter или Tab
    }
});

3. Не забудьте указать ID вашей формы в коде JavaScript. Замените 'your-form-id' на соответствующий ID.

Теперь, когда пользователь нажимает Enter или Tab, фокус будет автоматически переходить на следующее поле в форме. Если текущий элемент является последним полем, форма будет автоматически отправлена.