Passo a Passo: Autopreencher endereço pelo CEP no Elementor

Home » Passo a Passo: Autopreencher endereço pelo CEP no Elementor

usu.cw
29/10/2025

Passo 1 — Configure os campos do formulário

No seu formulário do Elementor, crie os seguintes campos (com os IDs exatos):

Campo	Tipo de campo	ID do campo (em Avançado → ID do campo)
CEP	Texto	`cep`
Rua / Logradouro	Texto	`endereco`
Bairro	Texto	`bairro`
Cidade	Texto	`cidade`
Estado (UF)	Texto	`uf`

⚠️ O Elementor cria os IDs com prefixo form-field-, então o campo CEP terá no DOM o ID #form-field-cep, e assim por diante.

🧠 Passo 2 — Adicione o JavaScript

No widget do formulário, vá em:

Avançado → Custom CSS / Scripts personalizados (ou use um plugin como Simple Custom CSS and JS).

Cole o seguinte código:

<script>

document.addEventListener('DOMContentLoaded', function () {

  const cepInput = document.querySelector('#form-field-cep');

  const enderecoInput = document.querySelector('#form-field-endereco');

  const bairroInput = document.querySelector('#form-field-bairro');

  const cidadeInput = document.querySelector('#form-field-cidade');

  const ufInput = document.querySelector('#form-field-uf');
  // Máscara simples de CEP

  cepInput.addEventListener('input', function () {

    let v = cepInput.value.replace(/\D/g, '');

    if (v.length > 5) v = v.replace(/(\d{5})(\d)/, '$1-$2');

    cepInput.value = v;

  });
  // Ao sair do campo CEP, consulta o ViaCEP

  cepInput.addEventListener('blur', function () {

    const cep = cepInput.value.replace(/\D/g, '');

    if (cep.length !== 8) {

      alert('CEP inválido. Digite um CEP com 8 números.');

      return;

    }
    // Busca o CEP na API ViaCEP

    fetch(`https://viacep.com.br/ws/${cep}/json/`)

      .then(response => response.json())

      .then(data => {

        if (data.erro) {

          alert('CEP não encontrado.');

          return;

        }

// Preenche os campos enderecoInput.value = data.logradouro; bairroInput.value = data.bairro; cidadeInput.value = data.localidade; ufInput.value = data.uf; }) .catch(() => { alert('Erro ao buscar o CEP. Tente novamente.'); }); }); }); </script>