Kontaktformular mit Javascript fetch
Hier stelle ich ein Kontaktformular mit Javascript vor.
Ausgestattet mit zwei Spamschutz-Mechanismen.
Als erstes integriert ist ein so genannter Honeypot.
Ein Spamschutz, der funktioniert so, dass ein verstecktes Feld leer bleiben muss, um das Formular abzuschicken.
Ein Bot füllt es aus.
Als zweites wird geprüft, ob die Maus über dem Absenden-Button liegt, und das Formular erst dann freigegeben wird.
Letzendlich wird auf "<input type="submit" value="Senden">" verzichtet, so dass ein automatisiertes Abschicken erschwert wird!.
Wenn man sich ein bisschen in den Code einarbeitet, kann man noch Felder hinzufügen oder löschen.
Wenn es Probleme beim Erweitern gibt oder bei dem Anlegen des Formulars Probleme auftreten,
kann man mich gerne über das folgende Formular kontaktieren!
Folgendes Formular wird erstellt:(es funktioniert auch, lasst mir doch einen Kommentar da)
*Pflichtfelder
Das HTML
<div id="form-wrap">
<form id="form" accept-charset="utf-8">
<label for="vorname">Vorname*</label><br>
<input type="text" name="vorname" maxlength="100" value="" id="vorname"><br>
<label for="nachname">Nachname*</label><br>
<input type="text" size="100" name="nachname" maxlength="100" value="" id="nachname"><br>
<label for="email">Email*</label><br>
<input type="text" size="100" name="email" maxlength="100" value="" id="email"><br>
<label for="telefon">Telefon</label><br>
<input type="text" size="100" name="telefon" maxlength="100" value="" id="telefon"><br>
<label for="nachricht">Nachricht*</label><br>
<textarea name="nachricht" rows="7" cols="50" maxlength="1000" id="nachricht"></textarea><br>
<input type="text" size="100" name="pot" maxlength="100" value="">
<div id="submit">Senden</div>
</form>
*Pflichtfelder
</div>
Das CSS
input,textarea {
width:100%;
padding:5px 5px;
}
input {
margin-bottom:5px;
}
input[name='pot'] {
display: none;
}
.popup {
background: #000;
color:#fff;
position: fixed;
left:50%;
top:50%;
max-width: 551px;
min-height: 100px;
width: calc(100% - 40px);
transform: translate(-50%,-50%);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
opacity:0;
transition:opacity 0.4s;
cursor: auto;
}
.opacity {
opacity: 1 !important;
}
.popup-inner {
padding: 30px;
font-size:30px;
text-align:center;
}
#closer {
position: absolute;
background: #666;
color: #fff;
width: 40px;
height: 40px;
right: -20px;
top: -20px;
border-radius: 50%;
line-height: 34px;
font-size: 40px;
text-align: center;
cursor: pointer;
}
.bg-underlay {
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
cursor:pointer;
}
#submit {
background:#000;
width: fit-content;
color:#fff;
padding: 10px 20px;
cursor: pointer;
}
Das Javascript
Am Besten for dem schließenden Body-Tag einfügen!
var allowedToSend = true;
var isOverButton = false;
function setPopup(text) {
var isOver = false;
const popup = document.createElement("div");
popup.className = "bg-underlay";
popup.innerHTML = '<div class="popup"><div class="popup-inner">' + text + '</div><div id="closer">×</div></div>';
document.querySelector("body").appendChild(popup);
setTimeout(function () {
document.querySelector(".popup").classList.add("opacity");
}, 0);
function getOut() {
document.querySelector(".popup").classList.remove("opacity");
setTimeout(function () {
document.querySelector(".bg-underlay").remove();
allowedToSend = true;
}, 400);
}
document.querySelector("#closer").addEventListener("click", function () {
getOut();
});
document.querySelector(".bg-underlay").addEventListener("click", function () {
if (!isOver) {
getOut();
}
})
document.querySelector(".popup").addEventListener("mouseenter", function () {
isOver = true;
})
document.querySelector(".popup").addEventListener("mouseleave", function () {
isOver = false;
})
}
document.querySelector("#submit").addEventListener("mouseover", function (event) {
isOverButton = true;
});
document.querySelector("#submit").addEventListener("mouseout", function (event) {
isOverButton = false;
});
document.querySelector("#submit").addEventListener("click", function (event) {
if (!allowedToSend) {
return false;
}
if (allowedToSend) {
allowedToSend = false;
}
if (document.querySelector("#form input[name='vorname']").value != ""
&& document.querySelector("#form input[name='nachname']").value != ""
&& document.querySelector("#form input[name='email']").value != ""
&& document.querySelector("#form textarea[name='nachricht']").value != ""
// hier kann man eigene Pflichtfelder nach selbem Schema einbauen
&& document.querySelector("#form input[name='pot']").value == ""// der Honeypot
&& isOverButton) {
const regexMail = /[!#$%&'\*\+\-\/=\?^_`\.{\|}~\w].*@[\w\-\._~]*\.[a-z]{2,}$/g;
const checkMail = regexMail.test(document.querySelector("#form input[name='email']").value);
if (checkMail) {
const data = new FormData(form);
fetch("mail.php", {// der Pfad zur PHP-Datei
method: "POST",
body: data
})
.then(function () {
for (let el of document.querySelectorAll("#form input,#form textarea")) {
el.value = "";
}
setPopup("Danke, Email versendet!");
})
.catch(function () {
allowedToSend = true;
alert("Fehler");
});
} else {
setPopup("Email nicht valide!");
}
} else {
setPopup("Bitte Pflichtfelder ausfüllen!");
}
});
Das PHP
abgespeichert als mail.php
<?php
$vorname = $_POST['vorname'];
$vorname = wordwrap($vorname, 70);
$nachname = $_POST['nachname'];
$nachname = wordwrap($nachname, 70);
$email = $_POST['email'];
$email = wordwrap($email, 70);
$tel = $_POST['telefon'];
$tel = wordwrap($tel, 70);
$nachricht = $_POST['nachricht'];
$nachricht = wordwrap($nachricht, 70);
// hier kann man zusätzliche Formularfelder anlegen
$empfaenger = "kontakt@myemail.de"; // Empfänger Email
$betreff = "Anfrage";
$nachricht = "Vorname: " . $vorname . "\n" . "Nachname: " . $nachname . "\n" . "Telefon: " . $tel . "\n" . "Email: " . $email . "\n" . "Nachricht: " . $nachricht;
// erweitern, wenn nötig
$header = array(
'MIME-Version' => '1.0',
'Content-type' => 'text/plain; charset=utf-8',
'From' => 'info@mydomain.de', // Hier muss die eigene Domain vermerkt werden
'Reply-To' => $email,
'X-Mailer' => 'PHP/' . phpversion()
);
mail($empfaenger, $betreff, $nachricht, $header);
Hier auch als (sicherer) Download