Neste tutorial eu vou te mostrar como utilizar TODOS os widgets atômicos do novo formulário do Elementor Pro V4.
Mostro na prática como funciona a nova estrutura baseada em Atomic Elements, explicando cada widget disponível e suas configurações no detalhe.
Além dos widgets, você também verá todas as configurações do formulário antes e após o envio, entendendo exatamente como funciona o novo sistema implementado na versão 4 do Elementor.
HTML
<script>
document.getElementById('whatsapp').addEventListener('input', function(e) {
let valor = e.target.value.replace(/\D/g, '');
// Limita a 11 dígitos (DDD + 9 dígitos)
valor = valor.substring(0, 11);
let formatado = '';
if (valor.length > 0) {
formatado += '(' + valor.substring(0, 2);
}
if (valor.length >= 3) {
formatado += ') ';
}
if (valor.length <= 10) {
// Telefone fixo: (99) 9999-9999
if (valor.length > 2) {
formatado += valor.substring(2, 6);
}
if (valor.length > 6) {
formatado += '-' + valor.substring(6, 10);
}
} else {
// Celular: (99) 99999-9999
formatado += valor.substring(2, 7);
if (valor.length > 7) {
formatado += '-' + valor.substring(7, 11);
}
}
e.target.value = formatado;
});
</script>
