HTML exportado de construtor de Bootstrap: o que revisar antes de publicar

A página da marcenaria ficou pronta numa tarde: arrasta o cabeçalho, arrasta o formulário de orçamento, exporta, sobe pelo FTP. Uma semana depois, o dono pergunta por que ninguém pede orçamento. O formulário recarrega a página ao clicar em "Calcular frete", o campo de telefone só tem placeholder, o Google mostra "Lorem ipsum dolor sit amet" como descrição e o menu do celular não abre.

A resposta curta: o export do construtor é um rascunho, não a página. Antes de publicar, revise cinco coisas no HTML: um único h1 e títulos em ordem, label ligado a cada campo, type em todo botão, nenhum texto de enchimento e uma única versão do Bootstrap carregada. São quinze minutos de revisão que separam uma página bonita de uma página que funciona.

Por que o export sai assim

Construtores visuais trabalham com blocos. Cada bloco precisa funcionar isolado, então ele traz a própria estrutura, às vezes os próprios links de CSS e JavaScript, e usa classes para parecer título em vez de usar o elemento de título. Um "título" grande vira div class="h1", porque o construtor não sabe se aquele bloco vai ser o primeiro da página ou o quinto.

O resultado é visualmente correto e semanticamente vazio. O navegador desenha o mesmo, mas o leitor de tela não encontra título, o Google não sabe do que a página trata e o formulário perde comportamentos que o HTML daria de graça. A ferramenta cumpriu o que promete, que é o arraste. A semântica é trabalho seu.

Um caso específico que confunde: um botão dentro de um form sem atributo type é, por padrão, submit. O "Calcular frete" envia o formulário e recarrega a página com os campos vazios.

Como revisar o export, passo a passo

O exemplo: o site da Marcenaria Pinho, uma página única com apresentação, galeria e formulário de orçamento, exportada de um construtor de Bootstrap 5.

1. Procure texto de enchimento e textos padrão do construtor em todos os arquivos.
2. Conte as versões do Bootstrap carregadas e deixe só uma.
3. Corrija a hierarquia: um h1 que diz o que a página oferece, h2 para as seções, sem pular níveis.
4. Ligue cada campo a um label com for e id, e use o type certo no input.
5. Dê type a todo botão: submit só no que envia.
6. Preencha o head: lang="pt-BR", título, descrição, viewport.
7. Valide no Nu HTML Checker e rode o Lighthouse.

Achar enchimento e versões duplicadas

grep -rniE "lorem|ipsum|your text|seu texto aqui|example\.com" site/
grep -rnoE "bootstrap(\.bundle)?(\.min)?\.(css|js)|bootstrap@[0-9.]+" site/*.html

Se o segundo comando mostra duas versões, por exemplo um bloco puxando Bootstrap 4 e o resto em 5, há conflito. As classes mudaram entre versões e os atributos dos componentes também: o Bootstrap 4 usa data-toggle, o 5 usa data-bs-toggle; o 4 usa sr-only, o 5 usa visually-hidden. O menu do celular que não abre costuma ser exatamente isso: o botão com atributo de uma versão e o JavaScript da outra.

O formulário como veio e como fica

Como veio do construtor:

<div class="container">
  <div class="h1">Lorem ipsum dolor sit</div>
  <form>
    <input class="form-control mb-2" placeholder="Nome">
    <input class="form-control mb-2" placeholder="Telefone">
    <input class="form-control mb-2" placeholder="CEP">
    <button class="btn btn-outline-secondary">Calcular frete</button>
    <div class="btn btn-primary">Enviar</div>
  </form>
</div>

Revisado:

<main class="container py-5">
  <h1>Móveis planejados sob medida em Curitiba</h1>

  <section aria-labelledby="titulo-orcamento">
    <h2 id="titulo-orcamento">Peça um orçamento</h2>
    <form action="/orcamento" method="post">
      <div class="mb-3">
        <label for="nome" class="form-label">Nome</label>
        <input type="text" id="nome" name="nome" class="form-control" autocomplete="name" required>
      </div>
      <div class="mb-3">
        <label for="telefone" class="form-label">Telefone com DDD</label>
        <input type="tel" id="telefone" name="telefone" class="form-control" autocomplete="tel" required>
      </div>
      <div class="mb-3">
        <label for="cep" class="form-label">CEP</label>
        <input type="text" id="cep" name="cep" class="form-control" inputmode="numeric" autocomplete="postal-code">
        <button type="button" id="calcular-frete" class="btn btn-outline-secondary mt-2">Calcular frete</button>
      </div>
      <button type="submit" class="btn btn-primary">Pedir orçamento</button>
    </form>
  </section>
</main>

O que mudou: o h1 diz o que a marcenaria faz e onde, que é o que alguém busca. Cada campo tem label visível, porque placeholder some quando a pessoa começa a digitar e não é lido de forma confiável como nome do campo. O type="tel" abre o teclado numérico no celular e o autocomplete deixa o navegador preencher. "Calcular frete" virou type="button" e não envia mais o formulário. O "Enviar" falso, um div com cara de botão, virou um button type="submit" com texto que diz o que acontece. O envio em si precisa chegar a algum lugar; o lado do servidor está em formulário de contato que chega.

O head que o construtor esquece

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Móveis planejados em Curitiba | Marcenaria Pinho</title>
  <meta name="description" content="Cozinhas, closets e home offices sob medida. Projeto e orçamento sem compromisso.">
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/site.css">
</head>

O lang faz o leitor de tela pronunciar em português. O título e a descrição são o que aparece na busca, e o detalhe do que o Google usa está em meta tags que o Google realmente lê. O CSS próprio vem depois do Bootstrap, para sobrescrever sem precisar de !important em toda regra.

Validar

Envie a página ao Nu HTML Checker, o validador do W3C em validator.w3.org/nu, e corrija erros de estrutura: id repetido (comum quando o mesmo bloco foi arrastado duas vezes), elemento fechado no lugar errado, atributo inválido. Depois rode o Lighthouse do Chrome e olhe a seção de acessibilidade. Nenhum dos dois substitui preencher o formulário só com o teclado.

Erros comuns

• Publicar o export sem procurar "lorem". O texto de enchimento vai para o ar e, às vezes, para o resultado da busca.
• Título feito com div class="h1". A página fica sem título para leitores de tela e para buscadores, mesmo parecendo ter um.
• Campo só com placeholder. A pessoa esquece o que estava preenchendo e o leitor de tela pode não anunciar o nome do campo.
• Botão sem type dentro de formulário. Ele envia o formulário e recarrega a página, apagando o que a pessoa digitou.
• Duas versões do Bootstrap na mesma página. Estilos brigam, componentes não abrem e o arquivo pesa o dobro.
• Bloco duplicado com o mesmo id. O label aponta para o campo errado e o JavaScript pega o primeiro elemento.

Checklist

• A busca por "lorem" e por textos padrão do construtor não encontra nada.
• Só uma versão do Bootstrap é carregada.
• A página tem um único h1 e os títulos seguem em ordem.
• Todo campo tem label com for apontando para o id certo.
• Todo botão tem type, e só o de envio é submit.
• O html tem lang="pt-BR" e o head tem título e descrição reais.
• O Nu HTML Checker não aponta erros.

Abra o código-fonte da última página que você publicou a partir de um construtor: o campo de telefone tem um label associado, ou só placeholder?