Anzeige

Anleitung - Individuelles Kontaktformular mit Seblod unter Joomla erstellen

1 1 1 1 1 Bewertung 0.00 (0 Stimmen)
In dieser Anleitung wird Ihnen ausführlich und Schritt für Schritt gezeigt, wie Sie ein individuelles Kontaktformular mit Hilfe von Seblod unter Joomla bauen können. Die Anleitung eignet sich auch für den Einstieg in die Materie „Seblod“, da hierbei auch viele grundlegende Dinge angeschnitten werden.

Anzeige

Tipps zum Hosting für Joomla mit Seblod

Um Joomla mit Seblod problemlos nutzen zu können, sollte Ihr Hosting Paket unbedingt die Möglichkeit bieten, die php.ini Einstellungen zu verändern, wie in dieser Anleitung beschrieben. Achten Sie auch darauf, dass das php_memory_limit nicht geringer als 64 MB ist, es sollten besser 128 MB oder mehr zur Verfügung stehen.

Schritt 1: App Folder erstellen

Voraussetzung für diesen und alle weiteren Schritte ist natürlich, dass die Erweiterung „Seblod“ in Ihrer Joomla Installation bereits installiert ist.

Um das Kontaktformular zu erstellen, sollten Sie zuerst einen App Folder, also einen Ordner für Ihr Kontaktformular erstellen. Gehen Sie dazu auf das Menü „Construction“ und wählen anschließend den Punkt „Add New“ unter App Folders, wie auf der folgenden Abbildung zu sehen.

Neuen Appfolder erstellen

Nun öffnet sich folgende Seite. Geben Sie als Titel am besten „Kontaktformular“ ein, wie dies auch auf dem nachfolgenden Screenshot zu sehen ist. Wählen Sie nun bei „App Root“ und „Featured“ jeweils „yes“ aus, dass Sie nicht in den Möglichkeiten eingeschränkt werden. Damit Sie Ihre Anwendung immer wieder schnell erkennen können, wählen Sie noch eine kräftige Farbe für den Hintergrund (Color) und eine darauf gut sichtbare Farbe für die Schrift (Character Color) aus. Als Zeichen (Character) können Sie maximal 2 Buchstaben benutzen, in diesem Fall wurde „KF“ für Kontaktformular eingetragen. Speichern Sie nun diese Maske mit dem Button „Speichern & Schließen“.

Appfolder Kontaktformular anlegen

Unter dem Menüpunkt Construction/App Folders können Sie nun Ihren leeren Ordner betrachten. Später sehen Sie hier beispielsweise wie viele Felder in dem Ordner enthalten sind.

Der leere Appfolder - Kontaktformular

Schritt 2: Formular erstellen

Im zweiten Schritt müssen Sie nun einen frischen Form & Content Type erstellen, dies erledigen Sie am schnellsten, indem Sie auf „Construction/Forms & Content Types/Add New“ klicken, wie auf dem nächsten Screenshot zu sehen.

Neuen Form & Content Type erstellen

Nun erscheint erstmals die Maske des Form & Content Types, diese werden Sie noch sehr häufig zu Gesicht bekommen, denn hierin spielt sich für das Kontaktformular fast alles ab. Als erstes wählen Sie nun den zuvor erstellten App Folder „Kontaktformular“ aus, damit später die neuen Felder immer darin gespeichert werden und Sie immer in diesem Ordner starten, wenn Sie später diese Maske zum bearbeiten des Kontaktformulars aufrufen. Als nächstes vergeben Sie diesem Form & Content Type noch einen Namen, in dem Beispiel ist dies „Kontakt“. Jetzt ist es sehr wichtig, dass Sie ohne weitere Änderungen den „Speichern & Schließen“ Button klicken, damit Seblod die Grundeinstellungen auch übernehmen kann.

Grundkonfiguration - Form & Content Type

Jetzt sehen Sie die Übersicht der Form & Content Types, bei der auch Ihr Kontaktformular dabei ist. Natürlich ist dieser Eintrag jetzt noch leer, dies sollten Sie nun aber ändern, klicken Sie dazu bitte auf den Titel „Kontakt“, damit sich die Maske von eben wieder öffnet.

Form & Content Type wurde erstellt

Schritt 3: Erstes Feld erstellen und im Seblod Template zuordnen

Auf der linken Seite sehen Sie nun die Template Positionen des Seblod Templates (Mainbody, Topbody, Bottombody u.s.w). Auf der rechten Seite der einzelnen Positionen findet sich jeweils ein Radiobutton (Kreis zum auswählen), ein neues Feld wird automatisch nach Erstellung der ausgewählten Position zugeordnet. Im Moment wird also alles unter der gewählten Position „Mainbody“ einsortiert. Natürlich kann man die Felder auch nachträglich verschieben, dennoch kann man so ggf. etwas Zeit sparen.

Hinweis: Das Seblod Template ersetzt nicht das Joomla Template! Das Seblod Template kommt nur innerhalb einer Joomla Template Position zum Einsatz, kann also nur Inhalte innerhalb der jeweiligen Position verändern.

Die Reiter „Views“ und „Options“ oberhalb der Positionen zeigen an, wo man sich gerade in dem Form & Content Type befindet. Aktuell ist dies das „Formular für den Administrationsbereich“ (Admin Form) und dort befinden Sie sich in der Option „Felder“ (Fields), aber dazu sehen Sie später noch mehr.

Auf der rechten Seite neben den Positionen sehen Sie die gelbe Markierung, diese Zeigt an, dass Sie sich zur Zeit zur Auswahl der Felder in dem App Folder „Kontaktformular“ befinden. Man kann hier auch andere Ordner auswählen und Felder von dort einbinden, dies wird hier allerdings nicht weiter erläutert. Wichtig ist hier erstmal die rote Markierung mit dem großen Plus. Hierüber können Sie nun direkt Felder erstellen, ohne dafür in den das Menü „Fields“ wechseln zu müssen.

Neues Feld erstellen - Plus klicken

Klicken Sie nun also auf das erwähnte große Plus-Zeichen. Nun öffnet sich ein relativ kleines Fenster für die Felderstellung. In dem Beispiel wurde nun zuerst das Feld für die Anrede erstellt. Als erstes sollten Sie den Title (1.) für Ihr Feld erstellen, daraus wird dann automatisch der Name des Feldes generiert. Natürlich kann man diesen auch noch anpassen, das führt aber häufig dazu, Felder später immer mal wieder öffnen zu müssen, um den Namen für andere Zwecke heraus zu suchen. Darum wurde hier ein eindeutiges Namensschema bevorzugt, zusammengesetzt aus der einfachen Bezeichnung und in diesem Fall dem Form & Content Type Namen. So kommt man auch nicht durcheinander, wenn man sehr viele Formulare gebaut hat. Der Feldname lautet somit in diesem Fall „anrede_kontakt“.

Wählen Sie nun für die Anrede am besten eine Auswahlbox (2.) als Typ, in diesem Fall wurde die Auswahlbox „Simple“ gewählt.

Nun verändert sich der Bereich „Construction“, falls Sie bereits etwas bei „Label“ eingetragen hatten, ist dies nun wieder weg. Tragen Sie also jetzt Ihr gewünschtes Label (3.) ein, dies ist die Voreinstellung des Feldes für die Beschriftung des Feldes, die später zum Beispiel neben dem Feld zu sehen ist. Diese kann aber auf der Templateposition überschrieben werden, nehmen Sie das Feld z. B. im Content- Bereich auf, wird hier wieder der hier eingetragene Wert des Labels voreingestellt. Im Beispiel wurde hier „Anrede“ eingetragen.

Bei 4. „Select Label“ tragen Sie den Text ein, den Sie in der Auswahlbox lesen möchten, wenn keine Auswahl getroffen wurde. In diesem Fall wurde „Bitte auswählen“ eingetragen, damit der Nutzer gleich weiß, was er tun muss.

Unter 5. können Sie festlegen, welche Werte zur Auswahl stehen sollen. Über das grüne Plus-Symbol können weitere Optionen hinzugefügt werden, das rote Minus-Symbol löscht Optionen und der blaue Kreis ermöglicht es die Optionen zu verschieben, um die Reihenfolge zu ändern. Im Beispiel wurde „Herr“ und „Frau“ als Optionen hinzugefügt, hinten angefügt finden Sie hier noch „=0“ und „=1“ dies ist zwar in diesem Fall nicht zwingend nötig, ist aber ansonsten in der Regel sinnvoll. Wenn Sie die Daten in der Datenbank speichern würden, würden so die Werte mit „0“ statt „Herr“ und „1“ statt „Frau“ gespeichert werden. Auch an anderen Stellen in Seblod kann so, mit den Werten nach dem Gleichheitszeichen, gearbeitet werden.

Simples Auswahlfeld erstellen

Da es bei einem Kontaktformular im Grunde nicht nötig ist, Daten in der Datenbank zu speichern, sollte hier bei allen Feldern unter „Storage“ „None“ gewählt werden. Man könnte die Daten je nach Vorhaben zwar auch in der Datenbank speichern, da die Speicherung unter Seblod ein komplexes Thema ist und die Speicherung in dieser Anleitung nicht verwendet wird, wird an dieser Stelle nicht weiter darauf eingegangen. Klicken Sie nun auf „Save & Close“ (6.).

Speicherung in der Datenbank deaktivieren

Nun sehen Sie das neue Feld an der markierten Position, hier „Mainbody“. Da Seblod oftmals Probleme macht, wenn im Adminformular kein Eintrag existiert, sollte hier zumindest ein Feld auf einer Templateposition gespeichert werden. Dies ist eigentlich prinzipiell bei einem Kontaktformular nicht nötig, da dieses ja nicht im Backend (Administratorbereich), sondern im Frontend (Nutzer / Gästebereich) der Joomla Website ausgefüllt wird. Klicken Sie nun also „Speichern“.

Um das Feld nun auch im Frontend Bereich einzufügen wechseln Sie anschließend bei „Views“ auf den Reiter „Site Form“.

Feld wurde erstellt und zugeordnet

In der Site Form wurde das neue Feld „Anrede Kontakt“ noch nicht im Seblod Template einsortiert und befindet sich, wie auf der folgenden Abbildung zu sehen, noch im App Folder „Kontaktformular“.

Feld im Ordner Kontaktformular

Um das Feld „Anrede Kontakt“ einer Seblod Position zuzuordnen, schieben Sie das Feld per Drag & Drop mit der Maus von dem Ordner „Kontaktformular“ in die gewünschte Position oder klicken Sie auf den grauen Pfeil, um das Feld zur gewählten Position zu schieben. Achten Sie darauf, dass die Position „Mainbody“ in jedem Fall belegt wird, ansonsten kann es passieren, dass das Feld später nicht angezeigt wird.

Feld auf Position Mainbody schieben

Alle weiteren Felder erstellen Sie später für das Kontaktformular immer unter dem Reiter „Site Form“. Zuerst erstellen wir nun aber den Menüpunkt „Kontakt“ im Joomla Menü, damit wir die Entwicklung im Fronend parallel begutachten können.

Schritt 4: Joomla Menüpunkt für das Seblod Kontaktformular erstellen

Je nach verwendetem Template müssen Sie zuvor einen Menüpunkt (hier Footer Menü) anlegen und ggf. ein Modul zuordnen und dies auf die für das Template richtige Position setzten. Das wird hier in der Anleitung aber nicht weiter beschrieben, da es sich um einen Joomla Standard handelt. Im Zweifel nutzen Sie einfach das Main Menü.

Menüeintrag im Footer erstellen

Nachdem Sie auf „Neuer Menüeintrag“ geklickt haben, erscheint die nachfolgende Maske. Als erstes vergeben Sie einen sinnvollen Menütitel in diesem Beispiel „Kontakt“, damit bestimmen Sie, wie der Link im Frontend betitelt ist.

Menüeintrag Kontakt

Beim Klick auf Auswählen (2.) in der vorherigen Abbildung öffnet sich das Menü der nachfolgenden Abbildung. Wählen Sie hier nun unter dem Punkt „Seblod 3.x“ den Punkt „Form“ aus. Anschließend erscheint nach einer kurzen Denksekunde die Möglichkeit, den zuvor erstellten Form & Content Type (3.) auszuwählen, dies ist hier im Beispiel „Kontakt“. Klicken Sie anschließend auf den Button „Speichern & Schließen“.

Seblod Form wählen

Der Menüeintrag wurde gespeichert.

Menüeintrag wurde gespeichert

Wenn Sie nun ins Frontend wechseln und Ihren neuen Menüeintrag „Kontakt“ anklicken, werden Sie feststellen, dass Ihnen die Fehlermeldung „You are not allowed to access this resource“ ausgegeben wird. Das liegt daran, dass Sie noch keine Rechte für das Erstellen von Inhalten für den öffentlichen Benutzer, für dieses Formular gesetzt haben. In diesem Fall gibt Joomla sogar noch die Login Maske aus, sobald die Rechte richtig gesetzt wurden, passiert dies nicht mehr.

Fehler durch fehlende Nutzerrechte

Schritt 5: Öffentlichen Benutzern das Erstellen von Inhalten im Kontaktformular erlauben

Da natürlich nicht nur registrierte Nutzer Zugriff auf das Kontaktformular haben sollen, sondern vor allem auch die Gäste der Website, müssen Sie an dieser Stelle die Nutzerrechte entsprechend anpassen.

Begeben Sie sich dazu wieder in den Form & Content Type „Kontakt“, den Sie zuvor erstellt haben. Den Form & Content Type Manager erreichen Sie über den Menüpunkt „Construction/Forms & Content Types“. Um direkt zum Frontend Formular zu gelangen, klicken Sie bei dem Eintrag „Kontakt“ auf die Zahl in der Spalte „Site Form“, hier müsste nun eine „1“ für ein aktives Feld stehen.

Direkt zum Reiter - Site Form

Im oberen Bereich Ihres Form & Content Types finden Sie einen kleinen hellblauen Pfeil, der nach unten zeigt. Klicken Sie diesen bitte an.

Erweiterte Optionen - Form & Content Type

Nach dem Klick auf den Pfeil erscheint eine Leiste, in der man einige Einstellungen vornehmen kann, darunter auch die Rechte (Permissions). Um die Rechte zu bearbeiten, klicken Sie bitte auf den Button „Permissions“.

Seblod Formular - Rechte

Achten Sie darauf, dass sie sich auf der linken Seite dieser Maske auf dem Punkt „Öffentlich“ befinden. Hier wählen Sie nun die Einstellung „Erlaubt“ bei dem Punkt „Erstellen“ und klicken anschließend „Save & Close“ um die Einstellung zu übernehmen.

Erstellen für Öffentlich erlauben

Wirksam übernommen wird die Einstellung allerdings erst, wenn Sie auch Ihren „Form & Content Type“ noch einmal speichern.

Nach Änderung der Rechte - Form & Content Type speichern

So sehen die Rechte nach dem Speichern der Änderung aus, wenn Sie die Maske „Permissions“ nun noch einmal aufrufen. Sie sollten im Hinterkopf haben, dass die Rechte nun auch auf andere Benutzergruppen, wie beispielsweise „Guest“ und „Registriert“ vererbt wurden.

Rechte nach dem Speichern

Im Frontend kann das Formular nun aufgerufen werden. Wie auf der nächsten Abbildung zu sehen, ist das vorhin erstellte Auswahlfeld „Anrede“ schon nutzbar.

Erstes Zwischenergebnis

Schritt 6: Restliche Felder in Seblod erstellen und zuordnen

Hier knüpfen wir nun wieder an Schritt 3 an und erstellen die restlichen Felder, um das Kontaktformular zu vervollständigen. Begeben Sie sich dazu wieder in den Form & Content Type „Kontakt“ und dort auf den Reiter „Site Form“, falls Sie sich hier nicht mehr befinden.

Schritt 6.1: Textfelder erstellen

Klicken Sie nun wieder auf das große Plus-Zeichen auf der rechten Seite, um ein neues Feld im App Folder Kontaktformular zu erstellen.

Neues Feld erstellen

Als erstes erstellen Sie nun am Besten alle notwendigen Textfelder, denn das Vorgehen ist hier identisch, so dass Sie nicht umdenken müssen. Nachdem Sie nun auf das Plus-Zeichen geklickt haben, öffnet sich die Ihnen mittlerweile bekannte Maske für die Feld Erstellung. Als erstes erstellen Sie nun das Feld für den Vornamen. Gehen Sie dazu nach dem selben Namensschema vor, wie zuvor, hier im Beispiel ist dies nun beim Titel „Vorname Kontakt“ und als Label „Vorname“. Die beiden Label prüfen Sie lediglich, ob diese auf „Type - Text“ für Textfeld bzw. „Storage – None“ für keine Speicherung eingestellt sind, falls nicht, stellen Sie diese so ein. Wie bereits erwähnt, ist für das Kontaktformular keine Speicherung in der Datenbank nötig, dies gilt für alle Felder in diesem Form & Content Type.

Hinweis: Wenn Sie den Button „Save & Close“ klicken, speichert das System das Feld ab und sortiert das neue Feld in die markierte Template Position ein. Wenn Sie nun ohne zu speichern den Form & Content Type schließen würden, wäre das Feld zwar im Ordner „Kontaktformular“ vorhanden, wäre aber nicht mehr in eine Template Position einsortiert, evtl. dort getätigte Einstellungen wären dann ebenfalls weg. Klicken Sie also unbedingt zwischendurch ab und an mal den Speichern-Button in Ihrem Form & Content Type.

Textfeld erstellen

Auf die selbe Weise, wie für das Feld für den Vornamen, erstellen Sie nun die Felder für: Den Nachnamen, die E-Mail und den Betreff.

Nachdem Sie die Textfelder erstellt haben, sollte es bei Ihnen nun aussehen, wie auf dem nachfolgenden Screenshot. Sie sollten wie bereits erwähnt unbedingt zwischenspeichern.

Hinweis: Hinter Ihren Feldern sehen Sie einen Vermerk in Klammern und grauer Schrift (gelbe Markierungen), hier erfahren Sie auf den ersten Blick, um welchen Typ es sich bei dem entsprechenden Feld handelt. Bei der Anrede ist dies ein simples Auswahlfeld und bei den bisherigen anderen Feldern der Typ „Text“, wie Sie gerade ausgewählt haben.

Felder mit dem Typ - Text - erstellt - Ergebnis

Im Frontend sieht das Kontaktformular nun so aus.

Frontend - Ergebnis nach Textfelderstellung

Schritt 6.2: Textarea Feld erstellen

Klicken Sie nun wieder auf das große Plus-Zeichen um ein neues Feld zu erstellen.

Bei einem Textarea Feld ist einiges anders, als bei einem Textfeld. Wählen Sie als erstes den Typ „Textarea“ aus, danach benennen Sie den Titel nach gewohntem Schema und in der Konstruktion benennen Sie noch das Label. Anschließend können Sie bei Columns die Breite der Textarea bestimmen, hier „60“ für 60 Spalten Breite. Die Höhenangabe wird in Zeilen (Rows) angegeben, hier im Beispiel wurden „8“ gewählt. Damit der Benutzer am Ende nicht nur 255 Zeichen als Mitteilung eintragen kann, können Sie bei „Maxlength“ noch das gewünschte Zeichenlimit angeben, hier „5000“. Klicken Sie zum speichern wieder auf „Save & Close“.

Textarea Feld erstellen

So sieht nun das Zwischenergebnis aus. Um einzelne Felder im Nachhinein zu bearbeiten, klicken Sie auf das Bleistiftsymbol vor dem jeweiligen Feld.

So können Sie Felder bearbeiten

So sieht es nun im Frontend aus.

Schritt 6.3: Einbau eines Captchas zum Schutz vor Bots (Optional)

Um sich vor Spammails zu schützen, empfiehlt es sich, auch bei einem Kontaktformular ein Captcha zu verwenden. Allerdings ist dafür eine Registrierung bei Seblod.com notwendig, damit man sich die Erweiterung für Seblod herunterladen kann. Seblod bietet mehrere Captchas an, hier wurde das kostenlose „Captcha Math“ verwendet. Bei diesem Captcha wird dem Benutzer eine kleine Rechenaufgabe gestellt, die er richtig gelöst haben muss, damit das Formular abgesendet wird.

Nachdem Sie die Erweiterung von der offiziellen Seblod Seite heruntergeladen haben, installieren Sie diese, genau wie alle anderen Erweiterungen unter Joomla. Gehen Sie im Menü auf „Erweiterungen/Verwalten/installieren“ und schieben Sie die Datei in den entsprechenden Ablagebereich bzw. wählen Sie die Datei dort aus (siehe folgende Abbildung).

Erweiterung installieren

Gehen Sie nun wieder zurück in den Form & Content Type „Kontakt“ auf den Reiter „Site Form“ um das Captcha Feld zu erstellen. Dazu klicken Sie nun wieder auf das große Plus-Zeichen.

Wie auf der folgenden Abbildung zu sehen, ist nun der neue Typ „Captcha – Math“ vorhanden. Sollte dies nicht der Fall sein, begeben Sie sich unter den Joomla Menüpunkt „Erweiterungen/Plugins“ und prüfen Sie, ob das Plugin aktiviert ist.

Captcha Math jetzt verfügbar

Für dieses Feld können Sie in der Konstruktion lediglich das Label benennen und die Größe der Textbox aussuchen, mehr Optionen gibt es hier nicht.

Captcha Math Feld erstellen

Schritt 6.4: Absenden-Button erstellen

Damit der Gast bzw. Nutzer das Formular absenden kann, benötigen Sie natürlich noch einen Button zum absenden. Wählen Sie den Typ „Submit“ aus, vergeben Sie den Titel Namen und benennen Sie das Label. Alternativ können Sie, um das ganze etwas aufzuhübschen noch ein Icon (in diesem Fall „mail“) vor oder hinter den das Button Label setzen (in diesem Fall vor das Label „Prepend“).

Absenden Button erstellen

Im Frontend sieht das Kontaktformular bereits fertig aus. Allerdings gibt es noch einiges zu tun, das Formular hat so noch keine Funktionalität, niemand würde eine Nachricht darüber erhalten, dass das Formular ausgefüllt und abgesendet wurde. Da die Daten auch nicht in der Datenbank gespeichert werden, gäbe es im Grunde keine Möglichkeit festzustellen, dass das Formular abgesendet wurde. Zudem fehlen noch einige andere wichtige Dinge.

Zwischenergebnis im Frontend - Nach Erstellung des Absendebuttons

Schritt 6.5: Unsichtbare E-Mail Felder erstellen um Formulardaten zu versenden

Damit die eingetragenen Daten nicht ins leere gehen, werden diese per Mail versendet. Eine Umfangreiche Anleitung zum E-Mail Feld finden Sie unter dem Punkt Ressources/Manuals bei Seblod.com, die Informationen hierzu sind allerdings auf Englisch.

Schritt 6.5.1: E-Mail Felder für den Seitenbetreiber und den Besucher erstellen

Gehen Sie nun wieder auf das Plus-Zeichen, um ein neues Feld zu erstellen.

Im ersten Punkt (1.) wählen Sie den Feld-Typ „Email“ und vergeben einen eindeutigen Titel, damit Sie auch später noch genau wissen, dass dieses E-Mail Feld für den Versand der Mails an den Betreiber (in dem Fall Sie) zuständig ist. Vergeben Sie nun wie gewohnt noch den Namen für das Label.

Ab jetzt wird es spannend. Im 2. Punkt können Sie nun angeben, in welchen Fällen eine Mail von diesem Feld versendet werden soll, als Standard steht hier „Never“ für niemals, stellen Sie hier „Always“ für immer ein, damit Seblod die Mails versenden kann.

Im 3. Punkt können Sie festlegen, welche Mail als Absender eingetragen werden soll. Wenn Sie hier bei „From“ „E-Mail“ wählen, können Sie eine beliebige Mail-Adresse im rechten Feld eintragen, die als Absender angezeigt wird. Im Beispiel wurde „Field“ gewählt, dies ermöglicht Ihnen beispielsweise den Feldnamen des vorhin angelegten E-Mail Feldes anzugeben, hier „email_kontakt“. So wird als Absender automatisch die Mail-Adresse verwendet, die der Nutzer in das Formular eingetragen hat. In Ihrem E-Mailprogramm können Sie so auch direkt an diese Adresse antworten.

Sie können hier auf diese Weise grundlegend jedes Feld ansprechen, die entsprechenden Namen wurden bei der Vergabe des jeweiligen Feld Titels in der Regel automatisch daraus generiert und finden sich jeweils in dem Feld „Name“ des jeweiligen Feldes.

Beim 4. Punkt wurde in diesem Beispiel bei „From Name“ „Name“ ausgewählt, dadurch können Sie im Feld auf der rechten Seite nun einen beliebigen Text verwenden, der als Absendername in der Mail angezeigt wird. Wählt man hier „Field“ aus, kann man wie bei Punkt 3 ebenfalls einen Feldnamen eintragen, jedoch können nicht zwei oder mehrere Feldnamen angegeben werden um beispielsweise den Vor- und Zunamen aus dem Formular als Absendername zu verwenden. Dies könnte man aber ggf. durch das Verketten von Feldinhalten in einem weiteren Feld realisieren, welches man dann an dieser Stelle angibt.

Beim 5. Punkt wurde als Betreff das Feld „betreff_kontakt“ angegeben, damit hier der Text aus dem Formular für den Betreff übernommen wird. Hier gibt es einen Unterschied zu der oben beschriebenen Angabe des Feldnamens. Dieser muss von #-Zeichen umgeben (#betreff_kontakt#) sein, damit Seblod weiß, dass es sich hier nicht um einfach Text, sondern um einen Feldnamen handelt. Dafür können an dieser Stelle mehrere Feldangaben mit #-Zeichen getätigt werden und mit einfachem Text kombiniert werden.

Unter Punkt 6 müssen Sie noch angeben, wohin die Mail gesendet werden soll. Dabei gibt es auch wieder mehrere Möglichkeiten. Im Beispiel wird die Mail nun an den Administrator gesendet. Dafür wurde der Administrator (in diesem Fall heißt dieser „seblod“) mit einem Klick markiert, sobald dieser eine Markierung hat, wird dieser entsprechend mit den Mails versorgt. Wenn dies nicht gewünscht ist, können Sie mit Strg + Klick die Markierung wieder auflösen.

Prüfen Sie nun einmal, ob hier die Speicherung auf „None“ steht, bevor die fortfahren. Da für die Konfiguration des E-Mailfeldes schon mal ein Paar Minuten vergehen, sollten Sie nun mit dem Knopf „Save & Close“ einmal speichern, um zu verhindern, dass Sie Ihre bisherige Arbeit an diesem Feld durch einen eventuellen Timeout verlieren. Speichern Sie anschließend aus diesem Grunde auch noch einmal den Form & Content Type ab.

Erstellung - E-Mail Feld - an den Seitenbetreiber

Anschließend öffnen Sie nun über das Bleistiftsymbol, neben dem frisch erstellten E-Mail Feld, die Maske erneut

E-Mail Feld für den Seitenbetreiber bearbeiten

und begeben Sie sich auf den Button „Editor“ neben „Message“.

E-Mail - Message - Editorbutton

Nun erscheint eine neue kleine Maske, in der Sie die Nachricht eingeben können, die Sie per Mail als Betreiber erhalten möchten. In Rautezeichen (#) können die Feldinhalte, die der Nutzer eingetragen hat, abgefragt werden. Dazu muss jeweils zwischen zwei Rautezeichen ein Feldname stehen, wie oben bereits für Betreff beschrieben und wie auf der nachfolgenden Abbildung gezeigt. Diese Bereiche werden dann von dem Feldinhalt vollständig ersetzt, sollte ein Feld leer sein, steht in der Mail ebenfalls nichts. Zur Demonstration wurden drei der vier verwendeten Felder formatiert, der Inhalt der Mail wird nun ebenfalls diese Formatierung erhalten, da HTML als Format im E-Mailfeld angegeben wurde (Standard).

Editor - Nachricht an den Seitenbetreiber

Ziehen Sie das Feld mit der Maus und evtl. zusätzlich mit Hilfe des Mausrades auf die Position „Hidden“ und speichern Sie Ihren Form & Content Type. Dadurch wird das Feld unsichtbar im Frontend, behält aber die Funktionalität.

E-Mail Feld in die Hidden-Position schieben

Wenn Sie dem Nutzer, der das Formular ausfüllt ebenfalls eine E-Mail zusenden möchten, erstellen Sie nun noch ein weiteres E-Mail Feld für den Nutzer (Besucher).

Dazu können Sie grundlegend genauso vorgehen, wie bei dem anderen E-Mailfeld, doch beachten Sie die folgenden markierten Punkte.

Bei der ersten Markierung wählen Sie nun „E-Mail“ aus und tragen auf der rechten Seite eine beliebige E-Mailadresse ein, am besten natürlich eine, auf die Sie auch Zugriff haben. Die hier eingetragene Mailadresse taucht in der Mail für den Benutzer als Absender auf.

Bei der zweiten Markierung wählen Sie nun „Name“ und tragen auf der rechten Seite den Seitennamen oder Ihren Firmennamen etc. ein, den der Benutzer als Absender Name in der Mail angezeigt bekommen soll.

Als Betreff wurde diesmal eine Kombination aus einem freien Text und dem Feld „#betreff_kontakt#“ gewählt.

Damit die E-Mail auch bei der vom Besucher im Kontaktformular angegebenen E-Mail-Adresse landet, geben Sie bei „To (Fields)“ den Namen des E-Mailfeldes an, hier „email_kontakt“. Prüfen Sie nun wieder, ob bei „Storage“ „None“ steht und speichern Sie diese Maske und den Form & Content Type.

E-Mail Feld für den Seitenbesucher

Öffnen Sie, wie beim letzten Mal, erneut das E-Mailfeld und gehen auf den Editor hinter „Message“. Hier können Sie nun bestimmen, was genau der Besucher für eine Nachricht und in welchem Stil er diese erhält. Da Sie nicht wissen, ob es sich bei dem Besucher um eine Dame oder einen Herren handeln wird, schreiben Sie die Mail etwas allgemeiner, z. B. „Hallo ...“ anstatt „Sehr geehrte/r Herr / Frau ...“. Wer sich schon etwas besser mit Seblod auskennt, bekommt die andere Variante aber auch hin.

In dem Beispiel wird der Besucher, der ein Kontaktformular ausgefüllt hat, mit seiner gewählten Anrede, dann dem eingetragenen Vornamen und anschließend dem im Formular eingetragenen Nachnamen begrüßt, der Rest ist Freitext. Klicken Sie nach der Fertigstellung wie immer auf „Save & Close“ und speichern Sie das Feld ebenfalls mit „Save & Close“.

Nun müssen Sie auch das E-Mailfeld für den Besucher in den Bereich „Hidden“ schieben, wie bereits oben für den Betreiber erläutert. Speichern Sie nun den Form & Content Type.

Editor - Nachricht an den Seitenbesucher

Schritt 6.5.2: Kontaktformular ausprobieren und E-Mails prüfen

Noch sind Sie zwar nicht fertig, doch funktionieren sollte Ihr Kontaktformular nun grundlegend schon einwandfrei. Testen Sie das Formular und sehen Sie sich die E-Mails an, ob diese so Ihren Vorstellungen entsprechen und ob die Mails auch an die richtigen Adressen verschickt werden.

Kontaktformular ausgefüllt

Nachdem das Kontaktformular abgesendet wurde, erhalten Sie die beiden E-Mails an die angegebenen Adressen.

Als erstes sehen Sie hier das Ergebnis der Mail, die der Betreiber, also Sie, bekommen würde. Diese geht, so wie zuvor konfiguriert, an die Mail-Adresse des Administrators, die in dessen Nutzerprofil von Joomla zu finden ist. Als Absender steht die Adresse, die der Nutzer in das Kontaktformular eingetragen hat. Wie man erkennen kann, wurden auch die farblichen Formatierungen der Felder auf die nun per Mail versendeten Feldinhalte übertragen.

Seitenbetreiber erhält Nachricht

Als nächstes sehen Sie die Mail, die der Besucher an seine im Kontaktformular angegebene Adresse geschickt bekommt. Als Absender taucht Ihr Absender Name und Ihre in diesem Fall frei angegebene Adresse auf.

Seitenbesucher erhält Nachricht

Nach dem Absenden des Formulars passiert aber noch etwas, es wird Ihnen eine Meldung vom System auf der Website ausgegeben. Diese ist in diesem Fall natürlich total unpassend und hier sogar in der falschen Sprache.

Systemnachricht im Frontend

Schritt 6.5.2.1: Systemnachricht im Frontend verändern

Die System-Nachricht können Sie nun ganz einfach anpassen. Gehen Sie dazu wieder auf Ihren Form & Content Type „Kontakt“. Wählen Sie bei „Views“ den Reiter „Site Form“ und bei „Options“ den Reiter „Configuration“ aus. Dort finden Sie nun oben den Bereich „Configuration“, hier können Sie eine Nachricht bei „Message (Thanks)“ eintragen oder z. B. bei „Message Style“ die Nachricht komplett für das Kontaktformular im Frontend deaktivieren, indem Sie „None“ wählen.

Die Systemnachricht im Frontend anpassen

Im Beispiel dieser Anleitung sieht die Meldung nun wie auf der nachfolgenden Abbildung aus.

Angepasste Systemnachricht im Frontend

Schritt 7: Pflichtfelder und Validierungen erstellen

Um die Felder zu Pflichtfeldern zu machen, wechseln Sie in Ihrem Form & Content Type wieder auf die Reiter „Site Form“ und „Fields“. Auf der rechten Seite neben den Seblod Template Positionen gibt es die Buttons mit den Zahlen 1-6, klicken Sie nun den Button mit der [3] an. Jetzt verändert sich die Ansicht der Felder auf den Seblod Template Positionen.

Felder zu Pflichtfeldern machen

Klicken Sie hier nun nacheinander, bei den Feldern, die Sie zu Pflichtfeldern machen möchten, auf den Schriftzug „Optional“. Nun erscheint jeweils die folgende Maske. Wählen Sie hier bei „Required“ „Yes“ aus, wenn Sie dieses Feld zu einem Pflichtfeld machen möchten. Um einen individuellen Hinweis zu erhalten, schreiben Sie rechts daneben Ihren Wunschtext in das Feld „Alert“. Hier wurde der Text „Dies ist ein Pflichtfeld!“ hinzugefügt.

Um Probleme zu vermeiden, sollten Sie hier keinesfalls die versteckten Felder zu Pflichtfeldern machen. Im Beispiel wurde auch das Captcha ausgelassen, da dieses einen eigenen Mechanismus hat.

Pflichtfeld Einstellungen

Bei dem Feld „E-Mail Kontakt“ sollten Sie unbedingt eine Validierung wählen, sehen Sie sich dazu den nachfolgenden Screenshot an. Hier wurde bei „Validation“ „Email“ ausgewählt, so prüft Seblod, ob die eingegebene Zeichenfolge zu einer E-Mail Adresse passt oder nicht, passt es nicht, wird eine Warnung ausgegeben. Die Warnung können Sie auf der rechten Seite im Feld „Altert“ Ihren Bedürfnissen entsprechend eintragen.

Mail Validierung

Bei allen Feldern, bei denen Sie die Pflichtfelder gesetzt haben, steht nun das Wort „Required“, bei denen zusätzlich noch eine Validierung gewählt wurde, steht +1. Würde nun eine Validierung aber kein Pflichtfeld gesetzt sein, würde „Optional +1“ angezeigt werden. Speichern Sie nun Ihren Form & Content Type.

Pflichtfelder und Validierung gesetzt

Im Frontend wird Ihnen nun nachdem Sie ein Feld unausgefüllt verlassen oder den Absenden Knopf drücken, ohne die Pflichtfelder auszufüllen, ein Warnhinweis an den entsprechenden Feldern ausgegeben. Es gibt eine Menge Optionen, wie die Hinweise ausgegeben werden sollen.

Frontend Pflichtfelder - Standard

Schritt 7.1: Hinweise zum Ausfüllen der Felder verändern

Sollte Ihnen die Standard-Ausgabe der Hinweise nicht zusagen, können Sie diese entweder global in den Seblod Einstellungen (für alle Seblod Formulare als Standard) verändern oder nur für dieses eine Formular.

Um die Ausfüllhinweise für dieses Formular zu verändern, gehen Sie, wie unter Schritt 6.5.2.1 auf dem Screenshot zu sehen, in Ihrem Form & Content Type bei „Views“ auf „Site Form“ und bei „Options“ auf „Configuration“. Scrollen Sie in dieser Maske bis zum Ende herunter, dort finden Sie einen Punkt „Validation“. Wählen Sie hier beispielsweise „Inline“ aus und speichern Sie Ihren Form & Content Type.

In der Site Form Konfiguration

Wenn Sie nun ins Frontend wechseln, wird Ihnen der Hinweis unterhalb des entsprechenden Feldes angezeigt, sobald gegen eine von Ihnen festgelegte Regel verstoßen wird.

Frontend Pflichtfelder - Inline

Nun ist Ihr individuelles Kontaktformular mit Seblod soweit einsatzbereit.

Material, um die Grundlagen von Seblod zu erlernen

Da Seblod eine Erweiterung mit viel Potential und einer hohen Komplexität ist, gibt es natürlich entsprechend viel Wissen, welches man sich aneignen kann. Um sich die Grundlagen von Seblod etwas näher zu bringen, sind die Youtube-Videos von Screendesign WhyKiki empfehlenswert.

Anzeige

Kommentar schreiben


Sicherheitscode
Aktualisieren

Cookies helfen uns bei der Bereitstellung unserer Dienste. Mit der Nutzung dieser Website erklären Sie sich damit einverstanden, dass wir Cookies einsetzen. Weitere Informationen