Как добавить валидацию номера телефона в форму Elementor без плагинов

Если ты используешь Elementor Forms, то наверняка замечал, что стандартное поле телефона не проверяет правильность ввода.
Пользователь может написать хоть «123» — и форма всё равно отправится.

Чтобы повысить качество заявок и убрать ошибки, можно добавить умную валидацию номера с определением страны и автоматической проверкой формата.
Самое приятное — это делается без плагинов, буквально несколькими строками кода.

Что мы будем использовать

Для этого подключим библиотеку intl-tel-input — лёгкое и надёжное решение для работы с телефонными номерами. Она:

• показывает флаг и код страны,
• проверяет корректность номера,
• поддерживает автоподстановку кода страны,
• и идеально подходит для Elementor.

Что получится в итоге

✅ Поле телефона с флагом и кодом страны
✅ Проверка правильности номера при отправке
✅ Подсветка поля при ошибке
✅ Передача кода страны (+7, +1 и т.д.) в письмо на почту

Шаг 1. Добавляем скрытое поле для кода страны

1. В редакторе Elementor Forms добавь новое поле типа “Скрытое” (Hidden).
2. Задай ему ID поля (Field ID): phoneCountry.

📩 Это поле будет хранить код страны, выбранный пользователем (например, +7 или +44).
При отправке формы этот код будет передаваться на почту вместе с номером телефона.

Шаг 2. Подключаем библиотеку intl-tel-input

Вставь под формой (через HTML-блок) или в разделе Настройки темы → Пользовательский код → Перед </body> следующий код:

<!-- Подключаем intl-tel-input -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.8/build/css/intlTelInput.min.css">
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.8/build/js/intlTelInput.min.js"></script>

Шаг 3. Вставляем код валидации

Сразу под подключением библиотеки добавь этот скрипт (он отвечает за инициализацию и проверку номера):

<!-- Валидация номера -->
<script>
jQuery(document).ready(function($) {
    $('#wp-form input[type="tel"]').each(function() {
        const phoneInput = $(this);
        const hiddenInput = phoneInput.closest('form').find('input[name="form_fields[phoneCountry]"]');

        phoneInput.removeAttr("pattern");

        const iti = window.intlTelInput(phoneInput[0], {
            initialCountry: "ru",
            separateDialCode: true,
            preferredCountries: ["ru", "kz", "ua", "by", "us"],
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.8/build/js/utils.js"
        });

        function updateHiddenField() {
            const countryData = iti.getSelectedCountryData();
            const dialCode = countryData && countryData.dialCode ? "+" + countryData.dialCode : "+7";
            if (hiddenInput.length) hiddenInput.val(dialCode);
        }

        updateHiddenField();
        phoneInput.on('countrychange', updateHiddenField);

        phoneInput.on('input', function() {
            const currentValue = phoneInput.val();
            const selectedDialCode = "+" + iti.getSelectedCountryData().dialCode;
            if (currentValue.startsWith(selectedDialCode)) {
                phoneInput.val(currentValue.replace(selectedDialCode, "").trim());
            }
        });

        phoneInput.closest('form').on('submit', function(e) {
            updateHiddenField();
            if (!iti.isValidNumber()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                alert("Пожалуйста, введите корректный номер телефона!");
                phoneInput.css('border', '2px solid red');
            } else {
                phoneInput.css('border', '');
            }
        });
    });
});
</script>
<!-- /Валидация номера -->

💡 Важно: менять #wp-form не нужно — этот селектор по умолчанию подходит для форм Elementor.

Менять его стоит только если у формы задан другой ID. Например, если CSS ID — callback-form:

$('#callback-form input[type="tel"]')

Шаг 4. Настраиваем отправку кода страны на почту

Чтобы вместе с номером телефона ты получил и код страны, нужно добавить скрытое поле phoneCountry в шаблон письма Elementor.

1. В редакторе формы перейди во вкладку «Email» (или «Actions After Submit → Email»).
2. В блоке «Email Content» (Содержимое письма) добавь новую строку, например:
   Код страны: [field id="phoneCountry"]
Телефон: [field id="phone"]
3. Сохрани изменения.

Теперь при отправке формы в письме ты получишь два поля:

Код страны: +7
Телефон: 9991234567

Это позволит видеть точный международный формат или использовать код для CRM.

Шаг 5. Проверяем работу

1. Обнови страницу с формой.
2. В поле телефона появится флаг и код страны.
3. Введи номер и попробуй отправить форму.
4. Если номер неверный — появится предупреждение.
5. Если всё корректно — форма отправится, и в письме ты увидишь: Телефон: 5551234567 Код страны: +1

Шаг 6. (Опционально) Добавляем стили

Чтобы флаг и код отображались аккуратно:

.iti {
  width: 100%;
}
input[type="tel"] {
  padding-left: 52px !important;
}

Частые ошибки и решения

Заключение

Теперь форма Elementor:

✅ Проверяет правильность номера телефона
✅ Отправляет код страны вместе с заявкой
✅ Автоматически определяет страну пользователя
✅ Работает без плагинов и без лишних зависимостей

Такой подход делает форму удобнее и надёжнее, а твои заявки — чище и информативнее.