Spamschutz von Formularen mit Hilfe von Captchas

ChronoForms - Kontaktformular erstellen

Im Backend angemeldet wechselt Ihr über Komponenten > ChronoForms ins Forms Management.

 

 

Hier sind alle derzeit erstellten Formulare aufgelistet (nach einer frischen Installation ist hier natürlich kein Formular drin).

 

 

Zur Info: Ihr benötigt ab hier ca. 30 Minuten!

 

Klickt auf den Eintrag "Form Wizard".

 

 

In der Mitte ist der Entwurfsbereich. Rechts daneben die Toolbox mit den Elementen die Ihr in den Entwurfsbereich ziehen könnt. Packt euch mit der Maus die "TextBox" und zieht diese bei gedrückter linker Maustaste in den Enwurfsbereich. Lass Sie dort fallen.

 

 

Sobald eine TextBox in den Formularentwurf  eingefügt wurde, kann man die Eigenschaften (Properties) der TextBox sehen. In der Zeile "Label" trage ich "Vor- und Zuname" ein und klicke unten auf "Apply". Schaut euch die übrigen Optionen der Textbox mal an. Mit manchen kann man sofort was anfangen, bei anderen sollte man doch mal die Hilfe lesen. Auf der Herstellerseite sind hierfür einige Tutorials im PDF-Format bereitgestellt.

Damit wäre dann erst mal ein Textfeld (bzw. eine TextBox) drin. Weiter geht's.

 

 

Ich setze ein Feld nach dem anderen ein. Das "DropDown" Feld oder auch Kombinationsfeld hat eigene Eigenschaften (Properties). Doch wenn man ein wenig damit herumspielt klappt es schon. Achtet darauf, nach jeder Änderung der "Properties" immer auf "Apply" zu klicken, sonst werden die Änderungen verworfen.

Vor dem "Senden" Button nutze ich das "Captcha". Beschrieben (im Feld Label) habe ich es mit "Sicherheitscode". Und das letzte Element ist dann der "Button" den ich mit "Senden" beschrieben habe. Apply ... und dann auf die Diskette oben links im Formularentwurf klicken.

 

 

Gebt dem Formular dann einen Namen. Z. B. "kontakt". Ich hab hier "sh_reservierung" genutzt. Danach gelangt Ihr wieder zum "Forms Manager". Ihr hättet auch gleich zum "Step 2" gehen können, doch ich speichere immer gern, nach so "anstrengenden" Gestaltungen.

 

 

Wählt die Checkbox vor eurem Formular (bei mir ist das vor dem "sh_reservierung" und klickt oben auf "Wizard Edit". Klickt dort stann auf "Step 2". Ihr gelangt zur "E-Mail", die an euch gesendet wird, wenn das Formular ausgefüllt wird.

 

 

Klickt als erstes auf den Briefumschlag mit dem grünen Pfeil ( ... "New E-Mail" ...).

 

 

Ein roter Bereich erscheint, der darauf hindeutet, dass hier noch ein paar Felder eingefügt werden müssen, bevor die E-Mail versandt werden kann. Holt euch aus der Toolbox folgende Felder:

 

 

"To" und schreibt in das Textfeld dahinter die E-Mail-Adresse rein, an die die Inhalte des ausgefüllten Formulares gesandt werden sollen.

"Subject" ... und schreibt einen Betreff für die E-Mail. Man sollte hieran erkennen, von welcher Seite und von welchem Formular aus die E-Mail gekommen ist.

"From Name" ... mit dem Namen desjenigen der euch die e-Mail zusendet (z. B. Meine Domain - Kontaktformular).

"From Email" ... Die E-Mail-Adresse des Absenders, also des Servers, von dem die E-Mail ausgegangen ist (in der Regel auch die Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! ). Achtet hier darauf, dass manche Hoster nur E-Mails versenden, wenn diese "Absendeadresse" auch bei dem Provider existiert (=> Spamschutz). Die meisten Probleme mit den Formularen treten hier auf. Die Adresse muss also beim Hoster / Provider in der Regel auch existieren (siehe z. B. Goneo Hilfe).

 

ACHTUNG: In den Email Properties gibt es eine Eigenschaft die "Enabled" heißt. Die steht hier noch auf "No". Wollt Ihr das die E-Mail versandt wird, so muss hier ein "Yes" rein! Das werden wir aber gleich noch betrachten.

 

Gehen wir weiter zum nächsten Schritt. Klickt hierzu auf "Step 3 - Design your E-Mail".

 

 

Wer möchte kann in diesem Schritt die E-Mail noch optisch ansprechend gestalten. Ich lass das mal und gehe gleich zum "Step 4".

 

 

Schreibt hier die Dankesworte. "Vielen Dank für Ihre Nachricht ...". Damit wird der Besucher nach dem versenden des Formulars informiert, dass seine Daten auf den Weg zu euch sind.

Man kann hier die URL zu einer Seite eingeben - die man als "Dankeschön" vorbereitet hat - oder unten einfach einen Text formulieren.

 

 

Speichert das Formular wieder. Wir kommen zurück zum "Forms Manager".

 

 

Der Formularmanager zeigt das neue Formular. Klickt auf den Namen eures Formulares (meines heißt "sh_reservierung").

 

 

Hier findet Ihr weitere Einstellungen. Im Register "General" kann man gleich mal die Eigenschaft "Email the results" auf "Yes" stellen.

 

Anmerkung: Das ist die zweite Einstellung, um das Formular wirklich abzusenden.

 

Weiter ist hier nichts zu tun. Wechselt ins Register "AntiSpam".

 

 

Stellt die Option "Use Image verification" auf "Yes", um das Captcha im Formular zu aktivieren. Weiterhin stellt die Option "What type of image to show?" auf "With Fonts", um im Captcha auch Buchstaben zuzulassen.

Die Option "Republish fields if wrong submission?" stellt Ihr auf "Try to Republish", damit das Formular erneut angezeigt wird, wenn jemand das Captcha falsch angegeben hat. Lasst Ihr das hier deaktiviert, werden alle Eingaben vom Benutzer gelöscht, wenn das Captcha falsch erkannt wurde.

In dem Textfeld "Error Message" gebt Ihr was schönes ein. Z. B. "Die Eingabe stimmt nicht überein. Versuchen Sie es erneut.".

 

In der aktuellen Version fehlte mir diese Einstellung. Da muss nochmal recherchiert werden. Setze die Info dann an diese Stelle. Da, da ist sie. Ab der Version 1.5.7.2 ist die Option "Republish fields if wrong submission" im Register "General" zu finden.

 

Speichert die Einstellungen über "Speichern" (die Diskette oben rechts).

 

 

Wieder zurück im Forms Manager, aktiviert Ihr wieder die Checkbox vor eurem Formular und klickt oben in der Symbolleiste auf "Create table".

 

 

Betrachtet kurz den Aufbau der Tabelle. Der Tabellenname steht oben im Feld "Table Name". Aktiviert dann alle Spalten (Checkboxen vor dem Spaltennamen) und klickt auf "Save Table".

 

 

Die Tabelle ist nun erstellt, doch es ist noch keine Speicherung in der Tabelle aktiviert. Klickt nun wieder auf den Namen eures Formulars (bei mir ist das "sh_reservierung").

 

 

Im Register "DB Connection" setzt Ihr bei der Einstellung "Enable Data storage" das "Yes" ein und wählt dann auf den Tabellen die gerade erstellt Tabelle aus. Bei mir war das die "tsvw_chronoforms_sh_reservierung". Klickt dann oben rechts auf "Speichern".

 

 

Im Forms Manager aktiviert Ihr nun wieder die Checkbox vor eurem Formular und klickt auf "Wizard Edit" in der Symbolleiste.

 

 

Wechselt zum "Step 2" und stellt die Eigenschaft "Enabled" auf "Yes". Unten dann auf "Apply" klicken, dann oben auf die Diskette im Entwurfsbereich. Speichert das Formular wieder unter dem selben Namen.

 

 

Zurück im Forms Manager steht nun eine 1 ein der Spalte "Enabled". Damit wird die E-Mail nun versandt, wenn ein Formular ausgefüllt und versendet wird.

Klickt nun noch auf das rote Kreuz in der Zeile eures Formulars um euer Formular zu veröffentlichen.

 

 

Der grüne Haken erscheint hinter eurem Formular. Das Formular ist nun fertig. Man könnte einfach mal auf den "Link" klicken, um zu sehen, wie es wirkt. Doch möchte ich kurz Zeiten, wie man das Formular in einen Beitrag einbindet (ACHTUNG: Das ChronoForms Plugin muss dann auch installiert und aktiviert sein!).

Wechselt über das Menü "Inhalt" auf die "Beiträge". Erstellt einen neuen Beitrag.

 

 

Im Text füge ich dann die Zeile...

 

{ chronocontact}sh_reservierung{/chronocontact}

 

...ein. Achtet darauf, dass keine Leerzeichen vor- bzw. hinter die geschweiften Klammern kommen. Ich schau mir den Beitrag im Frontend an.

 

 

Nach dem Ausfüllen und Absenden des Formulars wird die E-Mail an euch gesandt. Der Inhalt der E-Mail sieht dann wie folgt aus:

 

 

Damit ist das Formular fertig.

Zugegeben. Es scheint so, als wenn das sehr viel Arbeit ist. Doch wenn man sich in HTML, JavaScript, CSS und PHP nicht so oft bewegt, sind die ChronoForms Gold wert! Auch diejenigen, die sich gut damit auskennen, wissen nach kurzer Zeit, wie viel Zeit man mit den ChronoForms sparen kann. Die ChronoForms speichern alle Ergebnisse in der gebundenen Tabelle und können E-Mails flexibel senden. Die Formulare kann man Gestalten wie man will. Dank dem Wizard fällt das auch recht leicht.

Viel Spaß beim Testen und Gestalten.

• < Zurück
• Weiter >