CODEWITHSUNDEEP
javascriptjquerycontact-form-7
rishav
rishav

Reputation: 27

How to set the contact form 7 phone number format in ###-####-###

I am using contact form 7,I was wondering is there a way to set the Phone number when Put by the user is the format ###-####-###,By default, Thanks in advance

Upvotes: 2

Views: 9603

Answers (2)

JoeyF
JoeyF

Reputation: 1

Download the Contact Form 7 – Phone mask field plugin.
You can use this format:

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

Upvotes: 0

Leonardo
Leonardo

Reputation: 801

Update 2019, since Masked Input Plugin will not be updated:

Follow these steps:

1) Download Cleave.js;

2) Open your theme javascript folder (for example, Twenty Seventeen) and put the file in wp-content/themes/twentyseventeen/js;

3) Open the functions.php file (located in root folder of your theme) and paste the code in the botton of it:

//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) Create an input field in Contact Form 7 (id:phone will be used for Cleave.js):

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

6) Create a page with the name 'contact' and put your form in it.

That's it.

Upvotes: 3

Related Questions