CF7 phone_us placeholder deletion

Hi @it-hertz,

You can try using the following script to implement a custom mask in the US phone number format with the use of a placeholder.

<script type="text/javascript">
    jQuery(document).ready(function($){
        // To apply the custom mask, add the class 'phone_us_custom' to the desired input field in your form
        // Apply the mask '(000) 000-0000' for the US phone number format
        // The {placeholder: '(___) ___-____'} defines the guide text for the mask
        // The {clearIfNotMatch: true} allows clearing the field if the input doesn't match the mask
        jQuery('input.phone_us_custom').mff_mask('(000) 000-0000', {placeholder: '(___) ___-____', clearIfNotMatch: true});
    });
</script>

Click here?for more details on how to add custom mask.

Should you need any further information, please do not hesitate to contact me. Thanks for your suggestions!

Well, yes, that does work in terms of having the field adhere to CF7’s default behavior of a visible placeholder on form load and when manually clearing the field. It’s not quite what I had in mind as far as overwriting only the underscores and leaving the rest of the placeholder intact, since it deletes the entire placeholder on initial user input, just like CF7 does by default. I don’t know whether you had a look at that other plugin, but the author overrides CF7’s placeholder behavior.

It’s not a biggie, just aesthetic preference. At least my form now informs users what the phone string is going to look like when they’ve filled in the field, which is plenty good enough.

I set clearIfNotMatch to false in order to also have a minlength:14 error prompt on failure to complete the phone number. Works like a charm, thanks for the plugin!

Hi @it-hertz,

It’s unfortunate that the outcome didn’t fully meet your expectations. Unfortunately, the specific feature you’re looking for is not available in the jQuery Mask Plugin library that I’m using for the plugin. After analyzing the other plugin you mentioned, I noticed that it utilizes a different library. However, it’s important to note that this library was discontinued in December 2017.

Thank you very much for your feedback and for using my plugin. If there’s anything else I can help with, please don’t hesitate to let me know.