Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Masks Form Fields - WordPress Plugin
Masks Form Fields - WordPress Plugin
Link: https://wordpress.org/plugins/masks-form-fields/
'0': {pattern: /\d/}, // (Numbers)
'9': {pattern: /\d/, optional: true}, // (Optional Numbers)
'#': {pattern: /\d/, recursive: true}, // (Recursive Numbers)
'A': {pattern: /[a-zA-Z0-9]/}, // (Alphanumeric, Letters and Numbers)
'S': {pattern: /[a-zA-Z]/} // (Letters only)
/**
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* Function to add custom mask. /wp-content/themes/YOUR-THEME/functions.php
* Documentation, Demos & Usage Examples - jQuery Mask Plugin v1.14.0 - https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
*/
function custom_masks_form_fields() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("input[name='input_name']").mask('(000) 000-0000');
// $("input.class_name").mask('custom-mask');
});
</script>
<?php
}
add_action('wp_footer', 'custom_masks_form_fields', 111);
<!--
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* JavaScript - Custom script to add mask in input phone the Divi Theme.
* Go to Divi Theme Options -> Integration set "Enable header code" and add below code in "Add code to the < head > of your blog".
-->
<script type="text/javascript">
jQuery(document).ready(function($){
$("input[name='PHONE-INPUT-NAME']").addClass("phone_us");
});
</script>
<!--
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* JavaScript - Custom script to add mask in input phone the Elementor Forms.
-->
<script type="text/javascript">
jQuery(document).ready(function($){
$("input[type='tel']").removeAttr("pattern").addClass("phone_us");
});
</script>
/**
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* JavaScript - Custom script to add mask in input phone the WooCommerce.
*/
jQuery(document).ready(function($){
$("input[name='billing_phone']").mask("(000) 000-0000");
});
/**
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* PHP - Custom script to add mask in input phone the WooCommerce. /wp-content/themes/YOUR-THEME/functions.php
*/
add_action('wp_footer', function () {echo "<script type=\"text/javascript\">jQuery(document).ready(function($){ $(\"input[name='billing_phone']\").mask('(000) 000-0000'); });</script>";}, 111);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment