Last active
May 20, 2024 22:49
-
-
Save petermann/fd1a898e02ca91a0d7231a9f8ee662b4 to your computer and use it in GitHub Desktop.
Masks Form Fields - WordPress Plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Masks Form Fields - WordPress Plugin | |
Link: https://wordpress.org/plugins/masks-form-fields/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* JavaScript - Custom script to add BR phone mask in the field with Contact Form 7 in Popup Elementor and initialize the form correctly. | |
* Add an HTML code widget below the form inside the Popup with the code below and change the FORM-ID with the ID of the form in the popup. | |
--> | |
<script type="text/javascript"> | |
var wpcf7_popup_load = false; | |
jQuery(document).on('elementor/popup/show', () => { | |
if (!wpcf7_popup_load) { | |
document.querySelectorAll("form#FORM-ID").forEach(( | |
function(e) { | |
wpcf7_popup_load = true; | |
return wpcf7.init(e) | |
} | |
)); | |
var PhoneMaskBehavior = function(val) { | |
return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; | |
}, | |
nonoOptions = { | |
onKeyPress: function(val, e, field, options) { | |
field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options); | |
} | |
}; | |
jQuery('input.phone').mff_mask(PhoneMaskBehavior, nonoOptions); | |
} | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Custom script to add Brazilian phone mask in phone field. | |
--> | |
<script type="text/javascript"> | |
jQuery(document).ready(function () { | |
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') { | |
var PhoneMaskBehavior = function(val) { | |
return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; | |
}, | |
nonoOptions = { | |
onKeyPress: function(val, e, field, options) { | |
field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options); | |
} | |
}; | |
jQuery('input[name="form_fields[phone]"]').mff_mask(PhoneMaskBehavior, nonoOptions); | |
} | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* This custom script applies a phone mask for numbers in Portugal. | |
--> | |
<script> | |
jQuery(document).ready(function ($) { | |
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') { | |
var PhoneMaskBehaviorPT = function(val) { | |
var num = val.replace(/\D/g, ''); | |
if (num.startsWith('351')) { | |
return (num.startsWith('3519')) ? '+000 00 0000000' : '+000 000 000 000'; | |
} | |
return (num.startsWith('9')) ? '00 0000000' : '000 000 000'; | |
}, | |
nonoOptionsPT = { | |
onKeyPress: function(val, e, field, options) { | |
field.mff_mask(PhoneMaskBehaviorPT.apply({}, arguments), options); | |
}, | |
clearIfNotMatch: true | |
}; | |
jQuery('input.phone_pt').mff_mask(PhoneMaskBehaviorPT, nonoOptionsPT).attr('inputmode', 'numeric'); | |
} | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Custom script to apply a Ukrainian phone mask to the phone field. | |
--> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($){ | |
// To apply the custom mask, add the class 'phone_custom' to the desired input field in your form | |
// Apply the mask '+38(0__) ___-__-__' for the custom phone number format | |
// Added 'X' for fixed '0' in the formatting using translation | |
// The {placeholder: '+38(0__) ___-__-__'} defines the guide text for the mask | |
jQuery('input.phone_custom').mff_mask('+38(X00) 000-00-00', { | |
translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}}, | |
placeholder: "+38(0__) ___-__-__" | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Code to activate the mask plugin in the admin area. | |
* Add the code below in the theme functions file. /wp-content/themes/YOUR-THEME/functions.php | |
*/ | |
if (function_exists('mff_do_enqueue_scripts') and is_admin()) { | |
add_action('admin_enqueue_scripts', 'mff_do_enqueue_scripts'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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.16 - 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']").mff_mask('(000) 000-0000'); | |
// $("input.class_name").mff_mask('custom-mask'); | |
}); | |
</script> | |
<?php | |
} | |
add_action('wp_footer', 'custom_masks_form_fields', 111); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* JavaScript - Custom script to add phone mask in field with Contact Form 7 in Popup Elementor. | |
--> | |
<script type="text/javascript"> | |
jQuery(document).on('elementor/popup/show', function () { | |
jQuery('input[type="tel"]').mff_mask('(000)000-0000'); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Title: Script for Custom Mask in US Phone Number Format with Placeholder. | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Function to add custom mask. /wp-content/themes/YOUR-THEME/functions.php | |
*/ | |
function custom_masks_form_fields() { | |
?> | |
<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> | |
<?php | |
} | |
add_action('wp_footer', 'custom_masks_form_fields', 111); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Custom script to add an invalid class when entering an invalid digit. | |
--> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($) { | |
$("input[name='INPUT_NAME']").mff_mask("(000) 000-0000", { | |
reverse: false, | |
onComplete: function(val) { | |
$("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME'); | |
}, | |
onChange: function(val) { | |
$("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME'); | |
}, | |
onInvalid: function(val, e, f, invalid, options) { | |
$("input[name='INPUT_NAME']").addClass('INVALID_CLASS_NAME'); | |
} | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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']").mff_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']\").mff_mask('(000) 000-0000'); });</script>";}, 111); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/ | |
* Custom script to add Russian phone mask in phone field. | |
--> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($){ | |
$("input[name='PHONE-INPUT-NAME']").mff_mask("(000) 000-00-00"); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment