Como colocar máscara para campos de formulário com Elementor sem plugins – Telefone, CEP, CPF, CNPJ.

admin72
15/01/2024

Neste tutorial rápido, você aprenderá a usar máscaras nos campos de formulário do Elementor sem a necessidade de plugins adicionais. Os campos do formulário se ajustarão automaticamente para os formatos de telefone, CEP, CPF ou CNPJ, evitando o preenchimento de informações desnecessárias.

Telefone: (xx) x.xxxx-xxxx
CEP: xxxxx-xxx
CPF: xxx.xxx.xxx-xx
CNPJ: xx.xxx.xxx/xxxx-xx

Passo 1: Crie o formulário

No editor do Elementor, adicione o widget de formulário / form.

Passo 2: Edite o formulário

Adicione ou remova os campos de seu formulário de acordo com sua necessidade. No exemplo da imagem abaixo, usaremos os 4 campos que suportam máscaras.

Passo 3: Edite os campos do formulário

Nos campos de telefone, CEP, CPF ou CNPJ, altere o tipo (“type“) para “Text” e insira no ID (localizado em “advanced“) o nome correspondente do campo, utilizando todas as letras minúsculas: telefone, cep, cpf, cnpj.

Passo 4: Adicione o código

Adicione um widget de HTML na parte mais inferior de sua página e copie e cole o código abaixo.

Código:

				
					<script>
function mask(o, f) {
v_obj = o;
v_fun = f;
setTimeout("execmask()", 1);
}

function execmask() {
v_obj.value = v_fun(v_obj.value);
}

function maskTelefone(v) {
v = v.replace(/\D/g, "");
v = v.replace(/^(\d{2})(\d)/, "($1) $2");
v = v.replace(/(\d{5})(\d)/, "$1-$2");
return v;
}

function maskCep(v) {
v = v.replace(/\D/g, "");
v = v.replace(/^(\d{5})(\d)/, "$1-$2");
return v;
}

function maskCpf(v) {
v = v.replace(/\D/g, "");
v = v.replace(/(\d{3})(\d)/, "$1.$2");
v = v.replace(/(\d{3})(\d)/, "$1.$2");
v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
return v;
}

function maskCnpj(v) {
v = v.replace(/\D/g, "");
v = v.replace(/^(\d{2})(\d)/, "$1.$2");
v = v.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3");
v = v.replace(/\.(\d{3})(\d)/, ".$1/$2");
v = v.replace(/(\d{4})(\d)/, "$1-$2");
return v;
}

window.onload = function() {
setMask('telefone', '.elementor-form input[name="form_fields[telefone]"]', maskTelefone, 15);
setMask('cpf', '.elementor-form input[name="form_fields[cpf]"]', maskCpf, 14);
setMask('cnpj', '.elementor-form input[name="form_fields[cnpj]"]', maskCnpj, 18);
setMask('cep', '.elementor-form input[name="form_fields[cep]"]', maskCep, 9);
};

function setMask(type, selector, functionMask, sizeMax) {
let fields = document.querySelectorAll(selector);
fields.forEach(function(field) {
field.setAttribute('maxlength', sizeMax);
field.onkeyup = function() {
mask(this, functionMask);
};
});
}

window.addEventListener( 'elementor/popup/show', ( event )=>{
setMask('telefone', '.elementor-form input[name="form_fields[telefone]"]', maskTelefone, 15);
setMask('cpf', '.elementor-form input[name="form_fields[cpf]"]', maskCpf, 14);
setMask('cnpj', '.elementor-form input[name="form_fields[cnpj]"]', maskCnpj, 18);
setMask('cep', '.elementor-form input[name="form_fields[cep]"]', maskCep, 9);
});
</script>