Como Estilizar o Ecrã de Confirmação dos Resultados do Inquérito

Visão geral

Gostaria de estilizar o ecrã de resultados da sondagem que é apresentado na página de confirmação? Ao utilizar o suplemento Inquéritos e Sondagens, pode facilmente escolher apresentar estes resultados dentro da sua mensagem de confirmação. Com um pouco de CSS, pode alterar facilmente o estilo destes resultados. Neste tutorial, vamos guiá-lo passo a passo sobre como alterar o estilo dos resultados da sondagem.

Por defeito, o estilo já é adicionado aos resultados da sondagem.

Configuração

Para efeitos desta documentação, assumiremos que já criou o seu formulário seguindo os passos deste tutorial.

Ativar os Resultados da Sondagem

Para começar, abra o construtor de formulários e vá ao separador Definições » Inquéritos e Sondagens.

Uma vez lá, clique na caixa de verificação Ativar Resultados da Sondagem.

Adicionar o código CSS

Para estilizar os resultados da sondagem, terá de copiar e colar este CSS no 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, reveja este tutorial.

Se precisar de alguma assistência na escolha das suas cores de gradiente no CSS acima, visite o site CSS Gradient para o gerador online (gratuito).

E é tudo! Agora utilizou com sucesso o CSS para alterar o estilo dos resultados da sondagem no ecrã de confirmação. Gostaria de aprender a estilizar os marcadores nos seus campos de formulário? Dê uma vista de olhos a este tutorial sobre Como Estilizar Texto de Marcador para Campos de Formulário.