Tutorial and Template © 2007-2009 by

Mehr Tutorials:

Einbau der lytebox in NOF
Verschiedenfarbige Links nach Webstandard Templates NOF 7.5, 8 , 9, 10
Overlib Aktionen in NOF NetObjects Fusion - Templates, Vorlagen NOF 7.5, 8, 9, 10
PREVIEW: Einbindung Flash Player in NOF (Pop-up Fenster)

 

Deutschlands größtes NOF NetObjects Fusion - Support & Experten Forum

Deutschlands größtes NOF NetObjects Fusion - Support & Experten Forum

 

Inhaltsverzeichnis:


Kontaktformular mit Gültigkeitsprüfung
Kontaktformular mit Gültigkeitsprüfung und Buchstaben CAPTCHA
Kontaktformular mit Gültigkeitsprüfung und unsichtbarem Spamschutz
Kontaktformular mit Gültigkeitsprüfung und unsichtbarem Spamschutz und Datei Upload
 

Einfaches Kontaktformular NOF 9 & NOF 10 | NetObjects Vorlage - Template

Download Vorlage Template Kontaktformular NOF 9 | Download Vorlage Template Kontaktformular NOF 10

Support für Formular NOF User | Support rund um NetObjects Fusion im nof-forum.de

Möglichkeiten zu Verwendung der Vorlage

1) Formular als eigenständiges Fusion Projekt

Fusion starten-->Begrüßungs-(Online Ansicht)-->Site Projekte-->AUS VORLAGE öffnen
Im Dialogfenster zur .zip Datei navigieren--öffnen-->neuen Namen vergeben-->speichern

2) Formular direkt in euer Projekt einfügen
Fusion starten-->Euer Projekt öffnen-->auf der Sitemap an einer beliebigen Stelle der Site Struktur-->rechte Maustaste-->Vorlage einfügen-->zur Vorlagendatei navigieren-->öffnen--fertig. Somit ist die Vorlage direkt in Euer Projekt integriert (Die Beispiel Seite “Home” muss dann noch gelöscht werden). Der Vorteil, dabei, ist das auch die Styles für die Formatierungen der Gültigkeitsprüfung gleich mit übernommen werden.

 

Die Kontaktformulare wurden komplett überarbeitet. Das mail.php Script, welches für den Versand zuständig ist, wurde direkt in die Fusion Datei eingebunden, damit auch ungeübte User, die wenig bis kein Verständnis von Abhängigkeiten und Pfaden in Webdokumenten haben, eine Möglichkeit geboten wird, eine problemlose Einbindung vorzunehmen.

 

Vorher abklären, ob das Hostingpaket (der Webserver) das Ausführen von PHP erlaubt!

Muster Formular ansehen mit Captcha Funktion (Versende Funktion ist deaktiviert)

 

Der Aufbau der Kontakt Vorlage NOF 9 & 10

Drei Seiten werden benötigt um das Formular zu versenden.

  1. Das Formular selbst (orange - formular)
  2. Die leere Seite in welcher im HTML Code das php Script steht (rot - script_kontakt)
  3. Die Ergebnisseite welche angezeigt wird, wenn das Formular erfolgreich versendet wurde (orange - danke)

site_structure

zum Seitenanfang

 

Einstellungen auf der ”script_kontakt” Seite

Mit einem Klick auf den Button “HTML” öffnet sich das Dialogfenster für das Seiten HTML. Dort werden die individuellen Einstellungen wie auf der Abbildung gezeigt vorgenommen. Einfach die vorgegebenen Muster Adressen durch die eigene ersetzen und bei der Muster Domäne die eigene eintragen und anschliessend auf den Button ”publizieren” drücken, damit die HTML Seiten generiert werden und wir zum nächsten Schritt gehen können.

script_settings

zum Seitenanfang

 

Publizieren - Ansicht

In den Ordner ”html” wechseln, dort liegt nach der lokalen Publizierung eine Datei ”script_kontakt.html”
Jetzt einfach die Endung von ”.html” zu ”.php” abändern.(s. Screen) - Fertig!

local_publish

Achtung: In der Vorlage die zum Download bereit steht, ist dies bereits auf .php umgestellt

zum Seitenanfang

Das Formular & die Gültigkeitsprüfung

Wenn Ihr 2 Instanzen von Fusion öffnet (also 2x Fusion startet einmal mit Eurer HP und einmal das Formular), könnt Ihr die Tabelle mit dem Formular einfach in Eure Homepage ziehen. NOF übernimmt aber leider nicht den Style, der in der Vorlage eingestellt ist um die Abfrage des e-Mail Formularfeldes anzuzeigen. Das müsst Ihr manuell in Eurer Datei nachholen.

Ausser man fügt die Vorlage direkt in das Fusion Projekt ein, wie oben bei den Verwendungsmöglichkeiten beschrieben, dann werden auch die Styles mitübernommen.

Im Ausklappmenü unter ”Beschriftungsformat” könnt Ihr dem eMailfeld welches standardmässig überprüft wird ein individuelles Aussehen geben. Hintergrundfarbe, Rahmen, Schrift, was Ihr wollt. Einfach ein wenig herum probieren.
Grundsätzlich kann man jedes Feld einer Prüfung unterziehen ob es der User ausgefüllt hat oder nicht. Allerdings sollte man sich hierbei auf die wesentlichsten beschränken wie eben e-Mail oder Name...

Alle Formfelder sind in der Vorlage bereits für den richtigen Versand durch das mail.php vorbereitet.
Aber selbstverständlich ist es möglich, dass man zusätzliche Formfelder einbaut oder andere weglässt.
Auf jeden Fall sollte man sich die Beschriftungen in der Eigenschaftspalette sehr genau ansehen - wie werden Felder benannt, checkboxen, radio-buttons. etc., denn dies ist letztendlich entscheidend ob ein Formfeld versendet wird oder nicht. Natürlich könnt und (sollt/müsst) den nicht gerade attraktiven Tabellenrahmen entfernen. Er diente nur der besseren Übersichtlichkeit. ;)

Jetzt noch auf den Webserver publizieren, entweder mittels Fusion oder einem externem FTP-client wie Filezilla. - FERTIG!

 

 

new Kontaktformular mit Captcha NOF 9, 10 | NetObjects Vorlage - Template

Download Vorlage NOF 10 (inklusive captcha Dateien)
Download Vorlage NOF 9 (inklusive captcha Dateien)

Nach dem unzip bekommst du einen Ordner mit dem Namen "captcha" und eine weitere .zip Datei mit dem Namen "kontakt-captcha.zip". Das ist eine Fusion Vorlage, welche über die Vorlagen Funktion von Fusion geöffnet wird. Siehe Beschreibung am Anfang der Seite.

Wenn ihr die Vorlage direkt in Eurem Fusion Projekt öffnet (wie oben beschrieben) sind die nachfolgenden Schritte nactürlich nicht mehr notwendig.

Ich habe mich bemüht die einfachste Variante zu nehmen, damit auch wirklich jeder in der Lage ist ein Spamsicheres Formular zu erstellen.
Für den Einbau sind lediglich 3 zusätzliche Schritte in Fusion nötig: (Achtung dieser Schritt ist bereits in der Vorlage enthalten!)

1) Ein Textfeld aufziehen, markieren-->Auf HTML im Eigenschaftsfeld klicken und “Vor dem Tag” folgendes eingeben:

<img src="../captcha/captcha.php" border="0" title="Sicherheitscode">
<!--

“Nach dem Tag”:
-->

2) Ein Eingabefeld mittels des Formularwerkzeugs erstellen (Zeichebreite etwa 15) und geben diesem den Namen: “sicherheitscode”

3) Die richtigen (gewünschten) Emails und Angaben auf der Seite “script_kontakt” eintragen. Der benötigte Captcha Code ist bereits in diesem Script vorhanden.

Somit sind wir mit den Vorbereitungen innerhalb Fusions auch schon fertig. Jetzt noch den im zip file enthaltenen Ordner “captcha” komplett auf den Server spielen - fertig. Jetzt sollte Euer Captcha Formular auch schon funktionieren.

zum Seitenanfang

 

 

new Kontaktformular mit “unsichtbarem” Captcha NOF 9, 10 | NetObjects Vorlage - Template

Download Vorlage NOF 10
Download Vorlage NOF 9

Ein captcha ist sicherlich nicht die userfreundlichste Lösung um den lästigen Spam zu vermeiden.
Um eine weitere Variante aufzuzeigen habt Ihr hier die Möglichkeit ein ganz normales Formular mit einem integrierten und somit “unsichtbaren” Spamschutz herunterzuladen.

Um dies in Fusion zu realisieren sind auch hier nur einige wenige Ergänzungen notwending. (In der Vorlage sind natürlich alle Schritte bereits integriert und Ihr müst nur noch eure eigene E-Mail Adresse in das Script eintragen.)

 

Der große Unterschied zu den anderen Formularen besteht darin, dass der Code zum verschicken der Seite direkt in die Formular Seite integriert wird. Die Seite “script_kontakt” welche ansonten den Code zum Versenden enthält, gibt es hier nicht mehr.
Es wird alles direkt in der Formular Seite selbst ausgeführt. Ihr müsst lediglich in der Vorlage eure Daten austauschen - fertig.

 

Jetzt müsst Ihr die Formular Seite noch in der Site-Ansich auf die Dateiendung “php” umstellen, publizieren, hochladen, fertig. ;)

Danke an 1ngo für das Script.
http://www.1ngo.de/web/captcha-spam.html

zum Seitenanfang

 

new Kontaktformular mit “unsichtbarem” Captcha und Datei Upload

Download sendmail.php im nof-forum.de (Tutorial Board)

Das Formular unterscheidet sich nicht von den oberen. Deswegen könnt ihr auch eines der oberen verwenden, oder natürlich euer selbst gebautes. ;)
Der Unterschied besteht darin, dass wir bei diesem Script den nötigen php Code nicht direkt in Fusion eingeben, sondern
aus dem Formular auf eine php Datei verlinken.

Vorbereitung in Fusion:

Falls ihr eines der obigen Templates verwendet, geht auf die Formular Seite und löscht im “Layout-HTML” im Reiter: “Beginn der Seite” den kompletten php Code. DieSeite selbst muss aber die Dateiendung.php haben. (In den Vorlagen schon erledigt). Ansonsten wie oben beschrieben, in der Site-Ansicht umstellen.

1) Fügt dem Formular eine Upload Feld hinzu:

 upload

 

2) Markiert das Upload Feld und ändert den Namen in fileField

 

3) Markiert den “Senden” Button geht auf den 3. Reiter und gebt dort ein: sendmail.php. Zusätzlich muss wie auf der Abbildung der Code eingegeben werden.

action

Damit sind die Vorbereitungen in Fusion bereits abgeschlossen.

 

Vorbereitungen auf dem Webserver:

Erstellt im Root Verzeichnis eures Servers (also dort wo die index.html liegt) einen neuen Ordner und nennt ihn “uploads”.
Mit einem FTP Programm gebt ihr diesem Ordner die Rechte 777.

Die Datei “semdail.php” überträgt ihr in das Verzeichnis “html” also dorthin wo auch die das Kontaktformular liegt.

Änderungen im Script “sendmail.php”

Öffnet die Datei sendmail.php mit eine Webeditor oder mit notepad (Texteditor - Standard Windows).

Führe die Änderungen durch wie auf dem Screen zu sehen.

phpcode

Wenn du deine Änderungen durchgeführt hast, überträgst du die Datei in das Verzeichnis (den Ordner) “html” auf deinem Webserver. Das Script muss im gleichen Ordner liegen wie das Formular!

 

Sollten Frage hierzu auftauchen, dann schreibt mir einfach im Forum
Viel Spass damit

Euer Panda ;)