Aanmeldformulieren

Formulieren stylen met CSS

Wynko levert alleen een structureel stijlblad — net genoeg CSS om de foutmeldingen en de hulptekst-tooltip te laten werken. Al het andere (kleur, typografie, witruimte, layout) laat de plugin over aan je thema. Er is niets te overschrijven of ongedaan te maken; je stylet op een schone lei.

Voeg je eigen klasse toe aan elk veld

Open de instellingen van een veld in de veld-editor (het tandwielicoon) en je vindt een vak CSS-klasse. Wat je daar typt wordt toegevoegd aan de wrapper van dat veld, naast Wynko’s eigen klassen — zodat je één specifiek veld, een groep velden, of het hele formulier kunt restylen zonder een stijlblad buiten je thema aan te raken.

De rij met de aanmeldknop heeft hetzelfde vak, voor zijn eigen klasse.

Dit betekent dat je nooit !important of ID-selectors nodig hebt om een veld te bereiken: geef het een klasse in de editor en schrijf een gewone regel ervoor in het stijlblad van je thema of het paneel Extra CSS van de Customizer.

Structurele klassen om op te richten

Dit zijn de klassen die Wynko rendert. Ze zijn stabiel — veilig om CSS tegen te schrijven — maar dragen geen visuele opmaak van zichzelf, buiten wat de mechaniek van foutmeldingen en hulptekst-tooltip vereist.

Klasse	Waar het zit
.wynko-form	De buitenste wrapper van het formulier
.wynko-form-{id}	Dezelfde wrapper, gekoppeld aan het ID van één formulier — gebruik dit om één formulier anders te stylen dan andere op dezelfde site
.wynko-form__form	Het <form>-element zelf
.wynko-form__field	De wrapper van elk veld (een <p> of <fieldset>)
.wynko-form__field--email	De wrapper van het e-mailveld, naast .wynko-form__field
.wynko-form__field--terms	De wrapper van het akkoordvakje, als je er een hebt ingeschakeld
.wynko-form__field--error	Toegevoegd aan de wrapper van een veld wanneer validatie mislukt
.wynko-form__label	Het <label> van elk veld
.wynko-form__error	Het validatiebericht dat onder een veld wordt getoond
.wynko-form__help-wrap / .wynko-form__help-toggle / .wynko-form__help	De ?-hulptekstknop en het bijbehorende pop-upvenster
.wynko-form__range-value	De live waarde naast een range-/schuifveld
.wynko-form__actions	De wrapper rond de aanmeldknop
.wynko-form__submit	De aanmeldknop zelf
.wynko-form__notice	Een succes-/fout-/duplicaatbericht, met .wynko-form__notice--success, --error of --duplicate toegevoegd afhankelijk van welke

Stijl .wynko-form__hp niet — dat is het honeypot-veld tegen spam, en het is bewust buiten beeld verborgen. Het zichtbaar maken ervan ondermijnt de bescherming die het biedt.

CSS custom properties

Een handvol waarden waar het structurele stijlblad zelf van afhangt zijn beschikbaar als custom properties op .wynko-form, zodat je ze kunt bijkleuren zonder hele regels te overschrijven:

.wynko-form {
	--wynko-bubble-bg: #1d2327;      /* achtergrond hulptekst-tooltip */
	--wynko-bubble-fg: #fff;         /* tekstkleur hulptekst-tooltip */
	--wynko-bubble-radius: 3px;      /* hoekradius hulptekst-tooltip */
	--wynko-error-accent: #d63638;   /* kleur validatiefout */
}

Zet deze op .wynko-form (of op .wynko-form-{id} voor één formulier) in het stijlblad van je thema of de Customizer.

Waar schrijf je de CSS

Elk van de gebruikelijke plekken werkt, omdat Wynko’s markup gewone HTML in je pagina is — geen iframe:

• Het stijlblad van je thema, als je een child-thema onderhoudt
• Weergave → Aanpassen → Extra CSS
• Een site-brede custom-CSS-plugin, als dat je werkwijze is

Er is niets Wynko-specifieks aan waar de CSS staat — het is bereikbaar door alles wat de rest van je pagina kan bereiken.