Estilizando a Caixa de Mensagem de Confirmação

Gostaria de fazer com que a mensagem de confirmação do seu formulário combine com a aparência da sua marca? Por padrão, o WPForms exibe envios bem-sucedidos em uma caixa verde, mas você pode facilmente modificar essa estilização ou removê-la completamente com um simples código CSS.

Este guia mostrará como personalizar a estilização da sua mensagem de confirmação para criar uma experiência de formulário mais coesa.

Entendendo a Estilização Padrão

O WPForms envolve automaticamente as mensagens de envio bem-sucedido de formulários em uma caixa verde com preenchimento e bordas específicas. Embora isso funcione bem para muitos sites, você pode querer:

• Remover completamente a estilização para um visual mais limpo
• Alterar as cores para combinar com sua marca
• Modificar elementos específicos, como preenchimento ou bordas
• Aplicar estilização personalizada apenas a formulários específicos

Personalizando a Mensagem de Confirmação

Vamos explorar diferentes maneiras de modificar a estilização da sua mensagem de confirmação. Se precisar de ajuda para adicionar CSS personalizado ao seu site, consulte nosso guia sobre como adicionar código personalizado ao WordPress.

Removendo a Estilização de Fundo para Todos os Formulários

Para remover completamente a estilização verde padrão de todas as mensagens de confirmação de formulário, adicione este CSS:

.wpforms-confirmation-container-full {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Com o CSS mostrado acima, ele remove a cor de fundo e a borda da mensagem de confirmação.

Personalizando para Formulários Específicos

Para modificar a mensagem de confirmação de um único formulário, use este CSS (substitua 1000 pelo ID do seu formulário):

div#wpforms-confirmation-1000 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Se precisar de ajuda para encontrar o ID do seu formulário, confira nosso tutorial sobre como encontrar IDs de formulário.

Alterando as Cores de Fundo

Para alterar a cor de fundo da mensagem de confirmação para todos os formulários:

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

Este exemplo cria um fundo escuro com texto branco. Ajuste os códigos de cores (#333333 e #ffffff) para corresponder às cores desejadas.

E agora você ajustou com sucesso a estilização da mensagem de confirmação! Em seguida, gostaria de aprender como personalizar outros elementos do formulário? Confira nosso guia sobre criação de smart tags personalizadas para adicionar conteúdo dinâmico aos seus formulários.