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

Visão Geral

Você gostaria de estilizar a tela de resultados da enquete que é exibida na página de confirmação? Ao usar o addon Pesquisas e Enquetes, você pode facilmente optar por exibir esses resultados dentro da sua mensagem de confirmação. Com um pouco de CSS, você pode alterar facilmente a estilização desses resultados. Neste tutorial, vamos guiá-lo passo a passo sobre como alterar o estilo dos resultados da enquete.

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 os passos deste tutorial.

Habilitando os Resultados da Enquete

Para começar, abra o construtor de formulários e vá para a aba 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, consulte 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 do seu 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 seu 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 nos campos do seu formulário? Dê uma olhada neste tutorial sobre Como Estilizar o Texto Placeholder para Campos de Formulário.