如何在### - #### - ###中设置联系表格7电话号码格式

时间:2017-12-26 21:50:08

标签: javascript jquery contact-form-7

我正在使用联系表单7,我想知道有没有办法设置电话号码,当用户使用的格式为### - #### - ###时,默认情况下,提前致谢< / p>

2 个答案:

答案 0 :(得分:2)

更新2019,因为Masked Input Plugin不会更新:

请按照以下步骤操作:

1)下载Cleave.js;

2)打开你的主题javascript文件夹(例如,Twenty Seventeen)并将文件放在wp-content / themes / twentyseventeen / js;

3)打开functions.php文件(位于主题的根文件夹中)并将代码粘贴到其中:

//Enqueue Cleave.js

function enqueue_cleave(){
     wp_enqueue_script('cleave', get_stylesheet_directory_uri().'/js/cleave.min.js');
}
add_action('wp_enqueue_scripts', 'enqueue_cleave'); 

add_action('wp_footer', 'activate_cleave');

function activate_cleave(){
   if( is_page('contact') ){ //only contact page will load the script.
?>

     <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
        var phone = new Cleave('#phone', {
            numericOnly:true,
            delimiter:'-',
            blocks:[3,4,3]
        });
    });

     </script>

<?php 
   }
}

5)在Contact Form 7中创建一个输入字段(id:phone将用于Cleave.js):

[text phone id:phone placeholder "Your phone number here."]

6)创建一个名为“contact”的页面并将表单放入其中。

就是这样。

答案 1 :(得分:0)

下载Contact Form 7 – Phone mask field plugin
您可以使用以下格式:

[mask* fieldname id:tel "___-____-___"]