Contactformulieren & leads

Niet elke bezoeker wil een chat starten. Met contactformulieren bouw je klassieke "neem contact op"-formulieren met een sleep-en-neerzet-veldeditor, sluit je ze inline in op je eigen website en verzamel je elke inzending als een lead in een aparte inbox die je team kan afhandelen.

Anders dan de chatwidget is een contactformulier geen zwevende knop - het wordt in de pagina weergegeven, waar jij het wilt, in je eigen stijl. En anders dan een ticket is een lead een lichtgewicht record met een eigen eenvoudige levenscyclus.

Bouw een formulier

Ga naar Beheer → Contactformulieren → Nieuw formulier. Elk nieuw formulier begint met een verstandig standaardsjabloon - Naam, E-mail, Telefoon, Onderwerp en Bericht - dat je kunt herschikken, bewerken, verwijderen of volledig vervangen.

De veldenbouwer ondersteunt:

Geef een veld een rol - Naam contact, E-mail contact of Onderwerp - en dat antwoord wordt naar een kolom in de leads-inbox gepromoveerd, zodat een lead in één oogopslag leesbaar is, ongeacht hoe de rest van het formulier is opgebouwd.

Sluit het inline in

Kopieer het fragment uit de formuliereditor en plaats het waar het formulier moet verschijnen - het wordt in het doelelement weergegeven, in je paginastroom:

<div id="nsupport-contact-form"></div>
<script src="https://<jouw-app-host>/contact-form.js" data-key="pk_cf_…" async></script>

Optionele attributen:

Het script is één bundel zonder afhankelijkheden (~6 kB) die in een shadow DOM wordt weergegeven, zodat de CSS van je site en het formulier elkaar nooit in de weg zitten. Een ingebouwd live voorbeeld in het beheer laat precies zien hoe het formulier op je site eruitziet voordat je het publiceert.

Handel de leads af

Elke inzending komt binnen in Beheer → Contactformulieren → Leads:

• Een filterbare, doorzoekbare en gepagineerde inbox met tellingen per status.
• Elke lead doorloopt Nieuw → In behandeling → Afgerond, plus Gearchiveerd voor spam of irrelevante zaken, en kan aan een collega worden toegewezen.
• Open een lead om elk ingevuld veld en de contactgegevens te zien en actie te ondernemen.

Bevestigingsmail (optioneel)

Zet de bevestigingsmail per formulier aan en zodra iemand een e-mailadres achterlaat, ontvangt die persoon automatisch een "we hebben je bericht ontvangen"-antwoord - met de naam van je werkruimte en een "we nemen contact op"-regel die je kunt aanpassen. Het gebruikt dezelfde e-mailbezorging als de rest van het platform en is per ontvanger aan een limiet gebonden om misbruik te voorkomen.

Gemaakt om veilig te zijn op een openbare pagina

Een contactformulier staat op het open internet, dus het is op dezelfde manier afgeschermd als de andere insluitbare widgets:

• Een origin-allowlist - alleen de domeinen die je opgeeft kunnen het formulier laden en verzenden.
• Een roterende publieke sleutel die je op elk moment opnieuw kunt genereren.
• Een verborgen honeypot-veld en rate limiting om bots buiten te houden.

Twee soorten formulier

Alles hierboven beschrijft een formulier dat wij voor je bouwen en tonen. Er is een tweede soort voor als je de frontend liever zelf bouwt.

Kies via het menu Nieuw formulier welke je aanmaakt. De rest van deze pagina geldt voor allebei — dezelfde inbox, statussen, toewijzing, interne notities, meldingen en bevestigingsmails.

API-formulieren: bouw je eigen frontend

Een API-formulier geeft je een toegangssleutel en een endpoint. Ontwerp het formulier zoals je wilt; post naar ons zodra iemand verzendt.

1. Maak het formulier aan en kopieer de sleutel

Contactformulieren → Nieuw formulier → API-formulier (bouw je eigen). De editor toont een stapsgewijze handleiding met je echte sleutel al in elk codefragment, zodat je kunt kopiëren en plakken in plaats van aanpassen.

De sleutel mag gerust in publieke HTML staan. Hij kan alleen inzendingen aanmaken — nooit lezen.

2. Richt je formulier op het endpoint

Het gedraagt zich als een gewone API: je post de gegevens, er wordt één lead aangemaakt en je krijgt { ok: true, id: "…" } terug. Meer doet het niet — de status en het verwijderen van een lead horen bij de inbox, achter je login, dus een uitgelekte sleutel kan alleen inzendingen toevoegen, nooit wijzigen of verwijderen.

const res = await fetch("https://jouw-workspace.example/api/v1/public/forms/submit", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ access_key: "pk_cf_…", name: "Asha", email: "asha@example.com" }),
});
const { ok, id } = await res.json();

FormData werkt precies hetzelfde en antwoordt ook met JSON — dat is de vorm die je gebruikt als je een bestand meestuurt.

Er is één uitzondering, en dat is de versie die geen JavaScript en geen buildstap nodig heeft:

<form action="https://jouw-workspace.example/api/v1/public/forms/submit" method="POST">
  <input type="hidden" name="access_key" value="pk_cf_…">
  <input type="hidden" name="redirect" value="https://jouwsite.nl/bedankt">

  <label>Naam <input type="text" name="name" required></label>
  <label>E-mail <input type="email" name="email" required></label>
  <label>Bericht <textarea name="message"></textarea></label>

  <button type="submit">Versturen</button>
</form>

Wanneer een browser zo'n formulier verzendt navigeert hij weg — hij leest het antwoord nooit — dus alleen dit geval antwoordt met een doorverwijzing naar je bedankpagina in plaats van met JSON.

3. Benoem je velden zoals je wilt

Stuur welke velden voor jou logisch zijn — allemaal komen ze in de inbox, onder je eigen namen. Vier ervan kunnen ook de eigen kolommen van de inbox vullen: naam, e-mail, telefoon en onderwerp. Heten ze bij jou anders (applicant_name, jouw_email), koppel ze dan onder Veldnamen, dan toont de inbox ze alsnog netjes.

4. Bestanden accepteren (sollicitaties, claims, portfolio's)

Zet Bestandsuploads toestaan aan en elk bestandsdeel in de inzending wordt opgeslagen en aan de lead gekoppeld. Gebruik een gewone file-input:

<form action="…" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="pk_cf_…">
  <input type="text" name="applicant_name">
  <input type="file" name="cv">
  <button type="submit">Solliciteren</button>
</form>

Maximaal 10 MB per bestand, een door jou ingesteld maximum aantal bestanden per inzending, en een lijst met toegestane document- en afbeeldingstypen die je verder kunt beperken. Bijlagen verschijnen bij de lead met een knop Downloaden; ze zijn nooit publiek te linken, dus alleen eigenaren en beheerders kunnen ze openen.

Test het voordat je frontend schrijft

Contactformulieren → Formulier testen stuurt vanuit de browser een echte inzending naar je eigen formulier en laat precies zien wat er terugkwam — status, tijd, antwoord — plus de lead die is aangemaakt. Het is de snelste manier om te bevestigen dat een sleutel werkt en te zien waar je veldnamen terechtkomen.

Inzendingen die je daar doet zijn echte leads, dus verwijder ze achteraf als je wilt opruimen.

Een API-formulier dichtzetten

Standaard accepteert een API-formulier oproepen van overal, nog steeds met rate limit — dat is wat het bruikbaar maakt vanaf een server, een mobiele app of curl, waar helemaal geen browser-origin is. Zodra je weet welke site gaat posten, zet je die onder Toegestane origins en wordt al het andere geweigerd.

Wie kan wat