Skip to content

Instantly share code, notes, and snippets.

@petermann
Last active May 20, 2024 22:49
Show Gist options
  • Save petermann/fd1a898e02ca91a0d7231a9f8ee662b4 to your computer and use it in GitHub Desktop.
Save petermann/fd1a898e02ca91a0d7231a9f8ee662b4 to your computer and use it in GitHub Desktop.
Masks Form Fields - WordPress Plugin
Masks Form Fields - WordPress Plugin
Link: https://wordpress.org/plugins/masks-form-fields/
<!--
* 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>
<!--
* 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>
<!--
* 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>
<!--
* 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>
'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/
* 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');
}
/**
* 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);
<!--
* 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>
<!--
* WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
* JavaScript - Reload the Masks Form Fields script by clicking the button.
-->
<script>
jQuery(document).ready(function ($) {
$('#BUTTON_ID').on('click', function () {
var mff_id = 'masks-form-fields-js';
var mff_src = '/wp-content/plugins/masks-form-fields/includes/js/scripts.js';
if ( $('#'+mff_id).length > 0 ) {
var mff_src = $('#'+mff_id).attr('src');
$('script#' + mff_id).remove();
}
$('<script>').attr('src', mff_src).attr('id', mff_id).appendTo('head');
});
});
</script>
/**
* 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);
<!--
* 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>
<!--
* 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 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);
<!--
* 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