Een CSS-klassen toevoegen aan het invoerveld of de container van het veld

Deze gids legt uit hoe je aangepaste CSS-klassen kunt toevoegen aan een specifiek formulier veld (zoals een tekstveld of checkbox) of aan de externe container ervan. Dit is handig om aangepaste stijlen toe te passen die in jouw thema zijn gedefinieerd.


1. Klassen toevoegen aan een formulier veld

Deze instructies gelden voor elk veld dat is toegevoegd via de sectie "Velden" van jouw formulier.

1.1 Toegang tot geavanceerde instellingen

Om de velden te zien waar je CSS-klassen kunt invoeren, moet je eerst de geavanceerde instellingen voor het geselecteerde veld inschakelen:

1. Ga naar de sectie "Velden" van jouw formulier en selecteer het veld dat je wilt aanpassen.

2. Scroll naar het einde van de veldinstellingen.

3. Vink het vakje Toon geavanceerde instellingen aan.

  • Opmerking: Zodra aangevinkt, verschijnen er nieuwe tekstvelden, inclusief die voor klassen.

1.2 CSS-klassen invoeren

Nadat je de geavanceerde instellingen hebt ingeschakeld, zie je twee velden voor het invoeren van klassen:

1. Om klassen toe te voegen aan het input-element (bijv. <input>, <select>, <textarea>):

  • Zoek het veld met het label Input Klassen.
  • Voer de gewenste CSS-klassen in, gescheiden door spaties (bijv. mijn-rode-klasse w-100).

2. Om klassen toe te voegen aan de container van het veld (het element dat de input en het label omsluit):

  • Zoek het veld met het label Container Klassen.
  • Voer de gewenste CSS-klassen in, gescheiden door spaties.

2. Klassen toevoegen aan de verzendknop (Submit)

De verzendknop wordt apart beheerd binnen de sectie "Verzendknop" van het tabblad Algemeen.

1. Ga naar het tabblad Algemeen in de formulierconfiguratie.

2. Scroll naar de sectie Verzendknop.

3. Om de knop zelf aan te passen (het <button>-element of <input type="submit">):

  • Zoek het veld met het label Input Klassen.
  • Voer de gewenste CSS-klassen in.

4. Om de container van de knop aan te passen (het <div>-element dat deze omsluit):

  • Zoek het veld met het label Container Klassen.
  • Voer de gewenste CSS-klassen in.

Zorg ervoor dat je na het voltooien van de wijzigingen het formulier opslaat. De nieuwe CSS-klassen worden toegepast wanneer het formulier op de website wordt weergegeven.