Ontwerp je contactformulier

Nadat je een contactformulier hebt toegevoegd, kan je het uiterlijk aanpassen. In deze handleiding zie je hoe je de stijl, kleuren en lay-out van de formulieren van je website wijzigt.

Het formulierblok bevat verschillende ontwerpstijlen van formulieren waaruit je kan kiezen:

1. Selecteer Lijstweergave in de linkerbovenhoek van de editor. Het pictogram lijkt op drie horizontale lijnen boven elkaar.
2. Zoek hier het Formulierblok en klik erop:

3. Klik in de blokinstellingen aan de rechterkant op het tabblad Stijlen (afgebeeld als een zwart-wit cirkelpictogram):

4. Kies een stijl:
   • Standaard geeft de veldnamen weer buiten de invoervelden zonder animatie.
   • Geanimeerd geeft de veldnamen in de invoervelden en een korte animatie weer en markeert ook het veld waarop een bezoeker klikt.
   • Omlijnd geeft de veldnamen in de invoervelden, een korte animatie en een continue rand rondom de formulierblokinstellingen weer.
5. Klik op de knop ‘Opslaan‘ bovenaan de pagina.

Placeholdertekst is voorbeeldtekst die in een formulierveld kan verschijnen voordat de bezoeker erop klikt, en verdwijnt vervolgens wanneer ze erop klikken om hun eigen tekst te typen. Het kan nuttig zijn om je bezoekers een voorbeeld te laten zien van het type content dat je van ze verwacht dat ze in het formulier typen.

Placeholdertekst toevoegen aan een contactformulier:

1. Klik op een van de velden in je formulier.
2. Open de sidebar met blokstellingen.
3. Scrol naar beneden naar de instelling ‘ Placeholdertekst‘.
4. Typ je Placeholdertekst in het vak. Het wordt dan weergegeven in het formulierveld.
5. Klik op de knop ‘Opslaan‘ bovenaan de pagina.

Standaard vullen de velden in een formulier de breedte van de container van het formulier. Je kan de breedte van individuele velden aanpassen door de volgende stappen te volgen:

1. Klik op een van de velden in je formulier.
2. Open de sidebar met blokstellingen.
3. Scrol naar de Breedte-instellingen en stel de breedte in op 25%, 50%, 75% of 100%.
   • Als je twee velden naast elkaar wilt weergeven, stel ze dan in op 50%. Als er ruimte is, kunnen er meerdere velden op één regel verschijnen.
4. Klik op de knop ‘Opslaan‘ bovenaan de pagina.

Je kan ervoor kiezen om de weergave van de kleur en tekst voor elk afzonderlijk formulierveld te bewerken, of je kan het zo instellen dat elk formulierveld dezelfde kleur- en tekstinstellingen gebruikt.

Wanneer je op een individueel formulierveld klikt, bevatten de blokinstellingen de knop ‘Synchronisatievelden stijl’. Als dit is ingesteld op de AAN-positie, hebben wijzigingen die je in dit veld aanbrengt invloed op alle velden. Klik op de UIT-positie als je de instellingen alleen voor dat veld wilt wijzigen:

Je kan de volgende wijzigingen in alle velden synchroniseren om een consistente visuele ervaring in je formulier te garanderen:

• Kleur: stelt kleuren in voor:
  • Labeltekst: de tekst die boven het formulierveld verschijnt.
  • Veldtekst: de (optionele) placeholdertekst, evenals de invoertekst in een veld.
  • Veldachtergrond: de achtergrond van het invoergedeelte van een formulierveld.
  • Rand: de rand rond het formulierveld.
• Invoerveldstijlen: stel de tekstgrootte, regelafstand en randstijlen voor het veld in.
• Labelstijlen: stel de tekstgrootte en regelafstand in voor veldlabels.

Om de kleuren van je formulier aan te passen, volg je de volgende stappen:

1. Open lijstweergave en zoek het formulierblok en de afzonderlijke velden:

2. Als het algemene formulierblok is geselecteerd, open je de blokinstellingen in de zijbalk en klik je vervolgens op het tabblad Stijlen (het zwart-witte cirkelpictogram).
3. Met behulp van de kleurinstellingen kan je de kleur van de tekst in het formulier, de achtergrondkleur en de kleur van de links in het formulier regelen:

4. Klik vervolgens op een individueel formulierveld en open opnieuw de blokinstellingen.
5. Hier kan je de volgende kleuren voor elk afzonderlijk formulierveld beheren:
   • Labeltekst: de tekst die boven het formulierveld verschijnt.
   • Veldtekst: de (optionele) placeholdertekst, evenals de invoertekst in een veld.
   • Veldachtergrond: de achtergrond van het invoergedeelte van een formulierveld.
   • Rand: de rand rond het formulierveld.
6. Schakel de knop ‘Synchronisatieveldstijlen’ in om je wijzigingen op alle velden toe te passen, of schakel deze uit om elk veld afzonderlijk te beheren.
7. Klik op de knop ‘Opslaan‘ bovenaan de pagina.