Kontaktformular schützen mit honeypot, captcha o.ä.
- php
Guten Abend, ich habe eine kleine website für meine Frau gebaut und wie sollte es anders sein, binnen kürzester Zeit Probleme mit spam auf dem Kontaktformular bekommen. Meine Kenntnisse in Html und CSS sind bescheiden, aber dahingehend genug, um nicht bei worldpress landen zu müssen und auch nicht zu wollen, php & js eigentlich keine, so dass es leider nicht klappt, einen custom captcha generator der Kontaktseite vorzuschalten oder einen honeypot einzubinden.
Das Prinzip des honeypots ist klar, aber es gelingt mir nicht, das versteckte Feld in einer if(...)-Abrage so abzufragen, dass es wirksam werden könnte. Vielleicht steckt das Problem da, dass es einer doppelten Bedingung bedarf, da ich ja auch noch den: if(isset($_POST["submit"]))..... abfrage. Ich füge mal einen screenshot des body bei, hoffend, dass jemand versteht, was ich versuche zu erreichen.
Als honneypot habe ich das Feld "beruf" angelegt, da das alles noch nicht funzt, ist das Feld noch nicht "hidden". Wenn ich die eMail versende wird bei einerTexteingabe in diesem Feld der Inhalt mit versendet. Versucht habe ich es mit einer empty-Abfrage, es erschließt sich mir aber nicht, warum die hier nicht greift. Vielleicht hat ja jemand Erbarmen mit einem Blinden.
Ich weiß, ich habe die eMail nicht ausgegraut, aber die wird eh gerade missbraucht.
Liebe Grüße, Uwe
die Zeile:
/*mail("$empfaenger","$betreffwebmaster","$koerperwebmaster\n","From: $absender\n");*/
habe ich auskommentiert, weil mir strato mal gesagt hat, das eben diese funktion das Einfallstor wäre, was aber augenscheinlich nicht stimmt, wie man jetzt sieht.
Lieber Uwe,
ich halte mein Kontaktformular so einfach wie möglich. Wozu denn Pflichtangaben? Die muss man im Programm ja dann auch berücksichtigen. Auch wenn mal jemand das Ding falsch herum ausfüllt, sollte doch der Hauptzweck eine wie auch immer geartete Kontaktaufnahme sein. Und dafür genügt doch ein Freitextfeld völlig.
Cool ist, wenn man zu mindestens einer Vorschau gezwungen wird. Das hält die wirklich allermeisten Bots ab. Deswegen bekomme ich seit Jahren darüber auch null Komma überhaupt keinen automatisierten Spam. Wenn was kommt, hat (zumindest bisher) wirklich ein Mensch das Teil bedient.
Liebe Grüße
Felix Riesterer
Hi Felix, das sieht nach einer ziemlich genialen Idee aus, so genial, dass ich mich zumindest heute abend nicht mehr an eine Umsetzung trauen würde, aber gerne täte, ich melde mich mal über das Kontaktformular? thx Uwe
Hi,
Ich füge mal einen screenshot des body bei
ja, ein Bild vom Code ist immer besonders sinnvoll, den kann ein Helfer dann besonders leicht kopieren, um ggf. was dran zu ändern (mal ganz abgesehen davon, daß ICH die Darstellung hell auf schwarz kaum lesen kann)
Was spricht dagegen, den Code direkt zu posten (gibt ja sogar extra Formatierung dafür, siehe </>-Button …)?
cu,
Andreas a/k/a MudGuard
Hallo Andreas,
ja, da hast Du wohl recht, das mit dem "</>" habe ich nicht gerafft, Button unter dem Eingabefeld hat mich mehr in seinen Bann gezogen, als </>😇😇😇. Danke für den Hinweis. Ich stelle den Code gerne einmal ein. Ich habe ihn noch nicht gesäubert, die Formatierungen hätte ich vermutlich in eine .css auslagern können, habe ich mich aber bei einer php noch nicht getraut, einige Zeilen stammen noch aus den html-Seiten, wie die css-Aufrufe, die gehören noch raus, weil hier irrelevant.Quelltext hier Für sachdienliche Hinweise jeder Art wäre ich dankbar.
Liebe Grüsse und thx, Uwe
<!DOCTYPE html>
<html lang="de-de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=“robots“ content="index, follow">
<meta name="googlebot" content="index, follow">
<title>Iris Burmeister - Praxis für Physiotherapie & Traditionelle Chinesiche Medizin</title>
<meta name="description" content="Kontaktformular Praxis für Physiotherapie, Krankengymnastik, eail ">
<meta name=”keywords” content="Physiotherapie, Krankengymnastik, KG ZNS, Atemtherapie">
<meta name=“author” content="Iris Burmeister & Uwe Ehrich">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style-menue.css">
<link rel="stylesheet" href="fonts.css">
<link rel="icon" href="Bilder/favicon.jpg">
</head>
<style>
*{
margin: 0;
padding: 0;
}
html {
height: 100vh;
height: 100dvh;
}
body {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-image: url("Bilder/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 62vh;
background-size: 62dvh;
background-position: 50% 50%;
font-family: raleway, sans-serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: rgb(40, 32, 87);
}
form{
height: 675px;
width: 500px;
padding: 30px;
border-radius: 8px;
background-color: rgba(190, 207, 229, 0.7);
box-shadow: 14px 14px 25px rgba(128, 128, 128, 1);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
h1 {
color: rgb(40, 32, 87);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 38px;
font-weight: 200;
background-image: linear-gradient(to right, rgba(220, 220, 237, 1), rgb(74, 15, 236));
background-size: 100% 2px;
background-position: bottom;
background-repeat: no-repeat;
line-height: 60px;
text-shadow: 3px 3px 5px rgb(146, 146, 156);
}
h2 {
color: rgb(40, 32, 87);
color: rgba(255, 0, 0, 1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
font-weight: 400;
background-image: linear-gradient(to left, rgb(220, 220, 237, 1), rgb(74, 15, 236));
background-size: 100% 2px;
background-position: bottom;
background-repeat: no-repeat;
line-height: 60px;
text-shadow: 3px 3px 5px rgb(146, 146, 156);
}
h3 {
color: rgb(15, 177, 50);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
font-weight: 400;
}
h4 {
color: rgb(177, 15, 23);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
font-weight: 400;
}
.inputs-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
height: 30px;
width: 240px;
margin: 5px;
padding: 0px 25px;
border-radius: 10px;
border: none;
background-color: rgba(224, 229, 233, 0.9);
box-shadow: 3px 2px 10px rgba(128, 128, 128, 1);
color: #000033;
font-size: 20px;
transition: 0.3s;
}
input:hover {
background-color: rgba(151, 199, 247, 0.9);
}
input:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.9);
width: 410px;
}
input::placeholder{
color: rgba(33, 48, 94, 1);
}
textarea {
width: 240px;
margin: 5px;
margin-bottom: 60px;
padding: 5px 25px;
border-radius: 10px;
border: none;
background-color: rgba(224, 229, 233, 0.9);
box-shadow: 3px 2px 10px rgba(128, 128, 128, 1);
color: #000033;
font-size: 20px;
transition: 0.3s;
}
textarea:hover {
background-color: rgba(151, 199, 247, 0.9);
}
textarea:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.9);
width: 410px;
}
textarea::placeholder{
color: rgba(33, 48, 94, 1);
}
button {
height: 25px;
width: 200px;
border-radius: 1000px;
border: none;
background-color: rgba(224, 229, 233, 0.9);
box-shadow: 3px 2px 10px rgba(128, 128, 128, 1);
font-size: 15px;
color: rgb(40, 32, 87);
transition: 0.3s;
}
button:hover {
width: 250px;
background-color: rgba(151, 199, 247, 0.9);
}
button:focus {
outline: none;
width: 250px;
background-color: rgba(255, 255, 255, 0.9);
}
.back {
text-align: center;
height: 30px;
width: 200px;
border-radius: 1000px;
border: none;
background-color: rgba(224, 229, 233, 0.9);
box-shadow: 3px 2px 10px rgba(128, 128, 128, 1);
font-size: 10px;
color: rgb(40, 32, 87);
transition: 0.3s;
}
.back:hover {
width: 250px;
background-color: rgba(151, 199, 247, 0.9);
}
.back:focus {
outline: none;
width: 250px;
background-color: rgba(255, 255, 255, 0.9);
}
/* .beruf {
opacity: 0;
position: absolute;
top: 0;
left: 0;
top: 0;
width: 0;
z-index: -1;
}*/
@media (max-width: 650px){
form {
height: 100vh;
height: 100dvh;
width: 100vw;
width: 100dvw;
justify-content: center;
}
.inputs-container{
margin:80px;
}
h1{
font-size: 32px;
}
input:focus {
width: 300px;
}
textarea:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.9);
width: 300px;
}
/* Umstellung für Handys im Dark Mode & Hochformat Positionierung für Hochformat Anzeige */
:root {
color-scheme: dark;
}
body {
color: #000033;
background-color: white;
}
h1 {
color: rgb(40, 32, 87);
}
}
</style>
</head>
<body>
<form action="kontakt-meins.php" method="post">
<h1>Nachricht schreiben</h1>
<div class="inputs-container">
<input type="text" name="name" id="name" required placeholder="Vor-/Nachname"><br>
<input type="email" name="email" id="email" required placeholder="email"><br>
<input type="tel" name="telefonnummer" id="telefonnummer" placeholder="Telefonnummer (optional)"><br>
<input type="text" name="betreff" id="betreff" placeholder="Betreff (optional)"><br>
<input type="text" name="beruf" id="beruf" placeholder="Beruf (optional)"><br>
<textarea name="nachricht" id="nachricht" rows="4" required placeholder="Ihre Nachricht: (Es gelten unsere Datenschutzhinweise, mit dem Senden stimmen Sie der Datenverarbeitung zu.)"></textarea>
<button type="submit" name="submit" id="button">Nachricht senden</button><br>
<a class="back" style="color: rgb(40, 32, 87); font-size: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" href="index.html" target="_blank">zurück</a>
</div>
<?php
if(isset($_POST["submit"])){
if(empty($_Post["beruf"])){
mail("physio@iris-burmeister.de", "Kontaktformular" , 'Name: '. $_POST["name"] .' Email: '. $_POST["email"] .' Telefonnummer: '. $_POST["telefonnummer"] .' Betreff: '. $_POST["betreff"] .' beruf: '. $_POST["beruf"] . ' Nachricht: '. $_POST["nachricht"]);
/*mail("$empfaenger","$betreffwebmaster","$koerperwebmaster\n","From: $absender\n");*/
$name = $_POST["name"];
$email = $_POST["email"];
$telefonnummer = $_POST["telefonnummer"];
$betreff = $_POST["betreff"];
$beruf = $_POST["beruf"];
$nachricht = $_POST["nachricht"];
$empfaenger = "physio@iris-burmeister.de";
$absender = $email;
$abgesand = "<h3>Nachricht gesendet. Vielen Dank<h3>";
$nichtabgesand = "<h4>Nachricht konnte nicht gesendet werden,</h4>";
$betreffwebmaster = "Ihr Kontakt ($name)";
$koerperwebmaster = "Sie $name haben mir Iris Burmeister folgende Nachricht gesendet:\n\n
Kontaktdaten: \n
\tname: $name \n
\temail: $email \n
\ttelefonnummer: $telefonnummer \n
\tnachricht: $nachricht";
}
}
?>
<?php
if(isset($_POST["submit"])){
echo $abgesand;}
else {
echo $nichtabgesand;}
?>
</form>
</body>
</html>
Hallo Uwe Ehrich,
die empty-Abfrage für den Beruf liefert IMMER leer, weil $_Post und $_POST zwei verschiedene Variablen sind. Du müsstest eine Fehlermeldung sehen, dass Du auf eine undefinierte Variable zugreifst, sofern Du sie nicht deaktiviert hast (was man beim Entwickeln besser nicht tut).
Warum schreibst Du die Mailadresse überhaupt im Kontaktformular sichtbar hin? Zum Senden der Kontaktanfrage muss der Besucher die Kontaktmailadresse nicht sehen.
Die gehört eigentlich nur ins Impressum und kann dort mit etwas Verwirrung dargestellt werden, so dass ein Bot sie nicht so einfach abgreifen kann. mailto:-Links sind zwar sehr praktisch für den Besucher, aber eben auch für die Harvester-Bots.
Beim Aufbau von $koerperwebmaster musst Du übrigens beachten, dass die Zeilenumbrüche im PHP Quellcode ebenfalls Teil der Variablen werden. Die \n, die Du setzt, sind also ggf. doppelt gemoppelt.
Rolf
Lieber Rolf,
danke für Deinen Hinweis, das mit dem POST/Post hätte ich wohl in 200 Jahren nicht gesehen, thx.
Fehlermeldung, nein, aber das dürfte an meiner Unvollkommenheit liegen, VSC korrigiert ansich php wohl nicht???, vermutlich gibt es aber in der Fülle von plugins auch hierfür eine Lösung.
... ganz ehrlich? weil mein Wissen in html ziemlich veraltet ist und weil ich von php so wenig Ahnung habe, dass ich froh war, mir mit geliehenen codes und viel Intuition etwas funktionierendes zusammengebastelt habe. Ja, ich habe in der Schule schon mit Computern gearbeitet. Das hat so ausgesehen, dass wir so Kärtchen in etwa 1/3 A4-Format mit Kästchen bekamen, die wir dann z.T. mit Bleistift schwärzten, um so einfache Additionsaufgaben zu rechnen🧐. Programmieren gelernt habe ich in Fortran. ... und so weiter. Und wenn man nicht regelmäßig dran bleibt, ist man irgendwann raus. HTML habe ich gelernt, da hat man noch in Tabellen programmiert.
Tja, und youtube ist voll von Anleitungen, wie mache ich dies und das in Worldpress o.a.. (Das war dann quasi meine Kurzvorsatellung als Neuankömmling. 😇)
Als Physio hat meine Frau es leider häufiger mit Leuten zu tun, die altersbedingt noch weniger mit Computern umgehen können, daher war ich auf eine einfach zu bedienende Lösung aus, hätte aber auch keine andere zur Hand gehabt.
Daher, ich kann jeden wohlwollenden Rat dringend brauchen,
liebe Grüße,
Uwe
Moin Uwe,
Fehlermeldung, nein, aber das dürfte an meiner Unvollkommenheit liegen, VSC korrigiert ansich php wohl nicht???, vermutlich gibt es aber in der Fülle von plugins auch hierfür eine Lösung.
die Fehlermeldung müsste in der Log-Datei des Servers auftauchen, auf dem Du Deine Seite testest.
Als Physio hat meine Frau es leider häufiger mit Leuten zu tun, die altersbedingt noch weniger mit Computern umgehen können, daher war ich auf eine einfach zu bedienende Lösung aus, hätte aber auch keine andere zur Hand gehabt.
Dann ist es umso wichtiger, dass die Webseite der Zielgruppe zugänglich ist. Platzhalter von Eingabefeldern sind das nicht, Labels schon. Du möchtest daher das Formular dementsprechend ändern:
<p>
<label for="name">Vor-/Nachname:</label>
<input type="text" name="name" id="name" required>
</p>
Das betrifft alle Formularfelder.
Weiterhin frage ich mich, was es mit diesem „Zurück“-Link auf sich hat, dass er eine Spezialformatierung bekommt und einen neuen Tab öffnet.
Viele Grüße
Robert
...schäm, es war tatsächlich die Verwechslung von $_Post und $_POST. macht den Rest zwar noch nicht besser, aber ein erster Schritt, ...