Como Estilizar a Tela de Confirmação dos Resultados da Enquete

Visão geral

Gostaria de estilizar a tela de resultados da enquete que é exibida na página de confirmação? Isso é bem simples com apenas um pouco de CSS.

Por padrão, a estilização já é adicionada aos resultados da enquete.

Configuração

Para fins desta documentação, assumiremos que você já criou seu formulário seguindo as etapas deste tutorial.

Habilitando os Resultados da Enquete

Para começar, abra o construtor de formulários e vá para a guia Configurações » Pesquisas e Enquetes.

Uma vez lá, clique na caixa de seleção Habilitar Resultados da Enquete.

Adicionando o código CSS

Para estilizar os resultados da enquete, você precisará copiar e colar este CSS em seu site. Se precisar de ajuda sobre como adicionar CSS ao seu site, confira este tutorial.

#wpforms-confirmation-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}
 
#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

Lembre-se de atualizar o -194 para corresponder ao ID do formulário específico. Se precisar de ajuda para encontrar o ID do seu formulário, revise este tutorial.

Se precisar de alguma assistência para escolher as cores do gradiente no CSS acima, visite o site CSS Gradient para o gerador online (gratuito).

E é isso! Agora você usou com sucesso o CSS para alterar a estilização dos resultados da enquete na tela de confirmação. Gostaria de aprender a estilizar os placeholders em seus campos de formulário? Dê uma olhada neste tutorial sobre Como Estilizar o Texto de Placeholder para Campos de Formulário.