# Responsividade em formulários de CPF: desktop, tablet e mobile

> Aprenda a criar formulários de CPF responsivos que funcionam perfeitamente em desktop, tablet e mobile, com exemplos de CSS e JavaScript.

**Publicado:** 22/02/2026
**Autor:** Redação CPFHub.io
**URL:** https://cpfhub.io/blog/responsividade-em-formularios-de-cpf-desktop-tablet-e-mobile

---


Formulários de CPF responsivos funcionam em qualquer dispositivo quando combinam abordagem mobile-first, teclado numérico nativo (`inputMode="numeric"`), touch targets de pelo menos 48px e feedback visual claro. Com CSS e JavaScript simples, é possível criar uma experiência consistente do iPhone SE ao monitor 4K — sem perda de conversão.

## Introdução

No Brasil, mais de 60% dos acessos à internet acontecem via dispositivos móveis. Isso significa que a maioria dos seus usuários vai preencher o campo de CPF em uma tela pequena, com teclado virtual e, possivelmente, com uma conexão instável. Se o formulário não for responsivo, a taxa de abandono será alta.

Responsividade vai além de fazer o layout caber na tela. Envolve escolher o teclado virtual correto, dimensionar botões para toque com o dedo, ajustar espaçamentos e garantir que o feedback visual funcione em qualquer resolução. As diretrizes de acessibilidade do [W3C](https://www.w3.org/WAI/WCAG21/quickref/) recomendam que todos os controles interativos tenham área de toque mínima de 44x44 pixels — um padrão que deve guiar qualquer formulário responsivo.

---

## Princípios de design responsivo para formulários

### Mobile-first

Comece projetando para mobile e depois adicione complexidade para telas maiores. Isso garante que a experiência base seja funcional mesmo no menor dispositivo.

### Touch targets adequados

O tamanho mínimo recomendado para alvos de toque é 44x44 pixels (Apple) ou 48x48dp (Google). Inputs e botões devem respeitar esse mínimo.

### Teclado virtual nativo

Use `inputMode="numeric"` para exibir apenas o teclado numérico em dispositivos móveis. Isso elimina a necessidade de o usuário trocar de teclado.

### Viewport meta tag

Sempre inclua a meta tag de viewport para evitar zoom indesejado em dispositivos móveis.

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
```

---

## Estrutura HTML do formulário

```html
<form class="form-cpf" id="formCPF">
 <div class="form-header">
 <h2>Verificacao de CPF</h2>
 <p>Informe seu CPF para continuar.</p>
 </div>

 <div class="form-body">
 <div class="campo campo-cpf">
 <label for="cpf">CPF</label>
 <div class="input-group">
 <input
 type="text"
 id="cpf"
 inputmode="numeric"
 placeholder="000.000.000-00"
 maxlength="14"
 autocomplete="off"
 required
 />
 <div class="input-status" id="inputStatus"></div>
 </div>
 <p class="feedback" id="feedback" role="alert"></p>
 </div>

 <div class="dados-resultado" id="dadosResultado" style="display: none;">
 <div class="dado">
 <span class="dado-label">Nome</span>
 <span class="dado-valor" id="resultNome"></span>
 </div>
 <div class="dado">
 <span class="dado-label">Nascimento</span>
 <span class="dado-valor" id="resultNasc"></span>
 </div>
 <div class="dado">
 <span class="dado-label">Genero</span>
 <span class="dado-valor" id="resultGenero"></span>
 </div>
 </div>
 </div>

 <div class="form-footer">
 <button type="submit" id="btnSubmit" disabled>Verificar CPF</button>
 </div>
</form>
```

---

## CSS responsivo com media queries

O CSS utiliza a abordagem mobile-first com breakpoints para tablet e desktop.

```css
/* === Base (Mobile) === */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background: #f5f5f5;
 color: #333;
 padding: 16px;
}

.form-cpf {
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 2px 12px rgba(0,0,0,0.08);
 overflow: hidden;
 max-width: 100%;
}

.form-header {
 padding: 20px 20px 0;
}
.form-header h2 { font-size: 1.3rem; margin-bottom: 4px; }
.form-header p { color: #666; font-size: 0.9rem; }

.form-body { padding: 20px; }

.campo { margin-bottom: 16px; }
.campo label {
 display: block;
 font-weight: 600;
 font-size: 0.9rem;
 margin-bottom: 6px;
}

.input-group { position: relative; }

.input-group input {
 width: 100%;
 padding: 14px 44px 14px 14px;
 font-size: 1.1rem;
 border: 2px solid #ddd;
 border-radius: 10px;
 outline: none;
 transition: border-color 0.2s;
 -webkit-appearance: none;
}
.input-group input:focus { border-color: #3498db; }
.input-group input.valido { border-color: #2ecc71; }
.input-group input.invalido { border-color: #e74c3c; }

.input-status {
 position: absolute;
 right: 14px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 1.2rem;
}

.feedback {
 font-size: 0.85rem;
 margin-top: 6px;
 min-height: 20px;
}

.dados-resultado {
 background: #f8f9fa;
 border-radius: 10px;
 padding: 16px;
}
.dado {
 display: flex;
 justify-content: space-between;
 padding: 8px 0;
 border-bottom: 1px solid #eee;
}
.dado:last-child { border-bottom: none; }
.dado-label { color: #666; font-size: 0.85rem; }
.dado-valor { font-weight: 600; font-size: 0.95rem; }

.form-footer { padding: 0 20px 20px; }

.form-footer button {
 width: 100%;
 padding: 16px;
 font-size: 1.1rem;
 font-weight: 600;
 border: none;
 border-radius: 10px;
 background: #3498db;
 color: #fff;
 cursor: pointer;
 transition: background 0.2s;
 /* Touch target minimo de 48px */
 min-height: 48px;
}
.form-footer button:hover { background: #2980b9; }
.form-footer button:disabled {
 background: #bbb;
 cursor: not-allowed;
}

/* === Tablet (768px+) === */
@media (min-width: 768px) {
 body { padding: 40px; }

 .form-cpf {
 max-width: 520px;
 margin: 0 auto;
 }

 .form-header { padding: 28px 28px 0; }
 .form-header h2 { font-size: 1.5rem; }

 .form-body { padding: 28px; }

 .input-group input {
 padding: 16px 48px 16px 16px;
 font-size: 1.2rem;
 }

 .dados-resultado {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0 16px;
 }
 .dado:last-child {
 grid-column: span 2;
 }

 .form-footer { padding: 0 28px 28px; }
}

/* === Desktop (1024px+) === */
@media (min-width: 1024px) {
 body {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 40px;
 }

 .form-cpf {
 max-width: 560px;
 box-shadow: 0 4px 24px rgba(0,0,0,0.12);
 }

 .form-header { padding: 32px 32px 0; }
 .form-body { padding: 32px; }
 .form-footer { padding: 0 32px 32px; }

 .form-footer button:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(52,152,219,0.3);
 }
}
```

---

## JavaScript de validação e consulta

```javascript
const cpfInput = document.getElementById('cpf');
const feedback = document.getElementById('feedback');
const inputStatus = document.getElementById('inputStatus');
const btnSubmit = document.getElementById('btnSubmit');

function maskCPF(value) {
 const d = value.replace(/\D/g, '').slice(0, 11);
 let r = '';
 for (let i = 0; i < d.length; i++) {
 if (i === 3 || i === 6) r += '.';
 if (i === 9) r += '-';
 r += d[i];
 }
 return r;
}

function validarCPF(cpf) {
 if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
 let soma = 0;
 for (let i = 0; i < 9; i++) soma += parseInt(cpf[i]) * (10 - i);
 let resto = (soma * 10) % 11;
 if (resto === 10) resto = 0;
 if (resto !== parseInt(cpf[9])) return false;
 soma = 0;
 for (let i = 0; i < 10; i++) soma += parseInt(cpf[i]) * (11 - i);
 resto = (soma * 10) % 11;
 if (resto === 10) resto = 0;
 return resto === parseInt(cpf[10]);
}

cpfInput.addEventListener('input', function () {
 this.value = maskCPF(this.value);
 const digits = this.value.replace(/\D/g, '');

 if (digits.length < 11) {
 this.className = '';
 inputStatus.textContent = '';
 feedback.textContent = '';
 btnSubmit.disabled = true;
 return;
 }

 if (validarCPF(digits)) {
 this.className = 'valido';
 inputStatus.textContent = '\u2713';
 inputStatus.style.color = '#2ecc71';
 feedback.textContent = '';
 btnSubmit.disabled = false;
 } else {
 this.className = 'invalido';
 inputStatus.textContent = '\u2717';
 inputStatus.style.color = '#e74c3c';
 feedback.textContent = 'CPF invalido.';
 feedback.style.color = '#e74c3c';
 btnSubmit.disabled = true;
 }
});

document.getElementById('formCPF').addEventListener('submit', async function (e) {
 e.preventDefault();
 const digits = cpfInput.value.replace(/\D/g, '');

 btnSubmit.disabled = true;
 btnSubmit.textContent = 'Verificando...';

 const controller = new AbortController();
 const timeoutId = setTimeout(() => controller.abort(), 10000);

 try {
 const res = await fetch(`https://api.cpfhub.io/cpf/${digits}`, {
 headers: {
 'x-api-key': 'SUA_CHAVE_DE_API',
 'Accept': 'application/json'
 },
 signal: controller.signal
 });
 clearTimeout(timeoutId);
 const json = await res.json();

 if (json.success) {
 document.getElementById('resultNome').textContent = json.data.name;
 document.getElementById('resultNasc').textContent = json.data.birthDate;
 document.getElementById('resultGenero').textContent =
 json.data.gender === 'M' ? 'Masculino' : 'Feminino';
 document.getElementById('dadosResultado').style.display = 'block';
 feedback.textContent = 'CPF verificado com sucesso!';
 feedback.style.color = '#2ecc71';
 } else {
 feedback.textContent = 'CPF nao encontrado.';
 feedback.style.color = '#e74c3c';
 }
 } catch (err) {
 clearTimeout(timeoutId);
 feedback.textContent = err.name === 'AbortError'
 ? 'Tempo esgotado. Tente novamente.'
 : 'Erro na consulta. Tente novamente.';
 feedback.style.color = '#e74c3c';
 } finally {
 btnSubmit.disabled = false;
 btnSubmit.textContent = 'Verificar CPF';
 }
});
```

---

## Ajustes específicos por dispositivo

### Mobile — teclado numérico

O atributo `inputMode="numeric"` exibe o teclado numérico nativo, sem letras. Isso é essencial para campos de CPF em dispositivos móveis.

### Mobile — prevenir zoom no focus

Muitos navegadores mobile dão zoom quando o input tem `font-size` menor que 16px. Use no mínimo 16px no mobile para evitar esse comportamento.

```css
@media (max-width: 767px) {
 .input-group input {
 font-size: 16px; /* Previne auto-zoom no iOS */
 }
}
```

### Tablet — layout em grade

Em tablets, aproveite a tela maior para exibir dados em duas colunas, economizando rolagem vertical.

### Desktop — feedback de hover

Em desktop, adicione efeitos de hover nos botões e transições mais refinadas, já que o usuário tem um mouse e não um dedo.

---

## Testando responsividade

Para garantir que o formulário funciona em todos os dispositivos, teste nos seguintes cenários:

### Viewports essenciais

- **320px** — iPhone SE (menor smartphone comum).
- **375px** — iPhone 12/13/14.
- **768px** — iPad em retrato.
- **1024px** — iPad em paisagem / laptop pequeno.
- **1440px** — desktop padrão.

### Checklist de testes

- O teclado numérico aparece em mobile?
- O botão de submit é grande o suficiente para toque?
- O formulário não ultrapassa a largura da tela em nenhum viewport?
- O feedback de validação é legível em telas pequenas?
- A rolagem funciona quando o teclado virtual está aberto?

---

## Teclado virtual e scroll

Em dispositivos móveis, quando o teclado virtual abre, ele pode cobrir o campo de input. Para garantir que o campo seja visível, use `scrollIntoView` no focus.

```javascript
cpfInput.addEventListener('focus', function () {
 // Aguardar o teclado abrir
 setTimeout(() => {
 this.scrollIntoView({ behavior: 'smooth', block: 'center' });
 }, 300);
});
```

---

## Perguntas frequentes

### Como o `inputMode="numeric"` melhora a experiência em mobile?

O atributo `inputMode="numeric"` faz o dispositivo exibir o teclado numérico nativo ao focar no campo de CPF, eliminando a necessidade de o usuário trocar manualmente de teclado. Isso reduz erros de digitação e acelera o preenchimento — especialmente em smartphones com telas menores.

### Por que o formulário não deve ter `font-size` abaixo de 16px no mobile?

Navegadores iOS e Android dão zoom automático em campos de input com `font-size` menor que 16px ao receber foco. Esse comportamento interrompe a experiência de preenchimento e pode deslocar o layout. Definir `font-size: 16px` no mobile evita esse zoom indesejado sem prejudicar a legibilidade.

### Qual é o tamanho mínimo recomendado para botões em formulários mobile?

As diretrizes do Google recomendam 48x48dp e as da Apple, 44x44pt como área de toque mínima para qualquer elemento interativo. Para o botão de submit de um formulário de CPF, use `min-height: 48px` e `width: 100%` no mobile para garantir que usuários com dedos maiores não ativem o botão por engano ou deixem de ativá-lo por área insuficiente.

### Como garantir que os dados do CPF apareçam corretamente após a consulta à API?

Após a chamada à API CPFHub.io, popule os campos com os valores retornados em `json.data.name`, `json.data.birthDate` e `json.data.gender`. A resposta chega em ~900ms — tempo suficiente para exibir um indicador de carregamento (spinner ou skeleton) antes de substituir pelo conteúdo real.

### Leia também

- [Como pedir CPF no checkout sem espantar o cliente](https://cpfhub.io/blog/como-pedir-cpf-no-checkout-sem-espantar-o-cliente)
- [Como usar skeleton screens durante a validação de CPF](https://cpfhub.io/blog/como-usar-skeleton-screens-durante-a-validacao-de-cpf)
- [Mobile-first: como otimizar a validação de CPF em dispositivos móveis](https://cpfhub.io/blog/mobile-first-como-otimizar-a-validacao-de-cpf-em-dispositivos-moveis)
- [Como reduzir o número de campos em formulários usando enriquecimento via CPF](https://cpfhub.io/blog/como-reduzir-o-numero-de-campos-em-formularios-usando-enriquecimento-via-cpf)

---

## Conclusão

Responsividade em formulários de CPF não é um luxo — é uma necessidade. Com a maioria dos acessos vindo de dispositivos móveis, um formulário que não funciona bem em telas pequenas perde conversões. As chaves para um formulário responsivo são: abordagem mobile-first, teclado numérico nativo, touch targets adequados e feedback visual claro em qualquer resolução.

A integração com a API da CPFHub.io retorna nome, data de nascimento e gênero em ~900ms — tempo baixo o suficiente para uma experiência fluida em qualquer dispositivo. Teste seu formulário nos breakpoints críticos (320px, 375px, 768px e 1024px) e garanta que nenhum usuário abandone por dificuldade de preenchimento.

Crie sua conta gratuita em [cpfhub.io](https://www.cpfhub.io/) e faça até 50 consultas por mês sem cartão de crédito. Quando seu volume crescer, o plano Pro parte de R$149/mês — e o excedente custa apenas R$0,15 por consulta adicional.