Come Stilizzare la Schermata di Conferma dei Risultati del Sondaggio

Panoramica

Desideri personalizzare la schermata dei risultati del sondaggio che viene visualizzata nella pagina di conferma? Quando utilizzi il componente aggiuntivo Sondaggi e Questionari puoi scegliere facilmente di visualizzare questi risultati all'interno del tuo messaggio di conferma. Con un po' di CSS puoi cambiare facilmente lo stile di questi risultati. In questo tutorial, ti guideremo passo dopo passo su come cambiare lo stile per i risultati del sondaggio.

Per impostazione predefinita, lo stile è già aggiunto ai risultati del sondaggio.

Configurazione

Ai fini di questa documentazione, presupporremo che tu abbia già creato il tuo modulo seguendo i passaggi di questo tutorial.

Abilitazione dei risultati del sondaggio

Per iniziare, apri il modulo e vai alla scheda Impostazioni » Sondaggi e Questionari.

Una volta lì, fai clic sulla casella di controllo Abilita risultati sondaggio.

Aggiunta del codice CSS

Per personalizzare i risultati del sondaggio, dovrai copiare e incollare questo CSS sul tuo sito. Se hai bisogno di aiuto su come aggiungere CSS al tuo sito, dai un'occhiata a questo 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;
}

Ricorda di aggiornare il -194 per corrispondere all'ID del modulo del tuo modulo specifico. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta questo tutorial.

Se hai bisogno di assistenza nella scelta dei colori del gradiente nel CSS sopra, visita il sito CSS Gradient per il generatore online (gratuito).

E questo è tutto! Hai ora utilizzato con successo il CSS per modificare lo stile dei risultati del sondaggio nella schermata di conferma. Desideri imparare come personalizzare i segnaposto nei campi del tuo modulo? Dai un'occhiata a questo tutorial su Come personalizzare il testo segnaposto per i campi del modulo.