Schritt 1:  Grundaufbau des Formulars anlegen
Schritt 2:  Formularfeld-Beschriftung den Formularfeldern zuordnen
Schritt 3:  Scriptdateien als Assets einbinden
Schritt 4:  Formularseite auf php umstellen
Schritt 5:  Verlinken und Includieren der Scriptdateien
Schritt 6:  Anpassen des Mail-Scripts
Schritt 7:  Grundformatierung der Formularfelder
Schritt 8:  Abfragereihenfolge festlegen
Schritt 9:  Pflichtfeldprüfung einstellen
 

Ein spamsicheres Formular mit NetObjects Fusion und SwissKnife-SecureContactForm

Immer öfter kommt die Frage nach einem eigenen Kontaktformular, welches vor allem spamsicher sein soll. Unser lieber „SwissKnife” hat sich deshalb die Mühe gemacht, bombensichere Scripts zu entwickeln und ich erläutere nun im folgenden Tutorial, wie Ihr diese mit Euren NOF-Formular-Bausteinen kombinieren und ein funktionstüchtiges spamsicheres Formular erstellen könnt. Das Tutorial ist in verschiedene Schritte aufgegliedert, damit User mit umfangreichen Vorkenntnissen nicht bei „Adam und Eva” beginnen müssen.
Los gehts!

Zuerst erstellen wir uns eine Tabelle. Dazu klicken wir in der Symbolleiste auf das Tabellen-Icon und klicken im Layout an die Stelle, an welcher die Tabelle erscheinen soll. Es öffnet sich ein Fenster, in welchem wir die erforderlichen Angaben eintragen.
Für mein Beispielformular benötige ich 12 Zeilen und 2 Spalten. Den Textabstand setze ich auf „0” und den Zellenabstand auf „3”.
Die Breitenangabe beträgt 150px und die Höhe lasse ich auf „Automatisch” stehen. Nachdem alle Eingaben gemacht sind, klickt Ihr den OK-Button.

1

In Eurem Layout erscheint nun die gewünschte Tabelle und wir können beginnen, die nötigen Formular-Felder einzufügen. Sollten diese nicht in Eurer Symbolleiste sichtbar sein, könnt Ihr sie aufrufen, indem Ihr dem folgenden Screenshot folgt.

2

Mit einem einfachen Klick auf die Tabelle, markiert Ihr diese, wobei die Tabelle einen blauen Rahmen bekommen muss. Nun stellt Ihr in der Eigenschaftenpalette den Rahmen auf „0” und setzt ein Häkchen vor „Tabelle ist ein Formular”.

3

Im nächsten Schritt fügen wir nun die Formularfeldbeschriftung ein. Hierzu klickt Ihr einmal auf das Icon für die Formularfeldbe- schriftung und zieht in der zweiten Zeile der Linken Spalte ein Beschriftungsfeld in der gewünschten Breite auf. Mit einem Rechtsklick auf dieses Feld und der Auswahl „kopieren” könnt Ihr das Beschriftungsfeld in Eure Zwischenablage kopieren.

3.1

Mit einem Doppelklick in die erste Spalte der nächsten Zeile erscheint ein blinkender Cursor. Nun könnt Ihr mit einem Rechtsklick in die Zelle und der Auswahl „Einfügen” das kopierte Feld in diese Zelle einfügen. Alternativ könnt Ihr das Einfügen auch mit der Tastenkombination Strg+V vornehmen. Diesen Vorgang wiederholt Ihr bis hin zur vorletzten Zeile. Die letzte Formularzeile ist für den Senden-Button und benötigt deshalb kein Beschriftungs-Feld.

3.2

Mit einem Doppelklick in das erste Beschriftungsfeld aktiviert Ihr einen Cursor. Wenn dieser blinkt, könnt Ihr die Beschriftung für das erste Formularfeld eintragen. In meinem Beispiel ist es die Anrede. So gebt Ihr nacheinander in alle Beschriftungsfelder die jeweilige Beschriftung ein.

4

Nun beginnen wir mit dem Einfügen der Eingabefelder. Für die Anrede fügen wir ein Auswahlfeld in die zweite Spalte der zweiten Zeile. Hierzu klicken wir in der Symbolleiste mit einem einfachen Klick auf das Icon für das Auswahlfeld und mit einem zweiten Klick in die gewünschte Tabellenzelle (bitte nur klicken, das Feld nicht in die Breite ziehen). Über die Eigenschaftenpalette vergeben wir nun zuerst einen Namen für das Formularfeld. Der Name darf keine Umlaute oder Sonderzeichen enthalten. (ä, ü, ö, ß...)
Im Anschluss klickt Ihr den Plus-Button auf der Eigenschaftenpalette. Es öffnet sich ein kleines Fenster, in welches Ihr unter Name „Herr” und unter Wert nochmals „Herr”eingebt. Die Eingabe bestätigt Ihr mit einem Klick auf den OK-Button.
Für eine weitere Anredeform klickt Ihr ein weiteres Mal den Plus-Button, gebt statt 2x „Herr” nun 2x „Frau” ein und bestätigt wieder mit OK. Der Vorgang wird wiederholt bis alle gewünschten Anredeformen eingetragen sind.

5

Als nächstes fügen wir für den Vornamen ein einfaches Eingabefeld ein. Hierzu klickt Ihr einmal das entsprechende Icon in der Symbolleiste an und macht einen zweiten Klick in die Tabellenzelle Eurer Wahl. Bitte auch hier nur klicken und das Feld nicht in die Breite ziehen. Um die Größe der Felder kümmern wir uns später.
Wenn das Feld in der Tabelle erscheint, vergebt Ihr auch für dieses Feld den entsprechenden Namen (keine Umlaute...).
Erhöht am besten auch gleich die maximale Zeichenzahl, damit Eure Formulareingaben später nicht abgeschnitten werden.

6

Für den Namen wiederholt Ihr den Vorgang und fügt auf beschriebene Weise ein weiteres Eingabefeld in der entsprechenden Zelle ein. Für die Zeile Straße/Nr. benötigen wir zwei nebeneinander platzierte Eingabefelder. Zunächst fügt Ihr das erste Eingabefeld auf die bereits beschriebene Art ein und aktiviert auf der Eigenschaftenpalette den Reiter für die Ausrichtung. Dort wählt Ihr den Punkt „Links umbrechen” aus. Denkt bitte auch bei diesem Feld daran, den Namen zu vergeben und die maximale Zeichenzahl zu erhöhen.

7

Im Anschluss klickt Ihr in der Symbolleiste ein weiteres Mal das Icon für das Eingabefeld an und klickt danach direkt neben das bereits vorhandene Eingabefeld.

8

Auch für dieses Feld aktiviert Ihr wieder den Reiter für die Ausrichtung und setzt das Pünktchen wieder bei „links umbrechen”  (Namen + max. Zeichenzahl).

9

In der Zeile PLZ/Ort benötigen wir wieder zwei nebeneinander liegende Felder, in den Zeilen E-Mail und Telefon habe ich mich für je 1 Eingabefeld entschieden und in der Zeile Kontakt ein weiteres Auswahlfeld mit den Optionen: Post, E-Mail und Telefon eingefügt.

Für die Zeile Nachricht benötigen wir nun ein mehrzeiliges Eingabefeld. Hierzu klickt Ihr in der Symbolleiste das Icon für das Mehrzeilige Eingabefeld an und im Anschluss klickt Ihr in die entsprechende Tabellenzelle. Über die Eigenschaftenpalette vergebt Ihr wieder den Namen und legt die sichtbare Höhe fest. Ich habe mich in meinem Beispiel für einen Wert von „10” entschieden.

10

Nun fehlt uns nur noch der Button zum vollständigen Formular. Der Button wird auf die selbe Weise eingefügt wie alle anderen Formularbausteine. Einen Klick auf das entsprechende Icon und einen in die gewünschte Zelle und schon ist der Button eingefügt.
In der Eigenschaftenpalette unter „Wert” könnt Ihr den Text eingeben, der auf Eurem Button angezeigt werden soll.

11

Nun benötigen wir noch einige grundsätzliche Formulareinstellungen und das erste Kapitel ist beendet. Hierzu aktiviert Ihr zunächst mal die Formular-Eigenschaftenpalette indem Ihr einmal in die Formularkennzeichnung am oberen linken Tabellenrand klickt.
In der Formulareigenschaften gebt Ihr nun unter „Name”  „secure” ein (Wichtig!). Unter „Aktion” tragt Ihr „kontakt.php” ein (Wichtig! Die Formularseite muss unbedingt „kontakt” heißen!). Bei „Methode” muss „Verschicken” aktiviert sein.
Zusätzlich klickt Ihr am unteren Rand auf den Plus-Button und gebt im sich öffnenden Fenster unter Name:

action

und unter Wert:

send


ein. Dann bestätigt Ihr mit OK. Im Anschluss klickt Ihr ein zweites Mal den Plus-Button und tragt unter Name:

zeit


und unter Wert:

<?=time();?>


ein. Der Vorgang wird wieder mit einem Klick auf OK abgeschlossen.

12

Das wars auch schon in diesem Abschnitt, hier geht es weiter.  Sollten Fragen auftauchen, so können diese gern hier gestellt werden.
Der Entwickler des Scripts steht euch bei Problemen persönlich zur Seite.

Aber auch bei allen anderen Fragen und Belangen rund um NetObjects Fusion stehen wir euch in unserem NOF-Forum mit Rat und Tat zur Seite.

Das könnte dich auch interessieren:

Swissknife SecureContactForm in bestehendes Formular einbinden
verschiedene kostenlose Formular-Vorlagen für NOF 9-12 für Mitglieder der NOF-Community

Informationen und Demos zu Swissknife for NOF - die kostenlosen SwissKnife-Komponenten die das Leben leichter machen
Swissknife for NOF - Installationsanleitung
Kostenloser Download der SwissKnife for NOF Komponenten für NetObjects Fusion