O spinner padrão do Contact Form 7 é imediatamente reconhecível à primeira vista. Uma seta cinzenta, rotação infinita, e é logo óbvio: o site funciona com as definições de origem. O design tem dez anos, e o preloader tem vinte.

Mas não tem de se conformar com isto. O mecanismo de substituição do spinner está integrado na própria framework CSS do plugin, sem editar ficheiros fonte, sem risco de perder alterações durante atualizações automáticas. Três snippets, cinco minutos, e o formulário fica exatamente como previsto no mockup.

💡 Resumo rápido:

• Ocultar a animação padrão via display: none no .wpcf7-spinner::before
• Adicionar o seu próprio GIF como fundo ou desenhar um spinner com CSS puro
• Centrar o preloader via flexbox, sem !important nem hacks
• Obter uma animação pronta a usar no loading.io, Icons8 ou CSS Loaders
• Para versões inferiores a cinco, o hook obsoleto wpcf7_ajax_loader no functions.php

Como funciona agora o preloader do CF7

O Contact Form 7 está atualmente na versão 6.1.6, e a mecânica do spinner não mudou desde a versão cinco. Acabou-se o <img src="ajax-loader.gif">. O navegador desenha a própria seta via ::before dentro de <span class="wpcf7-spinner">. Sem ficheiros externos, renderização instantânea.

O seletor antigo div.wpcf7 .ajax-loader está morto. Todas as instruções da era do CF7 4.6 pertencem ao arquivo. Agora tudo é mais simples: substituir o fundo em .wpcf7-spinner, ocultar o pseudo-elemento, feito.

Isto também eliminou a necessidade do hook wpcf7_ajax_loader. Acabou-se o functions.php para substituir a seta, CSS puro, três linhas.

Alterar o spinner via CSS: passo a passo

Suponhamos que tem custom-spinner.gif na pasta images do seu tema filho. Dois passos, e a seta padrão desaparece.

Primeiro, desative a animação incorporada. O seletor visa precisamente o pseudo-elemento, nada mais é afetado:

1
/* Hide default CF7 spinner */
2
.wpcf7-spinner::before {
3
    display: none;
4
}

Agora anexe o seu próprio GIF como fundo ao próprio <span>:

1
/* Insert custom preloader */
2
.wpcf7-spinner {
3
    background-image: url('images/custom-spinner.gif');
4
    width: 24px;
5
    height: 24px;
6
    margin-left: 10px;
7
    background-size: contain;
8
    background-repeat: no-repeat;
9
    background-position: center;
10
}

Ambos os blocos vão para o style.css do seu tema filho. Caminho: «Aparência → Editor de ficheiros do tema» ou «Aparência → Personalizar → CSS adicional». Não mexa nos ficheiros do plugin em si; as suas alterações perder-se-ão na primeira atualização.

Ajuste a largura e a altura para corresponder ao tamanho do seu GIF. Spinner transparente num formulário escuro? Remova background-color; não é necessário aí.

Animação CSS sem ficheiros: anel puro

O GIF requer um pedido HTTP e pixeliza em ecrãs retina. A abordagem moderna é desenhar o spinner usando o navegador. border mais @keyframes proporcionam nitidez perfeita em qualquer resolução. Sem ficheiros, carregamento instantâneo, controlo total sobre a cor.

Eis um anel duplo com uma cor de destaque da marca:

1
/* Hide default arrow */
2
.wpcf7-spinner::before {
3
    display: none;
4
}
5
 
6
/* Draw outer ring */
7
.wpcf7-spinner {
8
    width: 24px;
9
    height: 24px;
10
    border-radius: 50%;
11
    display: inline-block;
12
    border-top: 2px solid #262b2e;
13
    border-right: 2px solid transparent;
14
    box-sizing: border-box;
15
    animation: cf7-spin 1s linear infinite;
16
    background-color: inherit;
17
}
18
 
19
/* Inner ring — accent color */
20
.wpcf7-spinner::after {
21
    content: '';
22
    box-sizing: border-box;
23
    position: absolute;
24
    left: 0;
25
    top: 0;
26
    width: 24px;
27
    height: 24px;
28
    border-radius: 50%;
29
    border-bottom: 2px solid #FF3D00;
30
    border-left: 2px solid transparent;
31
}
32
 
33
@keyframes cf7-spin {
34
    0%   { transform: rotate(0deg); }
35
    100% { transform: rotate(360deg); }
36
}

Use as suas próprias cores. Substitua #262b2e e #FF3D00 pelo seu par de marca. A espessura da linha é 2px, rotação completa num segundo. Quer mais rápido? Reduza 1s para 0.6s. Mais lento? 1.5s.

Centrar o preloader

Por defeito, o spinner encosta à borda esquerda do botão de envio. Em largura móvel isto passa despercebido, mas em desktop parece desleixado. Resolve-se com flexbox em duas regras:

1
/* Flex container for the form */
2
.wpcf7 form {
3
    display: flex;
4
    flex-wrap: wrap;
5
    justify-content: center;
6
}
7
 
8
/* Centering the spinner */
9
.wpcf7-spinner {
10
    margin: 10px auto 0 auto;
11
}

A primeira regra transforma o formulário num contentor flex com alinhamento central. A segunda dá ao spinner margem superior e margens automáticas para o empurrar para o meio da linha. Nada de float: inherit !important, nada de margin-bottom negativo; tudo fica limpo e não se parte ao mudar de tema.

Se o formulário for complexo e flex-wrap: wrap quebrar a disposição dos campos, envolva o spinner numa <div> separada com text-align: center. Mas em nove de cada dez vezes a abordagem flexbox é suficiente.

Onde obter animações prontas a usar

O ajaxload.info, que era recomendado em todos os guias antigos, fechou. Três alternativas ativas:

• loading.io, um construtor de spinners. Escolhe a forma, cor e tamanho. Exporta para GIF, SVG, CSS e APNG. As opções gratuitas são mais do que suficientes para um formulário de contacto.
• Icons8 Preloaders, uma coleção com mais de mil ícones: anéis, barras, pontos, variantes 3D. O gerador produz GIF, SVG e APNG. Alguns são gratuitos com atribuição, outros são premium.
• CSS Loaders, spinners em CSS puro, sem um único ficheiro externo. Escolha o que preferir, copie o HTML+CSS e adapte-o para .wpcf7-spinner. Ideal para quem, por princípio, não quer carregar nem mais um kilobyte.

Obtenha um spinner com fundo transparente; ele adapta-se a um formulário de qualquer cor. O tamanho ideal é 24×24 ou 32×32 píxeis. Os mais pequenos tremelicam, os maiores desviam a atenção do botão de envio.

E nas versões anteriores à 5.x: método obsoleto

Se o seu site ainda está no CF7 4.x, atualize o plugin. A sério. A versão atual 6.1.6 já fechou inúmeras vulnerabilidades, e o antigo hook wpcf7_ajax_loader pode deixar de funcionar a qualquer momento. O programador não garante retrocompatibilidade.

Mas se a atualização for impossível (código personalizado fortemente dependente dos hooks antigos), aqui fica o método via functions.php:

1
// Replacing CF7 preloader for versions ≤4.x — deprecated
2
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
3
function my_wpcf7_ajax_loader() {
4
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
5
}

O código vai para o functions.php do seu tema filho. O ficheiro ajax-loader.gif é enviado previamente para images/ dentro do tema filho. Para tema filho: stylesheet_directory. Para tema pai: template_directory.

E, ainda assim, atualize à primeira oportunidade.

Exemplo ao vivo em vídeo

O vídeo abaixo mostra um passo a passo completo: qual é o aspeto do problema do spinner a girar infinitamente, porque é que as instruções antigas não funcionam e como resolvê-lo em dois minutos via CSS:

⁉️🤔 Perguntas frequentes

Porque é que o CSS não está a ser aplicado e o spinner não muda?

Quase de certeza que está a usar o seletor antigo div.wpcf7 .ajax-loader. Desde a versão cinco, não serve para nada. Tem de usar .wpcf7-spinner::before (para esconder o padrão) e .wpcf7-spinner (para anexar o seu). Verifique a versão do plugin: «Plugins → Plugins instalados → Contact Form 7». Abra as DevTools (F12), procure em Elements <span class="wpcf7-spinner"> dentro do formulário. Se tiver um pseudo-elemento ::before com uma borda, está na versão atual; use os seletores da secção de CSS. Se vir um <img> com a classe ajax-loader, o plugin está irremediavelmente desatualizado.

Posso fazer o spinner com gradiente ou multicolorido?

Sim, sem um único píxel de imagem. O spinner CSS básico da secção de animação aceita quaisquer cores via border-top e border-bottom. Para um gradiente, substitua a cor sólida por conic-gradient numa máscara. Exemplo de um anel com transição vermelho-amarelo-verde:

1
.wpcf7-spinner {
2
    background: conic-gradient(#FF3D00, #FFC107, #00C853, #FF3D00);
3
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
4
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
5
    animation: cf7-spin 1s linear infinite;
6
}

Funciona nos navegadores modernos. A espessura do anel é definida em mask via calc().

Como removo completamente o spinner?

Uma linha: .wpcf7-spinner { display: none !important; }. Mas pense duas vezes. O spinner é o único sinal para o utilizador de que o formulário foi submetido e o servidor está a processar o pedido. Sem ele, a pessoa voltará a clicar em «Enviar» e terá um envio duplicado. É melhor não o remover, mas substituí-lo por um anel minimalista numa cor neutra.

Um spinner personalizado afeta a velocidade de carregamento?

Depende do método. Um GIF de 2 a 5 KB acrescenta um pedido HTTP, o que praticamente não tem impacto na velocidade da página. Um spinner em CSS não acrescenta qualquer pedido nem um byte além de 300 a 400 bytes de código (a opção mais rápida). SVG em base64 dentro do CSS também não requer um pedido, mas pesa 1 a 2 KB. Para um formulário de contacto, a diferença entre os três métodos é invisível a olho nu. A animação CSS ganha no global: sem ficheiros, sem pixelização, não enche a biblioteca de media.

Onde devo guardar o ficheiro do spinner para não o perder durante as atualizações do tema?

Apenas no tema filho. Coloque o custom-spinner.gif no tema pai e, quando este atualizar, o ficheiro desaparecerá. Estrutura correta:

1
/wp-content/themes/
2
  your-theme/
3
  your-theme-child/
4
    style.css          ← CSS goes here
5
    images/
6
      custom-spinner.gif  ← file goes here

Em CSS, escreva o caminho sem barra inicial: url('images/custom-spinner.gif'). Este é um caminho relativo a partir do ficheiro de estilos do tema filho. Caminhos absolutos como /wp-content/themes/... quebram ao migrar o site para um domínio diferente.

Qual o método de substituição a escolher para o seu caso

Três cenários, por ordem crescente de complexidade e opções de personalização.

Para nove em cada dez sites, o primeiro cenário é suficiente. Obtenha um spinner pronto do loading.io, coloque-o no tema filho, escreva três linhas de CSS e a seta padrão nunca mais denunciará o seu site.