Hosted Forms — Een Contactformulier Embedden op je Website
Maak zelfstandige insluitbare contactformulieren, embed ze op elke website met één regel code, en ontvang alle inzendingen direct in je Bugalou inbox als gesprekken.
Wat zijn Hosted Forms?
Hosted Forms laten je volledig aanpasbare contactformulieren maken die je direct op elke website kunt insluiten. Wanneer een bezoeker het formulier instuurt, wordt er automatisch een nieuw gesprek aangemaakt in je Bugalou inbox — compleet met een ticketnummer, de contactgegevens van de bezoeker en alle ingevulde velden — zodat je team direct kan reageren.
Aan de Slag
Ga in je Bugalou dashboard naar Kanalen in de linker zijbalk en zoek de kaart "Hosted Forms" in de Kanaalkatalogus. Klik op "Beheren" om de formulierenoverzichtpagina te openen.
Een Nieuw Formulier Aanmaken
- Klik op de formulierenpagina op "Nieuw Formulier" (rechtsboven)
- Geef het formulier een naam — wordt intern gebruikt om het formulier te herkennen
- Klik op "Aanmaken" om de Form Builder te openen
De Form Builder
De Form Builder heeft twee panelen:
- Linker paneel — formulierinstellingen en velden configureren
- Rechter paneel — live preview van hoe het formulier eruitziet op je website
Algemene Instellingen
| Instelling | Omschrijving |
|---|---|
| Formuliernaam | Interne naam in de formulierenlijst |
| Titel | Kop die op het formulier wordt weergegeven (zichtbaar voor bezoekers) |
| Beschrijving | Optionele subtekst onder de titel |
| Verzendknoptekst | Label op de verzendknop (bijv. "Versturen", "Indienen") |
| Succesbericht | Bevestigingstekst na een succesvolle inzending |
| Actief | Schakelaar om het formulier in of uit te schakelen — inactieve formulieren weigeren inzendingen |
Formuliervelden
Elk formulier kan een willekeurig aantal aangepaste velden hebben. Voor elk veld stel je in:
- Label — tekst boven het invoerveld (bijv. "Naam", "E-mailadres", "Bericht")
- Type — text, email, telefoon, textarea, select, checkbox
- Verplicht — of het veld ingevuld moet zijn voor het versturen
- Placeholder — hinttekst in het invoerveld (optioneel)
Klik op "Veld Toevoegen" om nieuwe velden toe te voegen en op het prullenbakicoon om ze te verwijderen. Velden verschijnen direct in de live preview.
Toewijzen aan Team (optioneel)
Je kunt alle gesprekken van dit formulier automatisch toewijzen aan een specifiek team. Selecteer een team in het dropdown "Toewijzen aan Team". Laat leeg om gesprekken niet toegewezen te laten.
Het Formulier Insluiten op je Website
Nadat je formulier is opgeslagen, klik je op "Embedcode Ophalen" (of open de formulierinstellingen) voor de twee-delige insluitcode:
Stap 1 — Voeg de container-div toe waar je het formulier wilt plaatsen
<div data-bgl-form="FORMULIER_ID"></div>Plaats dit element precies waar je het formulier wilt weergeven op je pagina — in een sectie, een contactpagina of een supportportaal.
Stap 2 — Voeg de scripttag één keer per pagina toe (voor </body>)
<script src="https://app.bugalou.com/api/forms/embed/FORMULIER_ID"></script>Het script vindt automatisch de div en rendert het volledige formulier inline — geen iframes, geen extra configuratie.
Volledig Voorbeeld
<!-- Plaats dit waar je het formulier wilt -->
<div data-bgl-form="cuid123abc"></div>
<!-- Voeg dit toe voor </body> -->
<script src="https://app.bugalou.com/api/forms/embed/cuid123abc"></script>Wat Gebeurt er bij een Inzending
Wanneer een bezoeker het formulier verstuurt:
- Er wordt automatisch een Contact aangemaakt (of gevonden op e-mailadres) in Bugalou
- Er wordt een nieuw Gesprek aangemaakt met een uniek ticketnummer
- Een opgemaakte Bericht verschijnt in je inbox met alle formuliervelden in een overzichtelijke tabel
- Als ingesteld, wordt het gesprek toegewezen aan je team
- Als je een "Formulier Ingediend" automatisering hebt, wordt deze automatisch gestart — bijv. om een bevestigingsmail te sturen
Reageren op Formulierinzendingen
Open het gesprek in je inbox en typ je antwoord in het tekstvak. Bugalou stuurt het antwoord automatisch naar het e-mailadres dat de bezoeker heeft ingevoerd. Als er geen specifiek e-mailaccount is gekoppeld, gebruikt Bugalou je eerste actieve verbonden e-mailaccount.
Automatisering: "Formulier Ingediend" Trigger
Hosted Forms ondersteunen de "Formulier Ingediend" automatiseringstrigger. Gebruik het om automatisch een bevestigingsmail te sturen zodra iemand je formulier instuurt. Zie het artikel Alle Triggertypes Uitgelegd voor meer details.
Voorbeeldautomatisering
- Trigger: Formulier Ingediend
- Actie: E-mail Versturen — stel een bevestigingsmail op met variabelen zoals
{{name}},{{email}}en{{formName}}
Gebruik de template "Formulier Bevestiging" in Automatisering Templates om snel van start te gaan.
Formulieren Beheren
Op de formulierenoverzichtpagina kun je:
- Bewerken — klik op de formuliernaam of het bewerk-icoon
- Activeren / Deactiveren — schakelaar op de overzichtkaart
- Verwijderen — klik op het prullenbakicoon (dit is definitief)
- Inzendingen bekijken — zie een log van alle inzendingen per formulier
Tips
- Voeg altijd een E-mail veld toe zodat Bugalou de bezoeker aan een contact kan koppelen en antwoorden mogelijk zijn
- Gebruik het Succesbericht om verwachtingen te stellen — bijv. "We reageren binnen 24 uur"
- Combineer met de instelling Toewijzen aan Team zodat de juiste mensen formulierinzendingen direct zien
- Test je formulier voor publicatie door het in te sturen en je inbox te controleren