Hello,
Firstly, congratulations on the plugin 🙂
I was opening a ticket about this but I believe we are using the same popup plugin (https://br.wordpress.org/plugins/wpb-popup-for-contact-form-7/)
On a page that already displays the form (without a popup) in its body, the plugin works correctly (phone field):
https://quimatic.greeky.co/teste-formulario-trabalhe-conosco/
However, on a page where the form only appears when we click to open the popup (“where to buy” button), the mask does not work (phone field):
https://quimatic.greeky.co/produto/aquatic-fluido-de-corte-a-base-dagua/
Any solution to help us?
Hi @mirazhyk,
Modify the existing code as indicated below.
<?php
function talisman_custom_masks_form_fields() {
?>
<script type="text/javascript">
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
function mff_mask_custom_script() {
jQuery('input.tel-new').mff_mask('+38(X00) 000-00-00', {
translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
placeholder: "+38(0__) ___-__-__"
});
}
if ( typeof wpb_pcf_on_cf7_form_init !== "function" ) {
function wpb_pcf_on_cf7_form_init() {
mff_mask_custom_script();
}
}
jQuery(document).ready(function () {
mff_mask_custom_script();
});
}
</script>
<?php
}
add_action('wp_footer', 'talisman_custom_masks_form_fields', 111);
Hi @marcosalexandre,
Change the CEP field from ‘numeric’ to ‘text’ and add the code below to the /wp-content/themes/YOUR-THEME/functions.php file to see if it resolves the issue for you.
<?php
function my_custom_masks_form_fields() {
?>
<script type="text/javascript">
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
function mff_mask_custom_script() {
jQuery('input[name="cep"]').mff_mask('00000-000');
jQuery('input[name="ddi-geral"]').mff_mask('009');
jQuery('input[name="ddd"]').mff_mask('00');
var PhoneMaskBehavior = function(val) {
return val.replace(/\D/g, '').length === 9 ? '00000-0000' : '0000-00009';
},
nonoOptions = {
onKeyPress: function(val, e, field, options) {
field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options);
}
};
jQuery('input[name="telefone"]').mff_mask(PhoneMaskBehavior, nonoOptions);
}
if ( typeof wpb_pcf_on_cf7_form_init !== "function" ) {
function wpb_pcf_on_cf7_form_init() {
mff_mask_custom_script();
}
}
jQuery(document).ready(function () {
mff_mask_custom_script();
});
}
</script>
<?php
}
add_action('wp_footer', 'my_custom_masks_form_fields', 111);
Hello!
I try to use more popular plugin – Popup maker
But mask in form in popup window doesn’t work, although everything is fine in static forms
Code in functions.php is now
function talisman_custom_masks_form_fields() {
?>
<script type="text/javascript">
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
function mff_mask_custom_script() {
jQuery('input.tel-new').mff_mask('+38(X00) 000-00-00', {
translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
placeholder: "+38(0__) ___-__-__"
});
}
if ( typeof wpbean_fopo_form_popup !== "function" ) {
function wpbean_fopo_form_popup() {
mff_mask_custom_script();
}
}
jQuery(document).ready(function () {
mff_mask_custom_script();
});
}
</script>
<?php
}
add_action('wp_footer', 'talisman_custom_masks_form_fields', 111);
https://prnt.sc/c5jvMbsKclCp form in header https://prnt.sc/p0SxGZe-AdSR
Hi @mirazhyk,
Try using this code, but remember to apply the tel-new class to the phone field.
function talisman_custom_masks_form_fields() {
?>
<script type="text/javascript">
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
function mff_mask_custom_script() {
jQuery('input.tel-new').mff_mask('+38(X00) 000-00-00', {
translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
placeholder: "+38(0__) ___-__-__"
});
}
jQuery(document).ready(function ($) {
mff_mask_custom_script();
$(document).on('pumAfterOpen', function () {
mff_mask_custom_script();
});
});
}
</script>
<?php
}
add_action('wp_footer', 'talisman_custom_masks_form_fields', 111);
@ivanpetermann thank You very much – it works)))
lovely support)))
