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/
<!--
* 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>
'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']").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 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"]').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>
<!--
* 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']").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']").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);
<!--
* 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']").mask("(000) 000-00-00");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment