Contact Form Maker Masks
-
Hi guys,
I need some help please.
I would like to insert a single line text field to work as a phone number field.
I know that the contact form maker has a standard phone number field but this one doesnt work for me.
So, i would like to know how can i apply a phone number mask in this field as like a jquery or javascript do.
I found a javascript that do what i want, but i dont know how to include in this field:
===== Javascript code ====
function maskIt(w,m,r,a,p){
// Variáveis da fun??o
if (p===true) {
var txt = (!r) ? w.value.replace(/[^\w]+/gi,”) : w.value.replace(/[^\w]+/gi,”).reverse();
} else {
var txt = (!r) ? w.value.replace(/[^\d]+/gi,”) : w.value.replace(/[^\d]+/gi,”).reverse();
}
var mask = (!r) ? m : m.reverse();
var pre = (a ) ? a.pre : “”;
var pos = (a ) ? a.pos : “”;
var ret = “”;// Loop na máscara para aplicar os caracteres
for(var x=0,y=0, z=mask.length;x<z && y<txt.length;){
if((mask.charAt(x)!=’#’) && (mask.charAt(x)!=’&’)){
ret += mask.charAt(x); x++;
} else{
if(mask.charAt(x)==’#’){
ret += txt.charAt(y).replace(/[^\d]+/gi,”); y++; x++;
} else if(mask.charAt(x)==’&’) {
ret += txt.charAt(y).replace(/[\d]+/gi,”); y++; x++;
}
}
}// Retorno da fun??o
ret = (!r) ? ret : ret.reverse()
w.value = pre+ret+pos;
}// Novo método para o objeto ‘String’
String.prototype.reverse = function(){
return this.split(”).reverse().join(”);
};
function maskCel (obj) {
var str = obj.value;
var ddd = str.substring(1,3);
var pdi = str.substring(5,6);
// ORIGINAL – Mudei tirando o DDD if ((ddd == 11) && (pdi == 9)) {
if (pdi == 9) {
maskIt(obj,'(##) #.####-####’, false, “”, true);
} else {
maskIt(obj,'(##) ####-####’, false, “”, true);
}
}============== HTML code to call JS ===
<input type=”text” name=”placa” onkeyup=”maskCel(this)” />
================
To see how it works just copy and paste the code in this website:
https://codepen.io/pen/thank you for your help.
The page I need help with: [log in to see the link]
-
Hi Suzie!
Sorry to bother you again.
Awesome!! Thank you very much for your help.
I thought that I could change and set my ouwn field id direclty on the contact form maker aplication.But I have another problem with the code you suggested… Its not working ??
The code like you wrote dont do nothing. But I saw that in your code has one line commented.
//jQuery(this).val(jQuery(this).val().replace(/[^d].+/, ""));When I uncomment this line your code do something, but its not what I expected.
I can input only 2 numbers and it erases automatically.
I really dont know where am I wrong.
This is the code as like I wrote:
jQuery("#wdform_12_element1").on("keypress keyup blur",function (event) { jQuery(this).val(jQuery(this).val().replace(/[^d].+/, "")); if ((event.which < 48 || event.which > 57)) { event.preventDefault(); } } );Thank you in advance
Hi Suzie,
I take a look more deeply and I found this code:
could you please take a look why this code doesnt work only on CFM?
this code do exactly what I need.I did some tests with this code on playcode.io and codepen.io and it works properly. But when I paste it on the CFM the code fails.
I commented it in english for you.
function before_load() { $("#wdform_12_element1").on("keypress keyup",function(){ // pego o valor do telefone e coloco na variavel // I get the value of the field and put it on a VAR var texto = $(this).val(); // Tiro tudo que n?o é numero da variavel // I take off the var all letters and leave only numbers texto = texto.replace(/[^d]/g, ''); // Se tiver alguma coisa digitada // If there is a number if (texto.length > 0) { // Ponho o primeiro parenteses do DDD // I insert the first '(' of the DDD texto = "(" + texto; //pergunto se digitou 3 numeros // If it has more than 3 numbers if (texto.length > 3) { // Fecha o parenteses do DDD com 2 numeros // I insert the second ')' of the DDD with 2 numbers texto = [texto.slice(0, 3), ") ",texto.slice(3)].join('') ; } if (texto.length > 12) { // Se for 13 digitos ( DDD + 9 digitos) ponhe o tra?o no quinto digito // If it has 13 digits (DDD plus 9 numbers) I insert the '-' on the 5 digit if (texto.length > 13) texto = [texto.slice(0, 10), "-", texto.slice(10)].join(''); else // Se for 12 digitos ( DDD + 8 digitos) ponhe o tra?o no quarto digito // If it has 12 digits (DDD plus 8 numbers) I insert the '-' on the 4 digit texto = [texto.slice(0, 9), "-", texto.slice(9)].join(''); } // N?o adianta digitar mais digitos! // dont allow to insert more numbers if (texto.length > 15) texto = texto.substr(0,15); } // Retorna o texto $(this).val(texto); } ) }Thank you for your help.
Have a nice day! ??
Hi Suzie,
I′m sorry but I disagree with you. Its not a customization… Its only a mobile and local phone mask, nothing more.
I dont understand so much of javascript and, after some nights trying, I′ve found a way.
First step you need to download and paste jquery into JS folder of your theme
Second step right click into your browser and click into “inspect” (ctrl+shift+I)
– open the console and take a look of the errors that show to you.then this is the code that′s worked for me:
This code can be improve of course, but it already do what I need.
———————————————————————
PortuguesePessoal tive um problema para usar o Contact Form Maker.
Existe uma field padrao para telefone ja propria do formulario, porem ela nao fornece a mascara de telefones locais e celulares do Brasil.Depois de muito quebrar a cabeca e com um pouco de ajuda da Suzie eu acabei conseguindo resolver a questao pegando alguns codigos da internet e fazendo testes.
Vou explicar como resolvi.Primeiro quando abri o site do formulario eu cliquei com o bot?o direiro do mouse e cliquei em inspecionar. Fui na aba console e la me mostrou um erro de Jquery.
O arquivo Jquery nao estava na pasta JS do tema que usava. fiz o download e upei ele para a pasta em wp-content/themes/serif-pro (no meu caso) /js
O caminho que estava faltando foi informado no console do browser.Apos feito isso ai vieram as noites sem dormir pegando codigos e mais codigos na internet para fazer a mascara funcionar.
No final ficou esse codigo abaixo.
Com certeza da pra melhorar, mas ele ja faz aquilo que eu precisava.OBS: eu precisava que o telefone fixo ficasse no formado (11)5665-5555 e o celular no formato (11)9.6666-7878
Segue.
function before_load() { jQuery("#wdform_12_element1").on("keypress keyup",function(){ // pego o valor do telefone e coloco na variavel var texto = jQuery(this).val(); if (texto.length == 0) { texto = texto +"("; } if (texto.length == 3) { texto = texto +")"; } if (texto.length == 5) { if (texto.includes('9')) { texto = texto +"." ; } } if (texto.length == 12) { texto = [texto.slice(0, 8), "-", texto.slice(8)].join(''); } if (texto.length == 15) texto = [texto.slice(0, 8), texto.slice(9, 11), "-", texto.slice(11) ].join(''); jQuery(this).val(texto); } ) }
- The topic ‘Contact Form Maker Masks’ is closed to new replies.
