Kohanda oma küsitluse stiili

Stiil määrab küsitluse fondid, värvid ja paigutuse. Kui soovid muuta midagi, mida stiiliredaktor ei võimalda, lisa CSS. See toimib eelvaates, lingi kaudu avatud küsitluses ja sinu veebilehele manustatud küsitluses.

Kuhu CSS lisada

Ava küsitlus, vali Küsimused → Eelvaade ja seejärel stiilipaneelis Täpsemad valikud. CSS-redaktori avamiseks märgi Ma tean, mida teen. Muudatused ilmuvad kohe eelvaatesse. Stiili muutmisel tekib küsitlusele oma koopia nimega Minu stiil. Muudatuste avaldamiseks salvesta küsitlus.

Kui soovid stiili kasutada ka teistes küsitlustes, vali Salvesta tööruumi stiilina.

Näited

Iga näidet saab kasutada eraldi või koos teistega.

Värvide määramiseks kasuta värvipaleti muutujaid, näiteks var(--primary), var(--foreground) või var(--muted-foreground). Kui muudad paletti, muutuvad ka need värvid nii heledas kui tumedas vaates.

Küsimuse tekst brändi värviga

.question-title {
    color: var(--primary);
}

Suurem küsimuse tekst

.question-title {
    font-size: 1.5rem;
}

Suuremad hindamisskaala nupud

NPS-i ja teiste nuppudega arvuliste hindamisskaalade jaoks:

.question-type-interval-scale button {
    height: 3.5rem;
    font-size: 1.5rem;
}

Paksem edenemisriba

.survey-progress {
    height: 6px;
}

Peida lehtede loendur

Eemaldab nuppude vahelt teksti “Leht 2 / 5”:

.survey-navigation-step {
    display: none;
}

Ümarad navigeerimisnupud

.survey-navigation-next,
.survey-navigation-submit {
    border-radius: 9999px;
}

Kitsam küsimuste ja navigeerimise ala

Määra mõlema ala laius, et navigeerimisnupud jääksid küsimustega ühele joonele:

.survey-content,
.survey-footer-content {
    max-width: 36rem;
}

Vari ekraani alaserva kinnitatud navigeerimisriba kohal

Arvuti ja telefoni paigutust saab seadistada eraldi. See näide lisab varju ainult siis, kui navigeerimisriba on ekraani alaserva kinnitatud:

@media (min-width: 640px) {
    .survey-shell[data-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

@media (max-width: 639px) {
    .survey-shell[data-phone-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

Küsitluse pealkirjad

See reegel värvib kõik küsitluse h1 ja h2 pealkirjad, sealhulgas tekstiplokkides ja lõpetamislehel:

h1,
h2 {
    color: var(--primary);
}

Lehe ülesehitus

Kasuta oma CSS-is allolevaid klassinimesid. Need jäävad ka järgmistes versioonides samaks. Muid lehel olevaid klassinimesid võime muuta ette teatamata.

Küsitluse lehtedel on sama põhistruktuur. Edenemisriba, küsimused ja navigeerimisnupud ilmuvad vaid seal, kus neid vaja on:

• .survey-shell - kogu leht
  • .survey-header - ülemine riba, mille sisu on alas .survey-header-content
    • .survey-progress - edenemisriba taust
      • .survey-progress-bar - selle täidetud osa
  • .survey-main - ülemise ja alumise riba vaheline ala
    • .survey-content - lehe põhisisu veerg
      • .survey-questions - selle lehe küsimused
  • .survey-footer - alumine riba, mille sisu on alas .survey-footer-content
    • .survey-navigation - navigeerimisrida
      • .survey-navigation-back - Tagasi
      • .survey-navigation-step - “Leht 2 / 5”
      • .survey-navigation-next - Edasi
      • .survey-navigation-submit - Saada vastused

Üheleheküljelisel küsitlusel pole edenemisriba ja küsimuste lehel on vaid nupp Saada vastused. Tagasi-nupp ilmub alates teisest lehest.

Küsimused

Iga küsimust ümbritseb .question, mille sees on:

• .question-title - küsimuse tekst
• .question-required - kohustusliku küsimuse märk * pealkirja sees
• .question-description - küsimuse all olev lisatekst
• .question-answer - vastuse sisestamise ala
• .question-error - teade, mis ilmub, kui vastus puudub või on vigane

Kindlat tüüpi küsimuse kujundamiseks kasuta selle tüübi klassi, näiteks .question-type-select-one .question-title:

• .question-type-string - vabatekst
• .question-type-number - arv
• .question-type-date - kuupäev
• .question-type-boolean - jah/ei
• .question-type-select-one - üksikvalik
• .question-type-select-many - mitmikvalik
• .question-type-ranking - järjestamine
• .question-type-interval-scale - arvuline hindamisskaala, näiteks NPS
• .question-type-ordinal-scale - järjestusskaala
• .question-type-matrix - maatriks
• .question-type-open-list - vabalt täidetav loend
• .question-type-payment - makse

Paigutuse seaded

Jaotise Paigutus valikud on .survey-shell elemendi atribuutides. Saad neid oma CSS-is kasutada:

• data-navigation - flow, kui nupud on pärast viimast küsimust, sticky, kui need on kinnitatud ekraani alaserva
• data-align - top või center, sisu asukoht

Alla 640 px laiustel ekraanidel kehtivad telefoni seaded. Nende järgi kujundamiseks kasuta atribuute data-phone-navigation ja data-phone-align, nagu ülaltoodud varju näites.

Mis pole lubatud

Vastajate kaitseks ei saa küsitlust salvestada CSS-iga, mis:

• kasutab @import, image-set() või src() või sisaldab url()-i ilma data: URL-ita
• lisab fonte @font-face abil. Vali font hoopis jaotises Fondid
• valib elemente [value], [checked] või [selected] järgi, mis võiks vastuseid paljastada
• sisaldab vigast CSS-i või märgijada </
• on pikem kui 50 000 tähemärki