CSS Layout Klassen
Elementen op een website worden opgemaakt door middel van CSS-codes. CSS is een standaard opmaaktaal voor o.a. websites. Via de stylen (zie: Formidable → Stylen) worden de verschillende elementen (labels, omschrijving, knoppen, etc) van de formulieren een style (kleur, lettertype, etc.) gegeven.
Voor een algemene uitleg over CSS zie: WordPress Woordenboek – CSS.
CSS kan ook ingezet worden om kolommen te definiëren. Formidable heeft deze “CSS-classes” als standaard instelling beschikbaar via de zgn. “CSS Layout Klassen”.
Om nu, twee velden op één rij te tonen (dus naast elkaar) kiezen we bij de “CSS Layout Klassen” bij beide velden voor de betreffende kolom-instelling:
Velden op één rij
Naast de standaard kolom-indelingen welke we via de CSS-Layout-Klassen kunnen instellen zijn er ook een paar “klassen” voor de opmaak van een totaal-veld bij rekenformulieren en om bijvoorbeeld een paar meerkeuze-velden in een zgn. “grid” te tonen.
We zullen ze hierna één voor één doornemen.
Om een layout-klasse toe te voegen een een veld open je de veldinstellingen van het veld waaraan je de layout-klasse wilt toeevoegen:
CSS-Layout-Klasse Toevoegen
Werkwijze:
- klik op de ‘veld-instellingen’ van het veld;
- klik daarna “IN” het veld CSS-Layout-Klassen;
- de beschikbare layout-klassen verschijnen rechts in het scherm.
Voorbeeld – 2 velden op één rij
Om twee velden op één rij te tonen openen we de veldinstellingen van het veld wat we als “eerste” op die rij willen tonen:
Eerste Veld op een rij
Werkwijze:
- klik op de veldinstellingen van het veld wat als eerste op de rij getoond moet worden;
- klik daarna in “CSS layout klassen”;
- klik dan op “Eerste”;
- en als laatste op “1/2”.
(het maakt niet uit of je op de eerste of tweede button “1/2” klikt om aan te geven dat het om een 50% kolom gaat)
Dezelfde handeling doe je nu voor het veld wat naast het eerste veld getoond moet worden, zonder te kiezen voor “Eerste”; dus alleen “1/2” invullen bij de CSS-layout-klassen:
Achternaam naast Voornaam
Nu staan het veld “Voornaam” en “Achternaam” op één rij.
Om 3 velden op één rij te tonen volg je dezelfde werkwijze door bij het eerste veld de layout-klassen in te stellen op “Eerste” + “1/3”, het tweede veld op “1/3” en het derde veld ook op “1/3”.
De “Grid” of “Rooster” layout-klasse wordt gebruikt om meerkeuze-velden als checkboxes of radio-buttons in een soort van matrix weer te geven:
Layout-klasse – Rooster
In dit voorbeeld zijn 5 radio-buttons gebruikt, met ieder 5 opties en met de CSS-layout-klasse “Rooster” worden ze dan op deze manier weergegeven.
Om dit te bewerkstelligen dienen we bij de eerste radio-button (“Receptie”) de layout-klasse “Eerste rooster rij” te kiezen om aan te geven dat het om de eerste rij gaat. Bij de tweede radio-button (“Kamer”) geven we dan de layout-klasse “Even rooster rij” en bij de derde (“Ontbijt”) de klasse “Oneven rooster rij”; de volgende weer “Even…”, die daarna weer “Oneven…”, etc. tot alle radio-buttons de juist rooster-klasse hebben.
De label-positie en uitlijning laten we verder ongemoeid.
Voegen we dan nog scheidingswaarde toe aan iedere radio-button en een rekenveld onder het formulier waarin we dan de score berekenen.
In deze score-tabel hebben we een eenvoudige berekening van alle punten gedeeld door het aantal vragen. Bij de voorbeelden hebben we deze in zijn geheel uitgewerkt. Zie: “Formulier Voorbeelden → Score Tabel“.
In voorgaande score-tabel hebben we een tekst-veld opgenomen waarin we de score laten zien welke door het formulier berekend wordt aan de hand van de gemaakte keuzes. In het voorbeeld hiervoor zie je dat de score getoond wordt zonder een rand en zonder dat de bezoeker in het veld kan klikken.
Het veld is een tekst-veld en staat op “Alleen lezen”. Door het veld op “Alleen lezen” te zetten is de rand om het veld nog wel zichtbaar en is het ook mogelijk om in dat veld te klikken; je kunt alleen niets wijzigen.
Door nu dat veld de CSS-layout-klasse “Totaal” te geven is ook de rand niet zichtbaar en is het niet meer mogelijk om in het veld te klikken. Met andere woorden, deze layout-klasse zorgt dat het veld alleen zichtbaar is.
Veld-Instellingen:
Layout klasse – Totaal
Zoals je in dit scherm ziet hebben we ook nog het label de positie “Op dezelfde regel” ingesteld, zodat en het label en de uitkomst op één regel getoond worden.
Bij de layout-klassen hebben we nog een drietal kolom-opties: “2 kol opties”, “3 kol opties” en “4 kol opties”. Deze 3 zijn bedoeld voor het meerkeuze-veld (Checkbox) en de radio-button en plaatst de keuzes respectievelijk in 2, 3 of 4 kolommen.
Het volgende is een voorbeeld van een checkbox met 6 optie waarbij de layout-klasse is ingesteld op “3 kol opties”:
Checkbox – “3 kol opties”
Deze layout-klasse is dus puur bedoeld voor de keuze-velden en kan gecombineerd worden met de rijen-kolom-klassen als bijv. “1/2”, etc.
De “Scrollbox” klasse kan gebruikt worden om bij erg veel meerkeuze-opties de keuzes “scrollbaar” te maken om zo het aantal keuzes wat direct zichtbaar is te beperken. Heb je dusdanig veel keuzes voor de bezoeker om uit te kiezen dan is het inzetten van een uitklap-veld een betere optie.
Deze klasse is wel handig als we bijvoorbeeld in een HTML-veld veel tekst opnemen als bijvoorbeeld “Algemene voorwaarden” en kunnen we dat veld dan “scrollbaar” maken:
Voorbeeld – Scrollbaar HTML-veld
De layout-klassen kunnen ook gecombineerd worden. Hier nemen we als voorbeeld een checkbox met 9 keuze-mogelijkheden met daarnaast (dus op één regel) een paragraaf-veld:
Voorbeeld – CSS Layout klassen Combineren
In dit voorbeeld hebben we beide velden op één regel geplaatst met een setting van “1/2”. De meerkeuze hebben we nog een extra layout-klasse gegeven om de opties in 3 kolommen te plaatsen, zodat het geheel er wat netter en overzichtelijker uitziet.
Dat laatste hebben we gedaan door aan de meerkeuze een ‘extra’ layout-klasse “3 kol opties” te geven.
Hoe we dit gedaan hebben kun je bekijken in deze video:
Vragen & Info
Heb je vragen naar aanleiding van dit onderwerp, geef dan een reactie via onderstaand reactie-formulier of stuur ons een mail op: info@qwain.nl.
Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .
Er zijn vele type velden beschikbaar. Het meest gebruikte veld is het tekstveld. Hiermee kan de bezoeker vrije tekst invoeren als bijvoorbeeld voornaam, achternaam, etc.