lellocoelho

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.
———————————————————————
Portuguese

Pessoal 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);
          
     }
                                     ) 
          
}

• This reply was modified 5 years, 11 months ago by lellocoelho.
• This reply was modified 5 years, 11 months ago by lellocoelho.

Hi,

Sorry but this not gonna work for me. Let me explain:

(11) -> this part is where the customer input the country. In Brazil we have a lot of numbers like:
11- S?o Paulo
21- Rio de janeiro
61 – Brasilia
etc.

The part 9. means that is a mobile phone. Every mobile number starts with 9 in Brazil and have 1 digit more then a local phones. This is why after the number 9 we have a dot.

EX: 9.6789-7374 => 9 digits

But we have local phones too starting from 1 to 8 (9 is only for mobiles) and have 1 digit less then a mobile phones:

EX: 5631-5055 => 8 digits

So, what I need to the field do is:

1- not allow to input letters like your code do.
2- Mask mobile numbers like I said on the last message.

Thanks.

Hi Suzie,

I saw the video that you recorded and the test that you did not brings what I need to do…

I think that I didn’t explain very well what I really need to do….

I need to mask the numbers imputed in this field like this way:
Numbers start with 9 mask this :
(11) 9.1234-5678

Numbers start with any number except 9 mask this:

(11) 1234-5678

What I expect the field do is to bring the right format when someone input only numbers.

Example: one client input the numbers 11987654321 the field brings the () . and – and modify for this format (11) 9.8765-4321
This is the format of mobile numbers from Brazil. And I need to do the same with local numbers who doesn’t start with 9 and have one digit less.

Thank you

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! ??

• This reply was modified 6 years ago by lellocoelho.

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

• This reply was modified 6 years ago by lellocoelho.
• This reply was modified 6 years ago by lellocoelho.
• This reply was modified 6 years ago by lellocoelho.
• This reply was modified 6 years ago by lellocoelho.

Hi Suzie,

Thank you for your help.
Can you tell me where do I set the id name on the field please?
Because when I edit the field it doesnt have the id option.
This is the options that I have to edit:

Single Line Text:
Label
Label position
Hide label
Required
Placeholder
Width(px)

ADVANCED OPTIONS
Label width(px)
Readonly
Allow only unique values
Validation (RegExp.)
Class name
Additional Attributes

Thank you so much! ??