Een contactformulier aan je website toevoegen (dat je echt bereikt)

Om een contactformulier te maken dat werkt, bouw je een kort formulier (naam, e-mail, bericht) dat naar een serverroute wordt gestuurd die de invoer valideert, het bericht opslaat in een database, en je vervolgens via een e-mailprovider een melding stuurt met een geheime API-sleutel. Voeg een verborgen honeypotveld en rate limiting toe om de meeste spam te stoppen, toon een duidelijk succesbericht, en test het van begin tot eind op de gepubliceerde site. Eerst opslaan en dan pas e-mailen is het belangrijkste: als e-mail ooit mislukt, heb je de aanvraag nog.

Je opties

Als je site al een backend en een database heeft — wat apps die met AI-appbouwers zijn gemaakt vaak wel hebben — is de laatste optie het betrouwbaarst en houd je aanvragen op één plek waar je ze kunt zien.

Wat een goed contactformulier bevat

• Zo weinig mogelijk velden. Naam, e-mail, bericht. Voeg een onderwerpkeuzelijst toe (“Verkoop”, “Support”, “Overig”) alleen als je erop gaat routeren.
• Duidelijke labels boven elk veld, niet alleen placeholdertekst die verdwijnt.
• Behulpzame validatie: “Vul een geldig e-mailadres in”, getoond naast het veld.
• Een succesmelding die zegt wat er daarna gebeurt: “Bedankt — we reageren binnen één werkdag.”
• Een privacymelding die uitlegt hoe je de gegevens gebruikt, met een link naar je privacybeleid.
• Een alternatief zoals je e-mailadres of telefoonnummer voor mensen die dat liever gebruiken.

Voorbeeldprompts

Het basisformulier:

Voeg een contactformulier toe op de contactpagina met naam, e-mail en bericht (alles verplicht, bericht tot 2.000 tekens). Verstuur het naar een serverroute die de invoer valideert, het opslaat in een tabel contact_messages met het tijdstip van ontvangst, en een succesmelding toont: “Bedankt, we reageren binnen één werkdag.” Toon veldfouten inline. Zorg dat het goed werkt op telefoons.

E-mailmeldingen:

Wanneer een contactbericht is opgeslagen, stuur mij een meldingsmail op hallo@example.com via Resend, met de sleutel in RESEND_API_KEY. Zet reply-to op het e-mailadres van de afzender zodat ik direct kan antwoorden. Als verzenden mislukt, bewaar je het opgeslagen bericht en log je de fout zonder de sleutel te tonen.

Spambescherming:

Voeg spambescherming toe aan het contactformulier: een verborgen honeypotveld dat leeg moet blijven, een limiet van 5 inzendingen per IP-adres per uur op de server, en weiger berichten met meer dan 3 links. Negeer honeypot-inzendingen stilzwijgend maar toon wel succes.

Een postvak:

Voeg een met wachtwoord beveiligde beheerpagina toe met contactberichten, nieuwste eerst, met een vinkje “afgehandeld” en een filter voor niet-afgehandelde berichten.

Stap voor stap

1. Bepaal waar berichten naartoe gaan: wie de meldingen ontvangt, en wie antwoordt.
2. Bouw het formulier met de velden hierboven, toegankelijke labels en mobielvriendelijke invoervelden (gebruik het e-mailinvoertype zodat telefoons het juiste toetsenbord tonen).
3. Maak de serverroute. Die controleert verplichte velden, e-mailformaat en lengtelimieten. Vertrouw nooit op validatie die alleen in de browser draait.
4. Sla op in de database eerst. Zie hoe je een database aan je app toevoegt.
5. Stel een e-mailprovider in. Maak een account aan, verifieer je verzenddomein en sla de API-sleutel op als geheim. Hoe je e-mails vanuit je app verstuurt behandelt de domeininstellingen (SPF, DKIM) in detail.
6. Verstuur de melding vanaf de server nadat je hebt opgeslagen. Gebruik je geverifieerde domein als afzender en het e-mailadres van de bezoeker als reply-to — verstuur niet “van” het e-mailadres van de bezoeker, want dat wordt waarschijnlijk geweigerd als spoofing.
7. Stuur eventueel een automatisch antwoord naar de bezoeker, maar houd het kort; automatische antwoorden naar spamadressen kunnen je afzenderreputatie schaden.
8. Voeg spambescherming toe: honeypot, rate limiting, en daarna een CAPTCHA-achtige controle als dat nodig is.
9. Test op de gepubliceerde site: verstuur een bericht, controleer de database, controleer je inbox en spammap, en klik op antwoorden.

Spam stoppen

Contactformulieren trekken binnen enkele dagen na de lancering bots aan. Laag de verdediging op van het minst naar het meest ingrijpende:

1. Honeypotveld. Een veld dat voor mensen verborgen is; bots vullen het in. Het kost echte bezoekers niets.
2. Rate limiting op de server. Begrenst hoeveel berichten één adres in een periode kan sturen.
3. Inhoudsregels. Weiger berichten vol links, of met een leeg of absurd lang berichtveld.
4. Een CAPTCHA-achtige controle, zoals Cloudflare Turnstile of Google reCAPTCHA. Het token moet op je server worden gecontroleerd; een controle die alleen in de browser draait, kan worden overgeslagen.

Veelgemaakte fouten

• “Verzonden!” tonen terwijl er niets is verzonden. De interface meldt succes voordat of ongeacht het antwoord van de server. Wacht altijd op de server.
• Alleen e-mail, geen database. Eén verkeerd ingestelde sleutel en aanvragen verdwijnen weken lang zonder dat iemand het merkt.
• API-sleutel in de frontendcode. Iedereen kan hem gebruiken om e-mail namens jou te versturen.
• Niet-geverifieerd verzenddomein. Meldingen belanden in de spam of komen nooit aan.
• Versturen “van” het e-mailadres van de bezoeker. Gebruik in plaats daarvan reply-to.
• Geen lengtelimieten. Bots plakken enorme blokken tekst.
• De live site nooit testen. Sleutels en domeinen verschillen vaak tussen preview en productie.

Checklist

• Kort formulier met zichtbare labels en duidelijke foutmeldingen
• Validatie en lengtelimieten op de server
• Elk bericht wordt in de database opgeslagen
• Meldingsmail verstuurd vanaf een geverifieerd domein, met reply-to ingesteld
• E-mail-API-sleutel alleen opgeslagen als geheim op de server
• Honeypot en rate limiting aanwezig
• Succesmelding verschijnt pas nadat de server heeft bevestigd
• Privacymelding linkt naar je privacybeleid
• Van begin tot eind getest op de gepubliceerde site, inclusief de spammap

Contactformulieren in Mythex

In Mythex bouw je het hele ding vanuit de chat. Vraag om het formulier en een database in dezelfde prompt (of typ /database), zodat inzendingen blijven bestaan. Mythex heeft geen ingebouwd product voor het versturen van e-mail, dus voor meldingen breng je een provider mee zoals Resend, SendGrid of Postmark, voeg je de sleutel toe met /secrets of via de projectinstellingen, en vraag je de agent om vanaf de server te versturen — zie e-mail versturen vanuit je app. Voordat je erop vertrouwt, draai je App Testing (/test) op het formulier in Preview, publiceer je daarna en test je op de live URL.

Een contactformulier is een belangrijk onderdeel van de meeste websites voor kleine bedrijven en landingspagina's. Controleer de beveiligingschecklist voor de lancering.

Veelgestelde vragen