Met de Contact formulier widget kun je eenvoudig een contactformulier toevoegen aan je pagina. Dit formulier maakt het bezoekers mogelijk rechtstreeks een bericht naar je te sturen. Je kunt het formulier volledig integreren in de stijl van je webshop door gebruik te maken van de thema-instellingen en opmaakopties.


Beschikbare opties en toelichting:

  • Titel (optioneel, gebruikt standaard indien niet ingevoerd):
    Voeg een titel toe die boven het formulier verschijnt. Wanneer je hier niets invult, staat er standaard de tekst "Contact".
  • Titel settings:
    Onder deze optie pas je de stijl en structuur van de titel aan:
    • Semantische tag instellen: Kies of de tekst een gewone paragraaf is (p) of een titel (h1 t/m h6). Dit is belangrijk voor de structuur en vindbaarheid van je pagina.
    • Stijl (class): Bepaal de visuele opmaak van de tekst. Je kunt kiezen uit verschillende stijlen zoals:
      • Body text (van XS tot XL) — voor gewone tekstgrootten
      • Heading (1 t/m 6) — standaard kopteksten
      • Display heading (1 t/m 6) — grotere, opvallendere koppen

  • Alinea (optioneel):

    Hier kun je een korte toelichtende tekst onder de titel plaatsen. Bijvoorbeeld een uitleg of call-to-action. Dit veld is optioneel.
  • Succes melding:
    Vul hier de tekst in die getoond wordt nadat een bezoeker het formulier succesvol heeft verzonden. Bijvoorbeeld: “Bedankt voor je bericht, we nemen zo snel mogelijk contact met je op.”
  • Tekst en content automatisch stylen (aanbevolen voor lange teksten):
    Met deze optie bepaal je of de tekst in en rond het formulier automatisch opgemaakt wordt volgens de standaard stijlen van je webshop. Dit zorgt voor consistente opmaak bij langere teksten. Je kunt dit ook uitschakelen als je zelf volledige controle over de styling wilt houden.
  • Tekst uitlijning:
    Bepaal de uitlijning van zowel de titel, alineatekst als de succes melding: links of gecentreerd.
  • Knop toevoegen:
    Je kunt ervoor kiezen om één of twee knoppen aan de kaart toe te voegen. Als je een knop activeert, krijg je toegang tot de volgende instellingen:
  • Knop type
    Kies een buttonstijl uit de beschikbare button presets (zoals primair, secundair, info, enz.). Deze zijn afgestemd op je website-ontwerp.
  • Button breedte
    • Desktop: Kies uit:
      • Normaal
      • Ruimte opvullen (neemt beschikbare ruimte tussen knoppen in)
      • Gehele breedte innemen (knoppen worden onder elkaar geplaatst)
    • Mobiel: Zelfde opties, geoptimaliseerd voor kleinere schermen.
  • Uitlijning van de button(s)
    • Desktop & mobiel: Kies hoe de knoppen worden gepositioneerd binnen de kaart:
      • Links
      • Midden
      • Rechts
      • Links en rechts (verdeeld over de volledige breedte)
  • Button tekst
    Vul hier de tekst in die op de knop moet staan. Vul je hier niets in, dan wordt hier standaard de tekst "Verstuur" in getoond.
  • Button met icon
    Wil je een icoon naast je knoptekst tonen? Zet deze optie aan en kies vervolgens het gewenste icoon:
    • Arrow right
    • Arrow left
  • Formulier thema:
    Kies het kleurthema voor het formulier. Dit bepaalt onder andere de achtergrondkleur en stijl van de velden en knoppen. De thema’s zijn gebaseerd op de ingestelde kleuren van je webshop ("Website uiterlijk > Algemeen > Stijl"). Beschikbare opties:

    • Standaard

    • Grijs – Licht

    • Grijs – Donker

    • Hoofdkleur – Licht

    • Hoofdkleur – Donker

    • Ondersteunende kleur – Licht

    • Ondersteunende kleur – Donker

    • Accent kleur – Licht

    • Accent kleur – Donker

    • Info kleur – Licht

    • Info kleur – Donker

    • Success kleur – Licht

    • Success kleur – Donker

  • CSS classes:
    Met deze optie kun je specifieke CSS classes aan de afbeelding toevoegen voor maatwerk styling. Dit geeft je de mogelijkheid om aangepaste stijlen toe te passen via "Website uiterlijk > CSS aanpassen" in de backoffice, waardoor je de afbeelding verder kunt aanpassen aan je ontwerpbehoeften.