Gravity Forms is één van de meest populaire formulieren plugins voor WordPress. De plugin biedt een groot scala aan handige functies. En dankzij de vele hooks en filters is de plugin eenvoudig uit te breiden. Zo hebben wij Gravity Forms uitgebreid met iDEAL ondersteuning. Qua layout is er ook veel mogelijk. Gravity Forms heeft standaard een aantal layout classes die je kunt gebruiken. Mocht je zelf aanpassingen willen doen, kan je eenvoudig zelf classes toevoegen. In deze blog deel ik graag een CSS snippet voor het toevoegen van een CSS toggle checkbox.
Toggle checkboxes lijken een trent te zijn. Je ziet ze overal terug. Het is de ideale oplossing om op een visuele en gebruiksvriendelijke manier bezoekers een keuze te laten maken. Met CSS is een standaard checkbox eenvoudig om te bouwen tot een toggle checkbox.
Dankzij de before, after en checked CSS pseudo selectors is dit een peulenschil. Onderstaande snippet werkt voor checkbox velden met de .pt-toggle class.
8 reacties
Beste Karel-Jan,
Dit lijkt me inderdaad een welkome aanvulling. Nu heb ik deze code gekopieerd naar de customs.css van het thema en vervolgens aangegeven in het checkbox veld gebruik te maken van de de css code pt-toggle. Ik krijg het echter niet voor elkaar om het zichtbaar te krijgen. Wat doe ik verkeerd? Enig idee?
Dit is een .scss bestand (Sass). Sass is een preprocessor waarmee je CSS kunt genereren. Je kunt deze code daardoor niet direct plakken in een CSS bestand. Er zijn 2 dingen die je kunt doen:
– Gebruik maken van een een preprocessor om de CSS te genereren
– De variabelen vervangen door de juiste waardes
Of je gooit haar even door een online SCSS-compiler heen. Bijvoorbeeld: https://www.sassmeister.com/
Dan krijg je eerst 2 errors, 1 op regel 50 en 1 op regel 53, want font-awesome is niet geinclude. Maar toch:
https://pastebin.com/iF69v5B5
+1
Heb de toggle nu wel zichtbaar en werkend, echter staat de tekst/waarde welke normaal achter een checkbox zichtbaar is niet meer in het formulier (ook niet in witte kleur oid).
Enig idee wat dit veroorzaakt of de oplossing hiervoor is?
Bedankt alvast :-)
Heb je ook een linkje waar ik het kan bekijken? Dan kan ik even kijken wat er mis gaat.
Hoi Karel-Jan,
Zie https://www.gratisfidgetspinner.nl/
Ah, je bedoeld het label van de radio button zelf. Die wordt inderdaad “vervangen” door de toggle button.
Je kan hiervoor het beste het overkoepelende label (Algemene voorwaarden) of een sublabel gebruiken.