Een contactformulier op je AI-website laten werken

Een contactformulier werkt op een statische website pas als er een server aan te pas komt. De pagina zelf kan geen mail versturen, ook niet als je AI een mooi formulier heeft gebouwd. Op onze hosting los je het op met een klein PHP-script dat via SMTP en een mailbox op je eigen domein verstuurt, of je gebruikt een formulierdienst.

Je krijgt hieronder beide routes, een veilig voorbeeld en een prompt die je in je AI-tool plakt.

Waarom je formulier niets doet

Een AI-tool maakt vaak een formulier met een verzendknop. Op de plek waar de tool je site laat zien, kan zo’n formulier ogen alsof het werkt. Op gewone hosting staat er alleen HTML, CSS en JavaScript. Die code draait in de browser van je bezoeker. Mail versturen is werk voor een server.

Bij Lovable en Bolt kan een formulier of gegevensopslag leunen op een backend van de tool zelf. Zet je alleen de voorkant bij ons online, dan wijst het formulier nog naar die backend of naar niets. Meer over wat er mee verhuist staat in je AI-website exporteren.

Twee routes

	PHP-script op je hosting	Formulierdienst
Waar draait het	Op onze PHP-hosting	Bij de dienst
Waar komt mail vandaan	Een mailbox op je eigen domein	Het adres van de dienst
Wat heb je nodig	Een mailplan en een PHP-bestand	Een account en een formulier-URL
Gegevens van bezoekers	Blijven bij jou	Gaan via de dienst
Past bij	Je wilt alles op één plek	Je wilt geen script onderhouden

Heb je al een Website + Mail-plan, dan is de PHP-route de kortste. Heeft je site alleen het Website-plan, dan bevat dat geen mailboxen: kies dan een formulierdienst, of voeg Mail toe, zie de prijzen.

Route 1: PHP-script met SMTP van je eigen mailbox

Een website verstuurt mail via SMTP met de gegevens van een mailbox op je eigen domein. Je site logt dus in als die mailbox, net als Outlook dat doet. Het bericht komt dan van je eigen domein en niet van een onbekende server, en dat helpt om niet in de ongewenste post te belanden.

Dit heb je nodig:

1. Een mailbox op je domein, bijvoorbeeld [email protected]. Die hoort bij het Mail- of Website + Mail-plan, zie mail bij je eigen domein.
2. De SMTP-gegevens van die mailbox. Bij ons is de server mail.klappehosting.nl met poort 465 (SSL/TLS), en de gegevens van jouw mailbox staan in je portal onder Mijn mail. Je gebruikersnaam is het volledige mailadres.
3. PHPMailer, een gratis bibliotheek die het versturen doet. Download de zip van de PHPMailer-pagina op GitHub, pak hem uit en upload de map src via SFTP als phpmailer/src naast contact.php. Zonder die bestanden werkt het voorbeeld hieronder niet.

Hieronder een kort voorbeeld met een honeypot, controle op invoer en zonder gebruikersinvoer in de mailheaders. Zet het bestand als contact.php naast je site en vul het wachtwoord in.

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require __DIR__ . '/phpmailer/src/Exception.php';
require __DIR__ . '/phpmailer/src/PHPMailer.php';
require __DIR__ . '/phpmailer/src/SMTP.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') { http_response_code(405); exit; }

// Honeypot: echte bezoekers laten dit veld leeg.
if (!empty($_POST['website'])) { header('Location: /bedankt.html'); exit; }

$naam    = trim((string)($_POST['naam'] ?? ''));
$email   = trim((string)($_POST['email'] ?? ''));
$bericht = trim((string)($_POST['bericht'] ?? ''));

if ($naam === '' || $bericht === '' || !filter_var($email, FILTER_VALIDATE_EMAIL)
    || mb_strlen($naam) > 100 || mb_strlen($bericht) > 5000) {
    http_response_code(400); exit('Controleer je gegevens.');
}

$mail = new PHPMailer(true);
try {
    $mail->isSMTP();
    $mail->Host       = 'mail.klappehosting.nl';
    $mail->SMTPAuth   = true;
    $mail->Username   = '[email protected]';
    $mail->Password   = 'WACHTWOORD-HIER';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
    $mail->Port       = 465;
    $mail->CharSet    = 'UTF-8';

    $mail->setFrom('[email protected]', 'Website');
    $mail->addAddress('[email protected]');
    $mail->addReplyTo($email, $naam);
    $mail->Subject = 'Nieuw bericht via de website'; // vast onderwerp, nooit invoer van de bezoeker
    $mail->Body    = "Naam: $naam\nE-mail: $email\n\n$bericht";
    $mail->send();
    header('Location: /bedankt.html');
    exit;
} catch (Exception $e) {
    http_response_code(500); exit('Versturen is niet gelukt.');
}

Twee dingen om te zien. De afzender is altijd je eigen mailbox; het adres van de bezoeker staat alleen in Reply-To, zodat je met één klik op Beantwoorden bij de bezoeker uitkomt. Het wachtwoord staat in een PHP-bestand dat de server uitvoert en niet toont, dus bezoekers zien het niet. Gebruik voor het formulier een eigen mailbox met een eigen wachtwoord, zodat je dat wachtwoord nergens anders nodig hebt.

In het formulier zelf zit het honeypot-veld als een veld dat bezoekers niet zien:

<form method="post" action="/contact.php">
  <input name="naam" required>
  <input name="email" type="email" required>
  <textarea name="bericht" required></textarea>
  <input name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true">
  <button type="submit">Versturen</button>
</form>

Bots vullen alle velden in, ook dat onzichtbare. Het script negeert zulke berichten.

Route 2: een formulierdienst

Een formulierdienst neemt het versturen over: je formulier post naar hun URL, zij sturen de mail door. Bekende diensten zijn Formspree en Web3Forms. Het gratis plan van Formspree staat op het moment van schrijven op 50 inzendingen per maand, volgens de eigen prijspagina. Limieten wisselen vaak, dus bekijk de actuele pagina voor je kiest.

Een formulierdienst werkt zonder PHP, dus ook op een puur statische site. De prijs is dat bezoekersgegevens via een derde lopen. Noem dat in je privacyverklaring en kijk of er een verwerkersovereenkomst bij hoort. Wil je alles bij één partij, dan past de PHP-route beter.

Zo test je het formulier

Een formulier dat nooit is getest, werkt vaak net niet. Doe de test in deze volgorde, direct na het uploaden:

1. Open de pagina met het formulier op je eigen domein en verstuur een bericht met je privéadres als afzender.
2. Kijk of het bericht in de inbox van het ontvangende adres staat en zoek anders in de ongewenste post.
3. Klik op Beantwoorden en controleer dat het antwoord naar het adres van de bezoeker gaat.
4. Verstuur een leeg formulier en een formulier met een ongeldig e-mailadres. Je moet een duidelijke melding krijgen.
5. Vul het verborgen veld in via de ontwikkelaarstools van je browser en verstuur. Je krijgt geen mail, en dat is precies de bedoeling.

Werkt stap 2 niet, dan zit het meestal in de SMTP-gegevens: een typefout in de gebruikersnaam, het verkeerde wachtwoord of ontbrekende PHPMailer-bestanden. Stuur ons een appje, dan kijken we mee.

Wachtwoorden en sleutels horen niet in de browser

Alles wat de browser laadt, kan iedereen lezen: JavaScript, HTML en ook variabelen die je bij bouwen in de bundel stopt. Bij Vite komen variabelen met het voorvoegsel VITE_ in de publieke code terecht, en de Vite-documentatie raadt af daar gevoelige waarden in te zetten.

Dus:

• zet het mailwachtwoord alleen in het PHP-bestand op de server;
• laat de browser alleen naar contact.php posten;
• plak het echte wachtwoord niet in een chat met je AI-tool. Laat een placeholder staan en vul het wachtwoord zelf in voor je het bestand uploadt.

Spam buiten houden

Een open formulier trekt binnen weken bots aan. Je hebt een paar lagen:

1. Honeypot, zoals hierboven.
2. Controle op invoer: lengte, geldig e-mailadres, geen regeleinden in velden die in headers kunnen belanden.
3. Tijdscontrole: een bericht dat binnen twee seconden na het laden van de pagina binnenkomt, komt vrijwel zeker van een bot.
4. Een captcha als het nog te veel wordt. Kies een dienst die geen volgcookies nodig heeft.

Begin met 1 en 2. Voor de meeste kleine sites is dat genoeg.

Laat je AI het script schrijven

Je hoeft de code niet zelf te schrijven. Plak dit in je AI-tool:

Maak een contactformulier met velden naam, e-mail en bericht dat via POST naar /contact.php post. Schrijf contact.php met PHPMailer en SMTP (host mail.klappehosting.nl, poort 465, SSL/TLS). Zet gebruikersnaam en wachtwoord als placeholders bovenin het PHP-bestand en nergens in JavaScript. Voeg een honeypot-veld toe, controleer alle invoer, gebruik Reply-To voor het adres van de bezoeker en stuur na succes door naar /bedankt.html. Maak ook bedankt.html. Het moet werken op gewone PHP-hosting zonder Node.

Lees het resultaat door voor je het uploadt. Staat er ergens een wachtwoord in een .js-bestand, vraag dan om te verplaatsen. Hoe je bestanden online zet, lees je in je AI-website exporteren en uploaden. Is je site een React-app, lees dan ook React en Vite hosten zonder Node-server. Op de pagina voor Lovable staat de route per tool.

Loopt het vast, stuur ons dan het bestand en wat je ziet. We kijken mee.