Appearance
Formulier voor in code
Hieronder zie je de HTML en PHP van een simpel contactformulier. Als je deze blog volgt heb jij straks een eigen inlogformulier!
Let op!
Voor je begint moet je composer hebben geïnstalleerd. Composer Download ↗
🛠️ Voorbereiding
Voor je de PHPMailer kan gebruiken moet je het volgende commando uitvoeren:
Hieronder zie je alle code die nodig is. Je kan dit letterlijk kopieëren en plakken en je bent klaar. Let wel op dat je de privegegevens van de mail nooit zomaar in je document zet. Gebruik liever een .env.
shell
composer require phpmailer/phpmailerWe gebruiken de PHPMailer om de mail te verzenden die door het contactformulier wordt ingediend.
💻 Code
Let op!
Je moet in form-verwerk.php wel de gegevens van de mail host correct instellen
php
<?php
session_start();
?>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
<!-- Error als het verzenden mislukt-->
<?php if (isset($_SESSION['error'])): ?>
<div id="toast-danger" class="absolute top-5 right-5 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
</svg>
<span class="sr-only">Error icon</span>
</div>
<div class="ms-3 text-sm font-normal"><?php echo $_SESSION['error']; ?></div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" onclick="this.parentElement.remove()" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>
<?php endif; ?>
<section class="bg-white dark:bg-gray-900">
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<form action="form-verwerk.php" method="POST" class="space-y-8">
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your name</label>
<input type="name" id="name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="John Doe" required>
</div>
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
<input type="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="info@example.com" required>
</div>
<div>
<label for="subject" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Subject</label>
<input type="text" id="subject" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required>
</div>
<div class="sm:col-span-2">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
<textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Leave a message..."></textarea>
</div>
<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-black rounded-lg bg-[#c4c4c4] sm:w-fit hover:bg-primary-800">Send message</button>
</form>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>php
<?php
session_start();
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$mail = new PHPMailer(true);
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
try {
// Serverinstellingen
$mail->isSMTP();
$mail->Host = 'mail.example.com'; // Bijvoorbeeld smtp.gmail.com
$mail->SMTPAuth = true;
$mail->Username = 'jouw-email@example.com';
$mail->Password = 'jouw-wachtwoord';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
// Afzender en ontvanger
$mail->setFrom('jouw-email@example.com', 'Jouw Naam');
$mail->addAddress('jouw-email@example.com', 'Jouw Naam');
// Inhoud mail
$mail->isHTML(true);
$mail->Subject = $subject;
$mail->Body = "
<h2>Nieuw bericht van het contactformulier</h2>
<p><strong>Naam:</strong> $name</p>
<p><strong>E-mail:</strong> $email</p>
<p><strong>Bericht:</strong><br>$message</p>
";
$mail->AltBody = "Nieuw bericht van het contactformulier\n\nNaam: $name\nE-mail: $email\nBericht:\n$message";
$mail->send();
header("Location: bedankt.php");
} catch (Exception $e) {
$_SESSION['error'] = $mail->ErrorInfo;
header("Location: form.php");
}
}php
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex h-screen items-center justify-center">
<div>
<div class="flex flex-col items-center space-y-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-28 w-28 text-green-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1 class="text-4xl font-bold">Bedankt!</h1>
<p>
Bedankt voor het invullen van het contactformulier. We nemen zo snel mogelijk contact met u op.
</p>
<a href="form.php"
class="inline-flex items-center rounded border border-indigo-600 bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 focus:outline-none focus:ring">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-3 w-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
<span class="text-sm font-medium"> Terug </span>
</a>
</div>
</div>
</div>🖼️ Afbeeldingen
