Как изменить поле телефона в форме контакта WordPress без плагинов

Автор: Юлия Волкова | Опубликовано: 25.12.2025

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

Почему важно кастомизировать поле телефона в форме контакта WordPress

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

Изменение поля телефона позволяет:

Добавить маску ввода для стандартизации номеров;
Проверять корректность введённых данных на стороне клиента и сервера;
Изменить внешний вид и подсказки для пользователя;
Добавить дополнительные атрибуты HTML5 для мобильных устройств (например, inputmode="tel").

Давайте посмотрим, как это реализовать.

Где найти и как изменить форму контакта в шаблоне WordPress

Если форма создана в теме или дочерней теме, её код обычно находится в файлах, таких как page-contact.php, template-contact.php или в файлах шаблонов (например, content-contact.php). Также форма может быть реализована через функцию, например, wpnotes_render_contact_form().

Откройте файл с формой и найдите блок, где генерируется поле телефона. Обычно это HTML-код с тегом <input> с атрибутом name="phone" или похожим.

Пример стандартного поля телефона:

<label for="phone">Телефон:</label>
<input type="text" id="phone" name="phone" value="" required />

Для улучшения нам нужно заменить type="text" на type="tel", добавить атрибуты для маски и валидации.

Добавление маски ввода телефона с помощью JavaScript

Маска ввода помогает пользователю вводить номер в нужном формате, например, +7 (999) 999-99-99.

Пример простого скрипта для маски телефона:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneInput = document.getElementById('phone');
  if (!phoneInput) return;

  phoneInput.addEventListener('input', function(e) {
    let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
    e.target.value = !x[2] ? '+' + x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
  });
});
</script>

Вставьте этот скрипт внизу страницы с формой или подключите через wp_footer в functions.php дочерней темы.

Серверная валидация поля телефона в WordPress

Клиентская валидация не гарантирует корректность данных, поэтому проверку нужно делать на сервере. Предположим, что форма отправляется методом POST и обрабатывается в том же файле или через admin-post.php.

Пример функции проверки телефона в файле functions.php дочерней темы:

function wpnotes_validate_phone($phone) {
    // Удаляем все нецифровые символы
    $digits = preg_replace('/\D+/', '', $phone);
    // Проверяем длину номера — для РФ 11 цифр (с единицей)
    if(strlen($digits) !== 11) {
        return false;
    }
    return true;
}

Используйте эту функцию перед обработкой данных формы:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $phone = isset($_POST['phone']) ? sanitize_text_field($_POST['phone']) : '';
    if (!wpnotes_validate_phone($phone)) {
        // Ошибка валидации
        wp_die('Неверный формат телефона.');
    }
    // Далее обработка формы
}

Пример полной кастомной формы с телефоном и маской

Вот пример минимальной формы с полем телефона, маской и серверной валидацией.

HTML формы (в шаблоне):

<form method="post" action="">
  <label for="phone">Телефон:</label>
  <input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__" />
  <input type="submit" value="Отправить" />
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneInput = document.getElementById('phone');
  phoneInput.addEventListener('input', function(e) {
    let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
    e.target.value = !x[2] ? '+' + x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
  });
});
</script>

Обработка в functions.php дочерней темы:

add_action('init', function() {
  if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['phone'])) {
    $phone = sanitize_text_field($_POST['phone']);
    if (!wpnotes_validate_phone($phone)) {
      wp_die('Ошибка: Неверный формат телефона.');
    }
    // Здесь можно добавить код сохранения или отправки письма
    wp_redirect(home_url('/thank-you')); // Перенаправление после успешной отправки
    exit;
  }
});

function wpnotes_validate_phone($phone) {
  $digits = preg_replace('/\D+/', '', $phone);
  return strlen($digits) === 11;
}

Использование плагина Clearfy для оптимизации форм и валидации

Если вы хотите добавить расширенные возможности без собственного кода, можно использовать плагин Clearfy. Он позволяет оптимизировать формы, добавить валидацию и маски ввода, а также улучшить безопасность сайта.

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

Итог

Изменение поля телефона в форме контакта WordPress без плагинов — задача, которую можно решить с помощью базовых знаний PHP, HTML и JavaScript. Вы получаете полный контроль над внешним видом, поведением и валидацией поля, что улучшает качество контактных данных и пользовательский опыт. При необходимости можно расширить функционал с помощью популярных плагинов, таких как Clearfy, для быстрой доработки.

Экспериментируйте с кодом, тестируйте различные форматы и внедряйте лучшие практики для вашего сайта на WordPress.