9. Dezember 2013

Einstieg in TYPO3 [Tag 16]: Frontenderweiterung "Powermail"


Das Standard-Mailformular von TYPO3 bringt nicht sehr viele Konfigurationsmöglichkeiten mit.
Mit der Extension “Powermail” hingegen lassen sich sehr umfangreiche Formulare erstellen, die nicht nur zum Mailversand genutzt werden können, sondern zum Beispiel zum erstellen von Formularen (Bsp. Kontaktformular).

Powermail ist eine vielfältige und zugleich einfache Mailformular-Erweiterung, die im Backend eine flexible Konfiguration ermöglicht. Man kann sehr einfach komplexe Formulare ohne HTML-Kenntnis im Backend "zusammenklicken".  

Installieren der Erweiterung «Powermail»


1.) «Erweiterungsmanager/Erweiterungen hinzufügen» "powermail" suchen, importieren und einfügen

-> Sprache [Adminwerkzeug «Sprache»]  für "powermail" aktualisieren!
   

2.) Einbinden statischer Templates aus Erweiterungen:
    • Template/HOME/vollständigen Template-DS bearbeiten /Enthält
    • die statischen Templates zu «PowerMail» einbinden (aus "verfügbare Objekte")
    • aber: Nur ein Objekt zwischen "Add basic" oder "Add fancy" auswählen!

3.) Neuer Ordner «Powermail» in Seitenstruktur erstellen

4.) Template/Home/Konstanten Editor/Kategorie POWERMAIL_ADDITIONAL (49):
Unter Storage PID die ID des neu erstellten Ordners "Powermail" eingeben (hier: 26)




Kontaktformular mit Hilfe von Powermail erstellen:

  •  Unter «Seite/Kontakt» ein neues «SeiteninhaltselementPlugIn/Powermail» im Content erstellen.
  • Unter dem Reiter "PlugIn" eine neues Form erstellen (s. Pluszeichen Add new form) und die folgenden Anweisungen durchführen:

Hinweis: Das Plugin ist noch nicht die tragende Funktion des Formulars! Erst müssen die einzelnen Elemente ihre Funktionen zugeordnet bekommen!


  • Hier: "Neu anlegen Seite" klicken und die erforderlichen Felder für ein Kontaktformular anlegen (Vorname, Nachname, E-Mail)
    • So wird die Struktur des Formulars geschrieben!
  • speichern + schließen
  • Kontaktformular in das PlugIn "Kontaktformular" einbinden


Es existiert noch kein Sende-/Submit-Button! 
Diesen wie folgt erstellen:

  • Öffnen des «Kontaktformular» unter dem Modul «Liste/Kontakt»
  • Neues Feld anlegen
  • Titel: Absenden
  • Typ: Abschicken
  • speichern und schließen






Nun müssen die einzelnen Elemente des Formulars aufbereitet werden, damit die hinterlegten Daten eine Zuordnung erhalten und die Anfrage an die korrekte Stelle weitergeleitet werden kann:

Zuordnung der Formularelemente:


1.) Öffnen des Kontaktformulars unter Liste/Kontakt
2.) Häkchen setzen bei "Zweite Optionspalette anzeigen"
3.) Elemente nacheinander auswählen und entsprechendes anklicken




4.) speichern und schließen

_________________________________________________________________________

Konfiguration des PlugIn "Kontaktformular"


Zunächst: Titel vergeben? Besser für eine übersichtlichere Struktur der Seiteninhaltselemente


  • Öffnen des PlugIn Kontaktformular
  • Aktivieren des Reiters "PlugIn" -> Einstellungen
  • Bestätigungsseite aktivieren:


          Hier wird dem Benutzer noch einmal die Möglichkeit gegeben, seine Daten zu überprüfen und
          ggf. zu korrigieren.


Bestätigungsseite im Frontend


Hinweis: Kein "Double Opt-In" an dieser Stelle notwendig! Zu Erinnerung: Es handelt sich hier nur um die Kontaktanfrage - keine Anmeldung zu einem Newsletter oder dergleichen, wo ein "Double Opt-In" allein schon aus juristischen Aspekten notwendig wäre!



Wo werden die Angaben des Kontaktformulars gespeichert?

Empfängerdaten bearbeiten unter «Liste/Kontakt/Kontaktformular bearbeiten»:


Absender und Antwortschreiben einrichten?

«Liste/Kontakt/Kontaktformular bearbeiten»

Tipp! Um die Antwort zu personlisieren, werden Variablen eingesetzt, die sich auf die Eingabefelder des Formulars beziehen!
Bsp.: Guten Tag {vorname} {nachname}!
         Vielen Dank für Ihre Anfrage!
         

Antwortseite für das Frontend erstellen:

«Liste/Kontakt/Kontaktformular bearbeiten»:



Hier kann auch noch ein Zurück-Link zur Kontaktseite erstellt werden, indem in dem Textfeld am Ende "zurück" geschrieben und mit der internen seite "Kontakt" verlinkt wird.


Tipp:

Durch Entfernen der Variable {powermail_all} erscheint nur der Text auf der Antwortseite. 
Sollte die Variable {powermail_all} nicht gelöscht werden, so erscheint in der Antwortseite nach wie vor die vorab eingegebenen Kontaktdaten.

_________________________________________________________________________

 

Wo erscheinen die Kontaktanfragen im BE von TYPO3?

Zur Ansicht der eingereichten Kontaktanfragen geht man auf das Modul «Powermail" und den Ordner "Powermail" in der Seitenstruktur:


Hinweis: Der Ordner "Powermail" MUSS direkt unter die HOME-Seite stehen, da er auf Inhalte einer bestehenden Seite unter HOME zugreift.

Hinweis: Übersicht kann als Excel-Liste exportiert werden :-)


_________________________________________________________________________


Pflichtfelder vergeben

  • «Liste/Kontakt/Kontaktformular bearbeiten»
  • Einzelne Felder zur angelegten seite öffnen
  • Unter "Allgemein", "Erweitert" und "Zugriff" die gewünschten Angaben ergänzen.
    Bsp.: Nachname -> Erweitert-> Häkchen bei "Pflichtfel" setzen
    Erscheint diese Angabe nicht
Hiweis: Erscheint diese Angabe nicht? Dann ist vielleicht die zweite Optionspalette anzeigen nicht gewählt?



Zur Sicherheit mit einem Captcha-Feld arbeiten:

  • neues Feld in Kontaktformular einfügen - oberhlb des Absenden-Button
  • Bezeichnung vergeben
  • "Typ: Captcha" auswählen!
Jetzt erscheint ein zusätzliches Abfragefeld, eine bestimmt Aufgabe zu lösen oder eine bestimmte Zifferne-+Zahlenreihenfolge einzugeben -> bedingt durch das Captcha!

_________________________________________________________________________


Breite des Formulars an den Content der Seite anpassen




       1.)    Pfad öffnen: C:\xampp\htdocs\Projekt\typo3conf\ext\powermail\Resources\Public\Css
       2.)    CssFancy.css-Datei kopieren
       3.)    Pfad öffnen. C:\xampp\htdocs\Projekt\fileadmin\templates\css
       4.)    CssFancy.css-Datei einfügen
       5.)    CssFancy-Datei im Notepad öffnen und die Breite ändern:

6.) speichern + schließen



      7.)    Öffnen des «Typoscript-Objekt-Browser» in Template/HOME -> „Durchsuchen: Konstanten“ einstellen -> Konstantenwurzel [plugin]-[tx_powermail]-[settings]- öffnen und auf [CssFancy] zur weiteren Bearbeitung klicken.
      8.)    Den oben geänderten Pfad eingeben: fileadmin/templates/css/CssFancy.css + speichern





1 Kommentar:

  1. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com


    AntwortenLöschen