SurveyMonkey

Utilizza i CSS per rendere unica la tua indagine

FUNZIONE ENTERPRISE: se ti interessa, contatta un commerciale. Se disponi già di un account Enterprise, contatta il tuo Customer Success Manager.

Puoi creare un tema personalizzato per apportare modifiche di stile generali. Utilizza la barra di formattazione del testo per apportare modifiche di stile specifiche a una domanda dell'indagine.

Gli amministratori principali Enterprise possono aggiungere CSS per creare un tema dell'indagine personalizzato e caratterizzare l'aspetto della tua indagine.

Gli amministratori principali possono aggiungere CSS a un tema dell'indagine personalizzato che corrisponda ai caratteri, ai colori, alle preferenze stilistiche e alle risorse visive della tua identità.

Per aggiungere un nuovo tema personalizzato alla libreria:

  1. Seleziona Il mio team nella navigazione principale, quindi seleziona Libreria.
  2. Seleziona + Nuovo elemento (Aggiungi elemento).
  3. Scegli un Tema CSS.
  4. Seleziona Copia codice e incolla nel tuo strumento di modifica CSS preferito.
  5. Personalizza il codice e visualizza un'anteprima aggiungendolo alla casella sotto Personalizza tema e selezionando Genera anteprima.
  6. Seleziona Salva.

SUGGERIMENTO! Visualizza l'anteprima del tuo tema CSS personalizzato prima di inviare la tua indagine.

  • Utilizzo di Anteprima indagine per visualizzare il tuo tema CSS personalizzato

Dopo aver salvato un tema CSS personalizzato, solo l'amministratore principale può modificare o cambiare gli elementi della pagina.

Per modificare un tema personalizzato:

  1. Seleziona Il mio team nella navigazione principale, quindi seleziona Libreria.
  2. Seleziona ... e clicca su Aggiorna.
  3. Scegli un Tema CSS.
  4. Seleziona Copia codice e incolla nel tuo strumento di modifica CSS preferito.
  5. Personalizza il codice e visualizza un'anteprima aggiungendolo alla casella sotto Personalizza tema e selezionando Genera anteprima.
  6. Seleziona Salva.
Proprietà CSSValore stringa
Famiglia carattereLa tua organizzazione potrebbe avere preferenze riguardo la famiglia di caratteri. Dai un'occhiata ai caratteri CSS sicuri per il web e lasciati ispirare.
Dimensione carattereUn numero, ad es. 32 px.
ColoreUtilizza il selettore di colori per generare i corrispondenti valori RGBA.
Colore sfondoSi tratta di un codice HEX o un valore RGBA.
Immagine che mostra l'aspetto del titolo della pagina

Puoi aggiungere titoli di pagina alle varie pagine della tua indagine per mantenerla ordinata e ben organizzata. 

#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}

SUGGERIMENTO! Utilizza il selettore di colori per generare i corrispondenti valori RGBA o il codice esadecimale.

  • Modifica dello stile del carattere
  • Modifica del peso del carattere
  • Modifica della decorazione del testo
Immagine che mostra l'aspetto del titolo dell'indagine.

Il titolo dell'indagine viene visualizzato nella parte superiore di ogni pagina dell'indagine mentre i rispondenti partecipano, a meno che tu non decida di nasconderlo.

#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
  • Modifica dello stile del carattere
  • Modifica del peso del carattere
  • Modifica della decorazione del testo

Colore dello sfondo dietro le domande della tua indagine. Il colore dello sfondo dell'indagine è visibile solo se non hai aggiunto un'immagine di sfondo.

#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}

SUGGERIMENTO! Utilizza il selettore di colori per generare i corrispondenti valori RGBA.

Immagine che mostra l'aspetto del titolo della domanda

Puoi personalizzare l'aspetto del testo della domanda con vari tipi di domande.

#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
  • Modifica dello stile del carattere
  • Modifica del peso del carattere
  • Modifica della decorazione del testo
Immagine che mostra l'aspetto del corpo della domanda

Puoi personalizzare l'aspetto delle opzioni di risposta ai rispondenti e i tipi di domande che utilizzano un colore di evidenziazione quando vengono selezionate. Ad esempio, una domanda a Scelta multipla.

#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
  • Modifica dello stile del carattere
  • Modifica del peso del carattere
  • Modifica della decorazione del testo
Immagine che mostra l'aspetto di un pulsante

Le persone che partecipano alla tua indagine utilizzano questi pulsanti per spostarsi all'interno di un'indagine. Quando un rispondente clicca sul pulsante Avanti o Fine in ogni pagina dell'indagine, le risposte vengono salvate e inviate.

#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
  • Modifica del peso del carattere
Immagine che mostra l'aspetto di un messaggio di errore

I messaggi di errore vengono mostrati ai rispondenti se lasciano vuota una domanda obbligatoria o se la loro risposta non soddisfa l'intervallo o il limite richiesto.

#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
  • Modifica dello stile del carattere
  • Modifica del peso del carattere
  • Modifica della decorazione del testo
Immagine che mostra l'aspetto di un link di uscita

I link di uscita vengono visualizzati nell'angolo in alto a destra di ogni pagina, consentendo ai rispondenti di abbandonare l'indagine senza salvare le risposte inserite nella pagina corrente.

#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
  • Modifica del peso del carattere

Puoi usare i layout di pagina per scegliere come e dove visualizzare il colore di sfondo o l'immagine.

	#pageLayout {
layout: banner;
opacity: 0.0;
}

SUGGERIMENTO! Imposta l'opacità su 100 per ottenere uno sfondo a colore pieno.