Como validar CPF em formulários Webflow usando APIs externas

Para validar CPF em formulários Webflow, adicione JavaScript customizado que captura o valor do campo, envia para um proxy serverless e consulta a API do CPFHub.io antes de permitir o envio. O Webflow não oferece validação de CPF nativa, mas o API Connector via código customizado resolve isso em menos de uma hora.

Introdução

O Webflow é uma das plataformas de criação de sites mais populares entre designers e equipes de marketing, permitindo a construção de páginas sofisticadas sem necessidade de programação backend. No entanto, quando o objetivo é validar dados como CPF em formulários de cadastro, lead capture ou checkout, o Webflow nativo não oferece essa funcionalidade. A solução é integrar uma API externa de validação de CPF usando JavaScript customizado.

Por que validar CPF em formulários Webflow

Formulários Webflow são amplamente utilizados para:

• Cadastros de leads -- Empresas B2B que precisam do CPF para qualificação.

• Inscrições em eventos -- Eventos que exigem CPF para emissão de nota fiscal ou certificado.

• Pedidos e orçamentos -- Lojas e prestadores de serviço que coletam CPF para faturamento.

• Landing pages de produtos financeiros -- Fintechs que captam interessados e precisam validar a identidade.

Sem validação, o formulário aceita qualquer valor no campo de CPF, resultando em dados inválidos que comprometem todo o fluxo posterior.

Arquitetura da solução

Como o Webflow não possui backend próprio para executar código servidor, a integração com a API do CPFHub.io deve passar por um intermediário (proxy) para proteger a chave de API.

Fluxo recomendado

1. Usuário preenche o CPF no formulário Webflow.
2. JavaScript customizado captura o evento de saída do campo (blur) ou de submissão do formulário.
3. Requisição ao proxy -- O JavaScript envia o CPF para um endpoint intermediário (serverless function ou API proxy).
4. Proxy consulta o CPFHub.io -- O proxy faz a requisição à API com a chave de API protegida no servidor.
5. Resposta retorna ao formulário -- O resultado é exibido ao usuário antes do envio.

Por que usar um proxy

A chave de API (x-api-key) nunca deve ser exposta no código JavaScript do frontend. Se alguém inspecionar o código-fonte da página e encontrar a chave, poderá usá-la indevidamente. O proxy (uma serverless function, por exemplo) mantém a chave segura no servidor.

Configurando o proxy com serverless function

Veja um exemplo de proxy usando uma serverless function (Netlify Functions, Vercel, Cloudflare Workers ou similar):

Exemplo com Node.js (Vercel/Netlify)

// api/validar-cpf.js (serverless function)

export default async function handler(req, res) {
    // CORS headers para permitir chamadas do Webflow
    res.setHeader('Access-Control-Allow-Origin', 'https://seusite.webflow.io');
    res.setHeader('Access-Control-Allow-Methods', 'POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    if (req.method === 'OPTIONS') {
    return res.status(200).end();
    }

    if (req.method !== 'POST') {
    return res.status(405).json({ erro: 'Método não permitido' });
    }

    const { cpf } = req.body;
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    return res.status(400).json({ erro: 'CPF inválido' });
    }

    try {
    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpfLimpo}`,
    {
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY,
    'Accept': 'application/json'
    },
    signal: AbortSignal.timeout(10000)
    }
    );

    const dados = await response.json();
    return res.status(200).json(dados);

    } catch (erro) {
    return res.status(500).json({
    erro: 'Falha na validação'
    });
    }
}

Configurando o formulário no Webflow

Estrutura do formulário

No Webflow Designer, crie um formulário com os seguintes campos:

• Campo de CPF -- Input de texto com ID cpf-input.
• Campo de nome -- Input de texto com ID nome-input.
• Mensagem de feedback -- Div com ID cpf-feedback para exibir o resultado da validação.
• Botão de envio -- Botão submit padrão do Webflow.

Configuração de IDs

No painel de configurações de cada elemento no Webflow:

1. Selecione o campo de CPF.
2. Em "Element Settings", defina o ID como cpf-input.
3. Repita para o campo de nome (nome-input) e para a div de feedback (cpf-feedback).

JavaScript customizado para validação

Adicione o seguinte código no campo "Custom Code" do Webflow (em Project Settings ou dentro da página específica, na seção "Before </body> tag").

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cpfInput = document.getElementById('cpf-input');
    const nomeInput = document.getElementById('nome-input');
    const feedback = document.getElementById('cpf-feedback');
    const form = cpfInput.closest('form');
    const submitBtn = form.querySelector('[type="submit"]');

    let cpfValidado = false;

    // Máscara de CPF
    cpfInput.addEventListener('input', function(e) {
    let valor = e.target.value.replace(/\D/g, '');
    if (valor.length > 11) valor = valor.substring(0, 11);

    if (valor.length > 9) {
    valor = valor.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    } else if (valor.length > 6) {
    valor = valor.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
    } else if (valor.length > 3) {
    valor = valor.replace(/(\d{3})(\d{1,3})/, '$1.$2');
    }

    e.target.value = valor;
    cpfValidado = false;
    });

    // Validação ao sair do campo
    cpfInput.addEventListener('blur', async function() {
    const cpf = cpfInput.value.replace(/\D/g, '');

    if (cpf.length !== 11) {
    feedback.textContent = 'CPF deve ter 11 dígitos.';
    feedback.style.color = '#e74c3c';
    cpfValidado = false;
    return;
    }

    feedback.textContent = 'Validando CPF...';
    feedback.style.color = '#666';

    try {
    const response = await fetch('https://seu-proxy.vercel.app/api/validar-cpf', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cpf: cpf })
    });

    const dados = await response.json();

    if (dados.success) {
    feedback.textContent = 'CPF válido - ' + dados.data.name;
    feedback.style.color = '#27ae60';
    nomeInput.value = dados.data.name;
    cpfValidado = true;
    } else {
    feedback.textContent = 'CPF não encontrado. Verifique o número.';
    feedback.style.color = '#e74c3c';
    cpfValidado = false;
    }
    } catch (erro) {
    feedback.textContent = 'Erro na validação. Tente novamente.';
    feedback.style.color = '#e74c3c';
    cpfValidado = false;
    }
    });

    // Impedir envio sem validação
    form.addEventListener('submit', function(e) {
    if (!cpfValidado) {
    e.preventDefault();
    e.stopPropagation();
    feedback.textContent = 'Valide o CPF antes de enviar.';
    feedback.style.color = '#e74c3c';
    cpfInput.focus();
    }
    });
});
</script>

Estilização do feedback

Adicione CSS customizado no Webflow (em Project Settings, seção "Custom Code", na tag <head>):

<style>
    #cpf-feedback {
    font-size: 14px;
    margin-top: 4px;
    min-height: 20px;
    transition: color 0.3s ease;
    }
</style>

Boas práticas de segurança

Proteger a chave de API

• Nunca coloque a chave diretamente no JavaScript do Webflow.
• Use variáveis de ambiente no servidor proxy.
• Configure CORS no proxy para aceitar requisições apenas do seu domínio Webflow.

Rate limiting no proxy

Implemente rate limiting no proxy para evitar abuso:

• Limite de 10 requisições por minuto por IP.
• Bloqueio temporário para IPs que excedam o limite.

Validação dupla

• Valide o formato do CPF localmente antes de enviar ao proxy.
• Valide novamente no servidor proxy antes de chamar a API.

Alternativas para o proxy

Se configurar uma serverless function parecer complexo, existem alternativas:

• Zapier / Make (Integromat) -- Crie um webhook que recebe o CPF, consulta a API e retorna o resultado.

• Cloudflare Workers -- Crie um worker simples que atua como proxy, com plano gratuito generoso.

• Supabase Edge Functions -- Se você já usa Supabase como backend, pode criar uma edge function facilmente.

Testando a integração

1. Crie uma conta gratuita no CPFHub.io
2. Gere sua chave de API no painel (app.cpfhub.io).
3. Configure o proxy com a chave como variável de ambiente.
4. Teste a validação no formulário Webflow com CPFs válidos.
5. Verifique os logs no dashboard do CPFHub.io.

Para referência, a chamada cURL direta à API:

curl -X GET https://api.cpfhub.io/cpf/12345678900 \
    -H "x-api-key: SUA_CHAVE_DE_API" \
    -H "Accept: application/json"

Perguntas frequentes

Como o JavaScript customizado do Webflow se comunica com a API de CPF?

O JavaScript adicionado no campo "Custom Code" do Webflow captura o evento blur do campo de CPF, limpa a máscara e envia o número para um proxy serverless via fetch. O proxy então consulta a API do CPFHub.io com a chave protegida no servidor e devolve o resultado para o frontend exibir o feedback ao usuário em tempo real.

Por que preciso de um proxy serverless entre o Webflow e a API?

Expor a chave de API diretamente no JavaScript do Webflow permite que qualquer pessoa a encontre inspecionando o código-fonte da página. O proxy serverless (Vercel, Netlify Functions ou Cloudflare Workers) mantém a chave no servidor, adiciona rate limiting e configura CORS para aceitar requisições apenas do seu domínio.

O que acontece se o usuário tentar enviar o formulário sem validar o CPF?

O script intercepta o evento submit do formulário e chama e.preventDefault() caso o CPF ainda não tenha sido validado com sucesso. O botão de envio permanece funcional visualmente, mas o formulário não é submetido, e o foco retorna ao campo de CPF com uma mensagem de orientação.

Como garantir conformidade com a LGPD ao coletar CPF em formulários Webflow?

Informe na política de privacidade e próximo ao campo que o CPF será validado via API para garantir a autenticidade do cadastro. Não armazene o retorno completo da API além do necessário, restrinja o acesso aos logs de validação e documente a base legal — conforme orientações da ANPD.

Conclusão

Validar CPF em formulários Webflow é possível e recomendável, mesmo sem backend nativo na plataforma. A combinação de JavaScript customizado no Webflow com um proxy serverless e a API do CPFHub.io cria uma solução robusta que garante dados corretos, melhora a experiência do usuário e protege a integridade dos leads ou pedidos capturados. O plano gratuito com 50 consultas por mês é ideal para começar, e a migração para planos maiores é transparente quando a demanda crescer.

Cadastre-se em cpfhub.io — 50 consultas mensais gratuitas, sem cartão de crédito — e comece a validar CPF nos seus formulários Webflow hoje mesmo.