SurveyMonkey

CSS gebruiken om uw enquête van stijl te voorzien


Enterprise-functie: neem contact op met de afdeling Sales als u geïnteresseerd bent. Hebt u al een Enterprise-account, neem dan contact op met uw Customer Success Manager.

U kunt een aangepast thema maken om algemene stijlwijzigingen aan te brengen. Gebruik de tekstopmaakwerkbalk om stijlwijzigingen aan te brengen die uniek zijn voor een specifieke enquêtevraag.

Primaire Enterprise-beheerders kunnen CSS toevoegen om een aangepast enquêtethema te maken dat past bij het uiterlijk van uw enquête.

Primaire beheerders kunnen CSS toevoegen voor een aangepast enquêtethema dat overeenkomt met uw visuele middelen, lettertypen, kleuren en stijlvoorkeuren.

Een nieuw aangepast thema toevoegen aan de bibliotheek:

  1. Selecteer Mijn team in het hoofdnavigatiemenu en selecteer Bibliotheek.
  2. Selecteer + Nieuw item (item toevoegen).
  3. Kies een CSS-thema.
  4. Selecteer Code kopiëren en plak de code in het CSS-bewerkingsprogramma van uw voorkeur.
  5. Pas de code aan en bekijk een voorbeeld: voeg de code toe aan het vak onder Thema aanpassen en selecteer Voorbeeld genereren.
  6. Selecteer Opslaan.

Tip: Bekijk een voorbeeld van uw aangepaste CSS-thema voordat u uw enquête verzendt.

  • Enquêtevoorbeeld gebruiken om uw aangepaste CSS-thema te bekijken

Als een aangepast CSS-thema eenmaal is opgeslagen, kan alleen de primaire beheerder de pagina-elementen bewerken of wijzigen.

Een aangepast thema bewerken:

  1. Selecteer Mijn team in het hoofdnavigatiemenu en selecteer Bibliotheek.
  2. Selecteer ... en klik op Bijwerken.
  3. Kies een CSS-thema.
  4. Selecteer Code kopiëren en plak de code in het CSS-bewerkingsprogramma van uw voorkeur.
  5. Pas de code aan en bekijk een voorbeeld: voeg de code toe aan het vak onder Thema aanpassen en selecteer Voorbeeld genereren.
  6. Selecteer Opslaan.
CSS-eigenschapTekenreekswaarde
LettertypeUw organisatie heeft mogelijk een geprefereerde lettertypefamilie. U kunt ook CSS-webveilige lettertypen bekijken voor meer ideeën.
TekengrootteEen getal, bijv. 32px
KleurGebruik een kleurenkiezer om de RGBA-waarde van uw kleur te genereren.
AchtergrondkleurIs een HEX-code of een RGBA-waarde.
Afbeelding die laat zien hoe de paginatitel eruitziet

U kunt paginatitels toevoegen aan de verschillende pagina's in uw enquête, zodat deze er overzichtelijk en geordend uitzien. 

#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;
}

Tip: Gebruik een kleurenkiezer om de RGBA-waarde of hexcode voor uw kleur te genereren.

  • De tekenstijl wijzigen
  • Het lettertypegewicht wijzigen
  • De text-decoration wijzigen
Afbeelding van de enquêtetitel.

De enquêtetitel wordt boven aan elke enquêtepagina weergegeven terwijl uw respondenten de enquête invullen, tenzij u de titel verbergt.

#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
  • De tekenstijl wijzigen
  • Het lettertypegewicht wijzigen
  • De text-decoration wijzigen

De achtergrondkleur wordt weergegeven achter de vragen in uw enquête. De achtergrondkleur van de enquête wordt alleen weergegeven als u geen achtergrondafbeelding hebt toegevoegd.

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

Tip: Gebruik een kleurenkiezer om de RGBA-waarde van uw kleur te genereren.

Afbeelding die laat zien hoe de vraagtitel eruitziet

U kunt de weergave van de vraagtekst in verschillende vraagtypen aanpassen.

#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
  • De tekenstijl wijzigen
  • Het lettertypegewicht wijzigen
  • De text-decoration wijzigen
Afbeelding die laat zien hoe de vraagtekst eruitziet

U kunt aanpassen hoe de antwoordkeuzes worden weergegeven bij respondenten, evenals vraagtypen die een markeringskleur gebruiken wanneer ze worden geselecteerd. Bijvoorbeeld een meerkeuzevraag.

#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);
}
  • De tekenstijl wijzigen
  • Het lettertypegewicht wijzigen
  • De text-decoration wijzigen
Afbeelding die laat zien hoe een knop eruitziet

Mensen die uw enquête invullen, kunnen deze knoppen gebruiken om door een enquête te navigeren. Als een respondent op elke pagina van de enquête op de knop Volgende of Gereed klikt, worden reacties opgeslagen en verzonden.

#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
  • Het lettertypegewicht wijzigen
Afbeelding van een foutmelding

Er worden foutberichten weergegeven bij respondenten die een vereiste vraag leeg laten of als hun antwoord niet binnen het vereiste bereik of de vereiste limiet valt.

#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
  • De tekenstijl wijzigen
  • Het lettertypegewicht wijzigen
  • De text-decoration wijzigen
Afbeelding van een afsluitlink

Afsluitlinks worden in de rechterbovenhoek van elke pagina weergegeven, zodat respondenten de enquête kunnen verlaten zonder dat de reacties worden opgeslagen die zij op de huidige pagina hebben ingevoerd.

#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
  • Het lettertypegewicht wijzigen

U kunt de paginalay-out gebruiken om te kiezen hoe en waar uw achtergrondkleur of -afbeelding wordt weergegeven.

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

Tip: Stel de dekking in op 100 voor een effen achtergrondkleur.