Estilizando a Caixa de Mensagem de Confirmação

Gostaria de fazer com que a mensagem de confirmação do seu formulário corresponda à aparência da sua marca? Por defeito, o WPForms exibe as submissões bem-sucedidas numa caixa verde, mas pode facilmente modificar este estilo ou removê-lo completamente com algum código CSS simples.

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

Compreender o Estilo Padrão

O WPForms envolve automaticamente as mensagens de submissão de formulário bem-sucedidas numa caixa verde com preenchimento e bordas específicas. Embora isto funcione bem para muitos sites, pode querer:

• Remover completamente o estilo para um aspeto mais limpo
• Alterar as cores para corresponder à sua marca
• Modificar elementos específicos como preenchimento ou bordas
• Aplicar estilo personalizado apenas a formulários específicos

Personalizar a Mensagem de Confirmação

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

Remover o Estilo de Fundo para 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, remove a cor de fundo e a borda da mensagem de confirmação.

Personalização para Formulários Específicos

Para modificar a mensagem de confirmação de um único formulário, utilize 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, consulte o nosso tutorial sobre como encontrar IDs de formulário.

Alterar 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 cor (#333333 e #ffffff) para corresponder às cores desejadas.

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