# Como validar CPF em formulários Webflow usando APIs externas
> Aprenda a integrar validação de CPF via API em formulários Webflow com JavaScript customizado, garantindo dados corretos antes do envio.
**Publicado:** 07/07/2024
**Autor:** Redação CPFHub.io
**URL:** https://cpfhub.io/blog/como-validar-cpf-em-formularios-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)
```javascript
// 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 tag").
```javascript
```
---
## Estilização do feedback
Adicione CSS customizado no Webflow (em Project Settings, seção "Custom Code", na tag `