Web3forms: het beste formulierensysteem voor sites die je met Claude Code en Lovable bouwt

TL;DR: AI-builders zoals Lovable en Claude Code zijn briljant in het maken van mooie sites, maar lopen vast op werkende formulieren. Web3forms lost dat in vijf minuten op: één HTML-form, één access key, geen backend, en je inbox doet de rest. In deze gids zie je waarom het wint van Formspree en Getform voor AI-builds, plus een werkende integratie in stappen voor zowel Lovable als Claude Code.

Introductie

Het is een patroon dat elke vibe coder herkent. Lovable bouwt in tien minuten een complete landing page, of Claude Code spit binnen een uur een hele site uit. Alles ziet er strak uit, de copy klopt, de animaties draaien. En dan klik je op je eigen contactformulier en er gebeurt niets. Of erger: een wit scherm met een API-error.

Plotseling zit je twee uur lang te wroeten met Mailgun, Supabase Edge Functions, SMTP-configuratie of een Next.js API-route die maar niet wil deployen. De vibe is weg. Wat één regel HTML had moeten zijn, is een hele middag fixen geworden.

In deze gids zie je hoe je dat oplost met Web3forms. Aan het einde heb je een werkend contactformulier in je Lovable-app of Claude-built site, met spam-bescherming, mailnotificatie en zonder backend. Daarna kom ik terug op de eerlijke beperkingen, want geen tool is perfect.

Waarom worstelen AI-builders met formulieren?

LLM-builders genereren razendsnel een mooie frontend, maar geen werkende backend voor formulierdata. Lovable en Claude Code produceren strakke HTML, CSS en frontend-logica, terwijl een formulier minimaal een server, een mail-API of een database nodig heeft om iets nuttigs te doen met je submission.

Dat gat krijg je in Lovable bijvoorbeeld als volgt te zien: de officiële weg vraagt om Supabase Edge Functions plus een Resend API-key voor email. Voor een vibe coder die net met no-code begint, zijn dat drie tools en een handvol environment variables om te beheren. Op een statische site die je met Claude Code bouwt is er helemaal geen server. Je formulier post naar niets.

De simpelste oplossing is een hosted form-backend: een externe dienst die de submission ontvangt, valideert en doorstuurt naar je mailbox of webhook. Daar komt Web3forms binnen.

De drie meest gemaakte fouten

Solo founders verspillen tijd met: zelf een SMTP-relay opzetten, een complete Supabase + Resend-pipeline aanleggen voor één contactformulier, of een Next.js API-route deployen op een server alleen om mail te sturen. Voor 90% van de cases is dat overkill. Een hosted form-service kost vijf minuten en werkt jaren.

Wat is Web3forms en hoe werkt het?

Web3forms is een gratis form-backend die submissions van je HTML-formulieren naar je inbox stuurt, zonder dat je een server, account of database hoeft op te zetten. Je vraagt een access key aan via een e-mailadres, plakt die in een hidden input in je form, en submissions komen direct in je mail binnen.

Het werkt op elke site die HTML kan serveren, dus ook op alles wat Lovable, Claude Code, v0, Bolt of Cursor genereert. Onder de motorkap submit je form als een gewone HTTP POST naar de Web3forms-API. Die valideert spam, stuurt mail door en optioneel triggert het webhooks naar tools als Zapier, Make of n8n.

De drie stappen die het zo simpel maken

Eén: ga naar web3forms.com en typ je e-mailadres in. Twee: ontvang je access key (een UUID-achtige string) per mail. Drie: plak die als hidden input in elke form op je site. Dat is alles. Geen account aanmaken, geen creditcard, geen instellingen-pagina die je eerst moet doorklikken.

Waarom is Web3forms de beste keuze voor LLM-builds?

Web3forms wint van alternatieven voor AI-gegenereerde sites om drie redenen: geen account nodig om te starten, geen backend code in je project, en perfecte fit met de plain HTML die LLMs uitspugen. Een vibe coder hoeft alleen één snippet aan zijn Lovable- of Claude Code-prompt toe te voegen.

De features-pagina bevestigt dat Web3forms direct ondersteuning biedt voor hCaptcha-spam-bescherming, domeinrestrictie (alleen submissions vanaf jouw domein doorlaten), een custom redirect-URL na submission, file-uploads en webhooks. Al deze features werken op het gratis plan, wat het uniek maakt onder de form-backends.

Wat dit concreet betekent voor je workflow

Je geeft Claude Code de prompt “voeg een contactformulier toe dat post naar Web3forms met access key XYZ”, en het werkt direct. Je hoeft geen Edge Function te schrijven, geen API-key voor Resend of SendGrid te beheren en geen separate deploy-pipeline op te tuigen. De gegenereerde HTML is meteen productie-klaar.

Web3forms vs. de alternatieven

Web3forms is niet de enige hosted form-backend, maar voor AI-builds is hij wel de meest wrijvingsvrije. Hieronder een eerlijke vergelijking met de bekendste concurrenten op basis van onafhankelijke benchmarks en feature-vergelijkingen.

Dienst	Free tier	Account nodig	Webhook free	Dashboard free	Beste use case
Web3forms	250/maand	Nee	Ja	Nee	LLM-builds, snel starten
Formspree	50/maand	Ja	Nee	Ja	Battle-tested, grote community
Getform	50/maand	Ja	Nee	Ja	UI builders, integraties
Basin	100/maand	Ja	Nee	Ja	Minimalistische setup
Netlify Forms	100/maand	Ja (Netlify)	Nee	Ja	Alleen voor Netlify-deploys

Wat valt op in deze vergelijking?

Web3forms is de enige dienst zonder account-vereiste om te starten, en de enige met webhooks op het gratis plan. Voor een Lovable-app waarin je submissions naar n8n of Zapier wilt doorzetten, scheelt dat direct een upgrade. Het ontbreken van een dashboard is de trade-off: submissions komen alleen in je mail en optioneel je webhook. Voor wie regelmatige zoek- en filter-acties wil, is Formspree of Getform comfortabeler.

Hoeveel kost Web3forms?

Het gratis plan dekt 250 form-submissions per maand met access key-functionaliteit, hCaptcha, domain restrictions, redirects en webhooks. Het Pro plan begint bij $12 per maand voor extra submissions, langere data-retentie en autoresponder-emails. Voor de meeste solo founders en MKB-sites is gratis genoeg.

Volgens Web3forms zelf worden submissions op het gratis plan 30 dagen bewaard, en op het Pro plan een jaar. Pro voegt verder white-labeling, custom from-addresses en prioriteits-support toe. Pas wanneer je over de 250 submissions per maand gaat of langere retentie nodig hebt, wordt upgraden interessant.

Wanneer is upgraden de moeite waard?

Drie scenario’s. Eén: je site krijgt structureel meer dan 250 submissions per maand. Twee: je hebt langere retentie nodig voor compliance of klantcommunicatie. Drie: je wilt autoresponder-mails terugsturen naar inzenders. In alle andere gevallen blijft het gratis plan voldoen.

Web3forms toevoegen aan je Lovable-app

In Lovable wil je dat formulier-submissions zonder Supabase of Edge Functions werken. Met Web3forms hoef je alleen één HTML-form en een fetch-call toe te voegen. Forminit-onderzoek bevestigt dat externe form-backends de simpelste route zijn binnen Lovable-projecten.

Geef Lovable de volgende prompt (vervang de access key door je eigen):

Voeg een contactformulier toe met velden naam, e-mail en bericht.
Submit naar https://api.web3forms.com/submit via fetch POST.
Voeg een hidden input toe met name="access_key" en value="JOUW-ACCESS-KEY".
Voeg een hidden input toe met name="botcheck" (honeypot) zonder waarde.
Toon een succesmelding na submission en reset het formulier.

Lovable genereert de juiste markup en JavaScript fetch-call. Test door je formulier in te dienen: binnen seconden moet de mail in je inbox staan. Best practices uit de Lovable-community raden aan om ook altijd de honeypot toe te voegen voor extra spam-bescherming.

Honeypot voor gratis spam-bescherming

Een honeypot is een verborgen veld dat alleen bots invullen. Web3forms herkent het botcheck-veld automatisch en filtert submissions waarbij dat veld is ingevuld weg. Geen captcha-irritatie voor je echte bezoekers, geen spam in je inbox. Win-win.

Web3forms toevoegen aan een Claude Code project

Voor static sites gegenereerd door Claude Code is de integratie nog simpeler, omdat je vaak puur HTML hebt. Geef Claude Code een prompt zoals deze:

Voeg een contactformulier toe aan contact.html.
- Velden: naam (text), email (email), bericht (textarea)
- POST naar https://api.web3forms.com/submit
- Hidden input access_key met value "JOUW-ACCESS-KEY"
- Hidden input redirect met value "https://leonkatz.nl/bedankt"
- Hidden input botcheck zonder waarde voor spam-protectie
- Tailwind styling, mobile-first

Claude Code genereert direct werkende HTML. Push naar je host (Vercel, Netlify, Cloudflare Pages) en je formulier is live. Geen build-step, geen environment variable, geen serverless function.

Een werkend HTML-voorbeeld

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="JOUW-ACCESS-KEY">
  <input type="hidden" name="redirect" value="https://leonkatz.nl/bedankt">
  <input type="text" name="botcheck" style="display:none">

  <label>Naam</label>
  <input type="text" name="name" required>

  <label>E-mail</label>
  <input type="email" name="email" required>

  <label>Bericht</label>
  <textarea name="message" required></textarea>

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

Voor SPA-frameworks (React, Vue, Svelte) gebruik je fetch in plaats van klassieke form-POST. Web3forms accepteert zowel form-encoded data als JSON-payloads naar dezelfde endpoint.

Fetch-variant voor React, Vue of Svelte

async function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  const response = await fetch("https://api.web3forms.com/submit", {
    method: "POST",
    body: formData
  });
  const result = await response.json();
  if (result.success) {
    // toon succesmelding
  }
}

Wat zijn de beperkingen van Web3forms?

Web3forms is eerlijk gezegd niet perfect: er is geen dashboard voor submission-historie, onafhankelijke uptime-tests rapporteerden enkele uitvallen en het gratis plan stopt bij 250 submissions per maand. Voor een productiesite met serieus verkeer of compliance-vereisten zijn dit reële afwegingen.

Geen dashboard betekent dat je submissions alleen via mail of webhook ziet. Als je inbox een notificatie eet, mis je die lead. Een eenvoudige workaround is alle submissions ook naar een Notion-database of Google Sheet sturen via een Zapier- of n8n-webhook, wat je gratis kunt opzetten.

Wanneer is een alternatief slimmer?

Drie situaties waarin Formspree of Getform een betere keuze is. Eén: je hebt een team dat regelmatig submissions moet doorzoeken (dashboard nodig). Twee: je site verwerkt klantcontact onder strikte SLA (battle-tested platform met langer track record). Drie: je hebt complexe form-flows met conditional logic en multi-step forms.

Drie productiviteitstips voor je Web3forms-setup

Eenmaal aangesloten kun je Web3forms slimmer inzetten dan alleen voor één contactformulier. Drie tips die de meeste vibe coders missen, maar die je veel tijd besparen.

Tip 1: gebruik verschillende access keys per formulier

Maak voor elk formulier een eigen access key aan in je Web3forms-account. Eén voor je contactformulier, één voor je nieuwsbriefopt-in, één voor je waitlist-aanmelding. In je inbox kun je dan filteren op de mailheader of het onderwerp en automatisch labels toekennen. Bij groei kun je per formulier upgraden of monitoren zonder dat de access keys door elkaar lopen.

Tip 2: stuur submissions tegelijk naar je inbox én een database

Web3forms ondersteunt een webhook-veld dat parallel aan de mail verstuurt. Plak daar de URL van een Zapier-, Make- of n8n-webhook die je submission opslaat in Notion, Google Sheets of Airtable. Zo heb je altijd een doorzoekbare backup en omzeil je het ontbrekende dashboard. Bij verlies van een mailnotificatie staat de lead nog steeds geregistreerd.

Tip 3: zet een custom subject in het submission-onderwerp

Voeg een hidden input toe met name="subject" en bijvoorbeeld value="Nieuwe lead via Lovable-landing". Je krijgt dan submissions met een herkenbare titel in je inbox, ideaal voor het scheiden van leads, klantvragen en spam. Voor LLM-gegenereerde sites met meerdere landingsvarianten is dit een eenvoudige manier om bronnen te tracken zonder analytics-tool.

Conclusie

Voor sites die je met Claude Code, Lovable, Cursor, Bolt of v0 bouwt, is Web3forms de minst wrijvingsvolle keuze voor werkende contactformulieren. Geen account, geen backend, geen API-keys om te beheren. Eén access key, één hidden input, en je formulier werkt.

Begin gratis, upgrade pas als je site dat echt vraagt. Voor 90% van de solo founders en MKB-sites blijft het gratis plan voldoende. En als je site groter wordt, weet je dat er sterkere alternatieven zijn (Formspree, Getform) wanneer je een dashboard of complexe flows nodig hebt.

Wil je hulp om je AI-gebouwde site echt productie-klaar te maken, met werkende formulieren, SEO-fundamenten en analytics? Plan een adviesgesprek. We kijken samen naar je build, lossen de meest blokkerende technische knelpunten op en geven je een prioriteitenlijst voor de eerste honderd bezoekers.

Veelgestelde vragen

Heb ik een eigen domein nodig om Web3forms te gebruiken?

Nee, Web3forms werkt op elk domein, ook op localhost en preview-URLs van Lovable, Vercel of Netlify. Wel kun je in je Web3forms-instellingen een lijst toegestane domeinen invoeren om misbruik tegen te gaan. Dat is een aanrader zodra je live gaat.

Werkt Web3forms met React, Vue en Next.js apps?

Ja, op twee manieren. Je kunt klassieke HTML-form submission gebruiken (de browser stuurt direct, met optionele redirect), of een JavaScript fetch-call naar dezelfde API-endpoint posten. Lovable, Claude Code en v0 ondersteunen beide patronen out-of-the-box.

Hoe voorkom ik spam in mijn Web3forms-inbox?

Combineer drie maatregelen. Eén: voeg het botcheck honeypot-veld toe (hidden input dat alleen bots invullen). Twee: schakel hCaptcha aan in je Web3forms-account voor publieke pagina’s. Drie: configureer domain restriction zodat alleen submissions vanaf jouw domein worden geaccepteerd.

Kan ik file uploads ontvangen via Web3forms?

Ja, Web3forms ondersteunt file uploads op zowel het gratis als het Pro plan. Voeg een input type="file" toe aan je form en gebruik enctype="multipart/form-data" op het form-element. De bestanden komen als attachment in je e-mail binnen.

Wat gebeurt er als ik over de 250 submissions per maand ga?

Op het gratis plan worden extra submissions die maand niet meer doorgestuurd. Je krijgt een waarschuwing in je e-mail en kunt upgraden naar het Pro plan ($12/maand) voor hogere limieten. De counter reset elke maand. Voor seizoens-piek-sites is dit iets om in de gaten te houden.