Mit unserem Node.js Kontaktformular Codeschnipsel Script kannst du Feedback, Anregungen oder Fragen von deinen Nutzern sammeln und verwalten. Unser Script bietet einen sauberen Server Endpunkt für Formulareinträge, prüft die Eingaben auf Validität und speichert alle Nachrichten sicher in einer JSON Datei auf deinem Server.
Die Script umfasst:
- Ein HTML-Formular mit Name, E-Mail-Adresse und Nachricht
- Ajax Unterstützung für schnelles, reloadfreies Absenden
- Server seitige Validierung der Eingaben
- Speicherung der Einträge in JSON für einfache Auswertung
- GET-Endpunkt zum Auslesen aller Einsendungen
- Einfach erweiterbar für E-Mail-Benachrichtigungen oder Admin-Panel
Dieses Script ist datenschutzfreundlich und komplett serverseitig kontrollierbar. 😉
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreamcodes - Kontaktformular</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; }
label { display: block; margin-top: 10px; font-weight: bold; }
input, textarea { width: 100%; padding: 8px; margin-top: 5px; }
button { margin-top: 15px; padding: 10px 20px; }
.message { margin-top: 15px; font-weight: bold; }
</style>
</head>
<body>
<h1>Kontaktformular</h1>
<form id="kontaktForm">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" required>
<label for="message">Nachricht</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Absenden</button>
</form>
<div class="message" id="responseMessage"></div>
<script>
const form = document.getElementById('kontaktForm');
const responseMessage = document.getElementById('responseMessage');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = {
name: form.name.value.trim(),
email: form.email.value.trim(),
message: form.message.value.trim()
};
try {
const res = await fetch('/kontakt', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await res.json();
if (data.ok) {
responseMessage.style.color = 'green';
responseMessage.textContent = data.message;
form.reset();
} else {
responseMessage.style.color = 'red';
responseMessage.textContent = data.error || 'Fehler beim Absenden';
}
} catch (err) {
responseMessage.style.color = 'red';
responseMessage.textContent = 'Serverfehler, bitte später erneut versuchen';
}
});
</script>
</body>
</html>// Als server.js abspeichern
const express = require('express');
const fs = require('fs').promises;
const path = require('path');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const DATA_FILE = path.join(__dirname, 'kontakte.json');
function validateInput({ name, email, message }) {
if (!name || !email || !message) return false;
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return false;
return true;
}
app.post('/kontakt', async (req, res) => {
const { name, email, message } = req.body;
if (!validateInput(req.body)) {
return res.status(400).json({ ok: false, error: 'Ungültige Eingaben' });
}
const eintrag = { name, email, message, timestamp: new Date().toISOString() };
let daten = [];
try {
const file = await fs.readFile(DATA_FILE, 'utf8');
daten = JSON.parse(file);
} catch (err) {
// Datei existiert noch nicht, wird neu angelegt
}
daten.push(eintrag);
await fs.writeFile(DATA_FILE, JSON.stringify(daten, null, 2), 'utf8');
res.json({ ok: true, message: 'Danke! Dein Eintrag wurde gespeichert.' });
});
app.get('/kontakte', async (req, res) => {
try {
const file = await fs.readFile(DATA_FILE, 'utf8');
res.json(JSON.parse(file));
} catch {
res.json([]);
}
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server läuft auf http://localhost:${PORT}`));