Как добавить маску ввода номера телефона в Elementor, Contact Form 7, любую форму

Опубликовано автором

Первый вариант

Библиотека маска ввода: https://github.com/digitalBush/jquery.maskedinput

Первый код для подключения файла библиотеки:

function wpl_scripts(){
 $uploads = wp_upload_dir();
 $upload_path = $uploads['baseurl'];
 wp_enqueue_script('masked-input', $upload_path . '/FOLDER_NAME/jquery.maskedinput.min.js', array('jquery'), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'wpl_scripts' );

Второй для инициализации:

Установка маски ввода:
jQuery(document).ready(function($){
  $('input[type ="tel"]').mask("+7-(999)-999-9999", { placeholder: " " });
});

Второй вариант — без jQuery и с «запоминанием» уже введённых цифр

Добавляем этот код в functions.php:

function cf7_phone_mask_scripts() {
  wp_enqueue_script( 'inputmask', 'https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js', [], null, true );

  wp_add_inline_script( 'inputmask', "
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('input[type=\"tel\"]').forEach(function(input) {
      Inputmask('+7 (999) 999-99-99').mask(input);
    });
  });
" );
}
add_action( 'wp_enqueue_scripts', 'cf7_phone_mask_scripts' );
Просмотры: 730