Gostaria de fazer com que a mensagem de confirmação do seu formulário corresponda à aparência da sua marca? Por padrão, o WPForms exibe os envios bem-sucedidos em uma caixa verde, mas você pode modificar facilmente esse estilo ou removê-lo completamente com um simples código CSS.
Este guia mostrará como personalizar o estilo da mensagem de confirmação para criar uma experiência de formulário mais coesa.
Entendendo o estilo padrão
O WPForms envolve automaticamente as mensagens de envio de formulários bem-sucedidos em uma caixa verde com preenchimento e bordas específicos. Embora isso funcione bem para muitos sites, talvez você queira:
- Remova completamente o estilo para obter uma aparência mais limpa
- Altere as cores para combinar com sua marca
- Modificar elementos específicos, como preenchimento ou bordas
- Aplicar estilo personalizado somente a formulários específicos
Personalização da mensagem de confirmação
Vamos explorar diferentes maneiras de modificar o estilo de 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.
Remoção do estilo de fundo de todos os formulários
Para remover completamente o estilo 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.
Personalização de formulários específicos
Para modificar a mensagem de confirmação de um único formulário, use este CSS (substitua 1000 com o ID de 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, consulte nosso tutorial sobre como encontrar IDs de formulários.
Alteração das 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 que correspondam às cores desejadas.
E agora você ajustou com sucesso o estilo da mensagem de confirmação! Em seguida, você gostaria de saber como personalizar outros elementos do formulário? Confira nosso guia sobre a criação de tags inteligentes personalizadas para adicionar conteúdo dinâmico aos seus formulários.