De styling van een formulier wordt bepaald door de pagina waar je het op plaatst. Plaats je het op een webpagina in Spotler? Je webtemplate in Spotler bevat al styling voor de formulieren, zodat deze netjes past bij de style van je template. Als je het formulier extern plaatst (bijvoorbeeld op je website), dan style je het formulier extern.
De layout van een formulier of survey wordt bepaald door de stijlen die worden meegegeven aan de webpagina. Hiervoor wordt een stylesheet (CSS) gebruikt. De CSS moet beschikbaar zijn op alle webpagina’s waarop het formulier geïntegreerd wordt.
In dit artikel worden de veelgebruikte classes uitgelegd, zodat je snel de layout of opmaak van het formulier kan aanpassen aan je wensen of eisen.
Tijdens het opmaken van het formulier moet je rekening houden met de manier waarop het formulier gegenereerd wordt. Een formulier dat bestaat uit tabellen is minder flexibel in zijn layout dan een formulier dat gegenereerd is zonder tabellen. Als je een formulier invoegt op een webpagina van Spotler, dan wordt deze standaard opgebouwd uit tabellen.
Formulier opmaak elementen
Je kunt verschillende elementen van een formulier opmaken:
- Algemene opmaak
- Keuzevragen
- Invoervelden
- Vraaginstellingen
- Foutboodschappen
- Afschriften
- Afbeelding als knop
Algemene opmaak
Er zijn een aantal belangrijke classes voor de algemene opmaak van een formulier:
| Naamgeving | Uitleg |
| .mpFormtable | Algemene formulier layout, zoals bijvoorbeeld de breedte |
| .mpQuestiontable | De tabel om de vraag heen |
| .mpTwoColumnLayout | Als de instelling "Als vraag en antwoord naast elkaar" geselecteerd is |
| .mponeColumnlayout | Als de instelling "Als vraag en antwoord onder elkaar" geselecteerd is |
| .mpHighlight | Styling van focus van een vraag |
| .submitCell | De instellingen voor padding en uitlijning van de verzendknop |
| .submitCell input | De opmaak van de verzendknop in het formulier |
Keuzevragen
Er zijn verschillende type keuzevragen zoals; checkbox en radiobutton vragen, maar ook matrixvragen.
Opmaak van checkbox en radiobuttonvragen
| Naamgeving | Uitleg |
| .mpFormLabel | De vraagtekst |
| .mpMultipleLabel | Het label achter de checkbox of radiobutton |
| .mpFormfield input.mpOtherCustominput [type="text"] |
Anders, namelijk veld |
Opmaak van matrixvragen
| Naamgeving | Uitleg |
| .mpMatrix | De tabel om de matrixvraag heen |
| .mpMatrixLabel | De vraagtekst |
| .mpFormLabel | De stelling |
| .mpFormdescription4 | De opties boven de radiobuttons bij een waarderingsschaal 4 |
| .mpFormdescription5 | De opties boven de radiobuttons bij een waarderingsschaal 5 |
| .mpFormdescription10 | De opties boven de radiobuttons bij een waarderingsschaal 10 |
| .mpFormAnswer | Tekst die je typt in de radiobutton cel |
| .mpradioButtonTable | De tabel om de radiobutton of checkbox antwoorden |
Opmaak van dropdown-vragen
| Naamgeving | Uitleg |
| .mpFormLabel | De vraagtekst |
| .mpFormfield select | De dropdown |
| .mpFormfield option | De optie in de dropdown |
Invoervelden
| Naamgeving | Uitleg |
| .mpFormLabel | De vraagtekst |
| .mpFormField | Opmaak buiten de antwoordmogelijkheden |
| .mpFormfield input[type="text"] | Het getypte antwoord |
Opmaak van tekstinvoer meerdere regels
| Naamgeving | Uitleg |
| .mpFormLabel | De vraagtekst |
| .mpFormField textarea | Opmaak buiten de antwoordmogelijkheden |
| .mpFormfield input[type="text"] | Het getypte antwoord |
Opmaak van datumvraag
| Naamgeving | Uitleg |
| .mpDateField | Styling van het datum invoerveld |
| .mpDatefield.mpDD | Specifieke styling van het Dag-veld |
| .mpDatefield.mpMM | Specifieke styling van het Maand-veld |
| .mpDatefield.mpYYYY | Specifieke styling van het Jaar-veld |
Vraaginstellingen
Een vraag kan specifieke instellingen hebben. De vraag kan verplicht zijn, een sublabel en/of helptekst hebben. Ook deze elementen kunnen gestyled worden.
Opmaak van verplichte vragen
Als een vraag verplicht is, dan wordt er een asterisk (*) achter de vraag geplaatst. Deze asterisk kun je opmaken met behulp van de volgende class:
| Naamgeving | Uitleg |
| .mandatorySign | Styling van de asterisk (*) |
Opmaak van helptekst
Als je bij een vraag extra uitleg tekst wilt hebben kun je de helptekstfunctie activeren. Er verschijnt dan een icoon achter de vraag. Wanneer je met je muis over dit icoon beweegt verschijnt er een helptekst. Het icoon en de plaatsing kun je opmaken met:
| Naamgeving | Uitleg |
| .formHelpText | Styling van het helptekst icoon |
Opmaak van sublabel
Een sublabel is een uitlegtekst dat onder het invoerveld komt, bijvoorbeeld bij een e-mailadres of datum.
| Naamgeving | Uitleg |
| .sublabel | Styling van het sublabel |
Foutboodschappen
Als een respondent een vraag foutief invult of vergeet in te vullen als deze verplicht is, dan wordt er een zogenaamde "fouttekst" getoond.
| Naamgeving | Uitleg |
| .mpErrorSummary | Fouttekst bovenaan het formulier |
| .mpErrorSummary ul | De opsomming van vragen waar iets niet valideert |
| .error | Omliggende tabel om vraag die fout oplevert |
| .mpErrorRow | De fouttekst onder de vraag |
Afschriften
Als een formulier of survey wordt ingevuld, dan komt de respondent op een bedankpagina terecht. Gebruikelijk is om op deze pagina de respondent te bedanken voor het invullen van het formulier. Maar het is bij uitstek de plaats om een afschrift te tonen van de gegevens die de respondent heeft ingevuld. Daarin wordt onderscheid gemaakt tussen tekstuele afschriften en grafische afschriften (een overzicht wat andere respondenten hebben ingevuld).
| Naamgeving | Uitleg |
| .formResultlabel | Het afschrift van de vraag |
| .formResultvalue | De ingevulde waarde (het antwoord op de vraag) |
Bij meerkeuzevragen waarbij één antwoord gekozen kan worden, kan indien er een afschrift voor alle respondenten is geplaatst, grafisch getoond worden hoe het antwoord van de respondent zich verhoudt ten opzichte van de antwoorden van de andere respondenten.
| Naamgeving | Uitleg |
| td.pollQuestion | De opmaak van de vraag |
| td.pollitem | Het item-nummer |
| td.pollAnswerHighLight | De gekozen optie |
| td.pollAnswer | Keuze-optie |
| td.pollVisual | De gekleurde balk |
| td.pollCellLeft | Percentage van het gekozen antwoord ten opzichte van het totaal |
| td.pollCellRight | De lege ruimte rechts van het percentage van de gekozen antwoorden |
| td.pollCell0Pct | De kleur van de balk als dit antwoord niet gekozen is |
| td.pollCell100Pct | De kleur van de balk als het antwoord 100% gekozen is |
| tr.PollAnswerHighLight | De kleur van de balk als de respondent dit antwoord heeft gekozen |
| td.pollPercentage | De opmaak van het percentage tekstueel weergegeven |
| .mpFormResultChildLabel | De matrixvraag stelling |
Afbeelding als een knop
Op elk formulier zit een verzendknop en bij formulieren over meerdere pagina's is er een vorige en volgende knop aanwezig. Deze knoppen zijn volledig op te maken door middel van CSS.
| Naamgeving | Uitleg |
| .submitButton | De verzendknop |
| .nextPageButton | De volgende pagina knop |
| .previousPageButton | De vorige pagina knop |
Het is mogelijk om een afbeelding te gebruiken voor deze knoppen. Deze opties staan ook al in de CSS-code, maar tussen de commentaar tags zodat deze niet actief is.
/* Verzend/volgende/vorige-knop als afbeelding
.submitButton{
background-image:url(‘’);
width:100px;
height:35px;
}
.nextPageButton{
background-image:url(‘’);
width:100px;
height:35px;
}
.previousPageButton{
background-image:url(‘’);
width:100px;
height:25px;
}
*/
Ook bij deze code kan de opmaak vrij specifiek aangegeven worden. Allereerst moet je ervoor zorgen dat de afbeelding van de verzendknop online staat. Deze URL voeg je in bij background-image:url(‘). Vervolgens kun je nog aangeven hoe breed en hoe hoog de afbeelding is en of er een achtergrondkleur of rand meegegeven moet worden.
Vergeet niet om de commentaar tags weg te halen en in het formulier op de knoppen geen tekst te zetten. Anders komt de tekst over de achtergrondafbeelding heen.