Toggle checkbox voor Gravity Forms

Karel-Jan 29 maart 2017

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

  1. 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

  2. Youri Klijn

    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 :-)

Reacties zijn gesloten.

Altijd op de hoogte blijven?