Contact Form 7 Kurs

Contact Form 7 Kurs

Zur Vorbereitung des online Kurses „WordPress Contact Form 7“  dient diese Seite als Übersicht über die geplanten Themen.

  1. Einleitung und Überblick

    In diesem Kurs wird die Verwendung von Contact Form 7 gezeigt. Contact Form 7 ist ein kostenloses WordPress Plugin zum Erstellen von Kontaktformularen. Mit Contact Form 7 können beliebig viele Kontaktformulare für eine WordPress Seite erstellt werden. Jedes Kontaktformular besitzt eine komplett eigene Konfiguration.Diese Konfiguration besteht zum Beispiel aus dem sichtbaren Aufbau des Formulars, also die einzelnen Elemente, die der Besucher sieht und ausfüllen muss. Dadurch hat man eine flexible Möglichkeit viele verschiedene Anwendungsfälle mit einem Formularplugin abzudecken.ContactForm 7 besitzt keinen Drag and Drop Editor. Das bedeutet, dass man
    das Formular nicht mit einem visuellen Designer erstellen kann.
    Man benötigt allerdings auch keine Programmierkenntnisse um Formulare zu erstellen.

    Für das Anlegen der Formulare werden sogenannte Tag Buttons verwendet.Unter Tag versteht man ganz einfach Textvorlagen, welche eine bestimmten Aufbau besitzen und später vom Plugin in das passende Eingabefeld umgewandelt werden.

    Der Vorteil an dieser Methode: Man kann die Formulare trotzdem relativ einfach erstellen. Lässt sich aber die  Flexibilität offen, wenn man später komplexere Ansprüche hat.

    Ganz wichtig bei ContactForm7 ist auch, dass das Plugin die Nachrichten nur versendet und NICHT speichert.

    Diese Funktionalität muss man, wenn gewünscht, mit zusätzlichen Plugins einbauen.

    Für die meisten Verwendungszwecke reicht aber auch das Versenden Nachricht.

  2. Formular anlegen

    Beim Anlegen eines neuen Kontakformulars sollte man einen sprechenden Titel eingeben. Das macht die Einbindung und die Pflege später leichter.
    Direkt nach dem Speichern wird der individuelle Shortcode angezeigt. Dieser Shortcode wird verwendet um das Formular an einer beliebigen Stelle anzuzeigen.
  3. Formular anpassen

    1. Formular Tab

      Im Formular Bereich wird der Aufbau und dadurch das Aussehen des Formulars festgelegt. Der obere Editor zeigt die verfügbaren Elemente, welche später zu Formularelementen umgewandelt werden.Im Formular Bereich kann HTML verwendet werden. Das macht eine Formatierung sehr flexibel. Da jedes Feld einen eindeutigen Namen haben muss, sollte man darauf achten, dass es reservierte Namen gibt die nicht verwendet werden dürfen.
    2. E-Mail Tab

      Damit die Nachrichten beim richtigen Empfänger ankommt, müssen bei jedem Formular ein paar Informationen eingetragen werden. Zusätzlich wird in diesem Bereich auch der Inhalt der zu versenden Nachricht festgelegt.Der eigentliche Inhalt der Nachricht wird im Nachrichtenkörper definiert. Hier ist es wichtig die Tags bzw. die korrekten Feldnamen aus dem Formular zu verwenden.Contact Form 7 kann auch E-Mails mit Dateianhängen versenden.
      Das können Dateianhänge sein, welche der Besucher im Formular selbst hochgeladen hat.
    3. Meldungen

      Im Bereich Meldungen können die Texte, welche dem Besucher vor oder nach dem Absenden angezeigt werden sollen, angepasst werden.Wichtig ist hier, dass nur reiner Text erlaubt ist. Also kein HTML.HTML Codes werden hier ignoriert. Aus diesem Grund sollte man sie also direkt weg lassen.
    4. Zusätzliche Einstellungen

      Dieser Abschnitt bietet Funktionen zum Testen seiner Formulare oder den Einbau neuer Funktionen mit Hilfe von JavaScript.Die Möglichkeiten lassen sich hierbei in drei Bereiche aufteilen: Demo Modus, Akzeptieren erzwingen und Aktion nach Versand.
  4. Formular einbinden

    Bereits beim Speichern des Plugins wurde uns der dazugehörige Shortcode angezeigt.Der Shortcode ist relativ einfach aufgebaut und besteht nur aus einer ID und einem Titel. Dadurch kann man einen Shortcode ganz einfach dem passenden Formular zuordnen.
  5. Tags
    1. Überblick

      Bei Contact Form 7 wird das Formular und der Nachrichteninhalt über sogenannte Tags gesteuert.Ein Tag ist dabei ein Text Code, welcher von eckigen Klammern umgeben wird. Tags die im Formular verwendet werden, können in etwas abgewandelter Form in der E-Mail Nachricht verwendet werden.
    2. Formular Tags

      Tags im Formular werden durch das entsprechende HTML Elemente ersetzt.
      Ein Tag kann (muss aber nicht in allen Fällen) aus diesen vier Komponenten bestehen: Typ, Name, Optionen, Wert.
    3. E-Mail Tags

      Tags, welche für die E-Mail verwendet werden, bestehen nur aus dem Namen des Tags auf welches man sich bezieht.In der E-Mail wird dann nur der Wert des Eingabefelds an der gewünschten Stelle als Text eingefügt.
  6. Beispiele
    1. Pflichtfelder

      In diesem Beispiel werden Pflichtfelder angelegt. Damit kann ein Formular nur abgesendet werden, wenn alle geforderten Felder ausgefüllt wurden. Auch die Nachricht die dem Besucher angezeigt werden soll, kann angepasst werden.
    2. Anhänge hinzufügen

      Möchte man dem Besucher anbieten eigene Anhänge hochzuladen, so bietet ContactForm7 auch dafür relativ einfache Möglichkeiten.Im Formular Bereich muss man dafür definieren, wie der oder die gewünschten Anhänge aussehen dürfen. Das bedeutet, man legt fest welchen Dateityp und welche Größe der Anhang haben darf.
    3. Mehrzeilige und größere Felder

      Für größere Texte wird das Element „textarea“ verwendet.Bei vielen Textfeldern und auch hier hat man dann die Möglichkeit die maximal erlaubte und die minimal geforderte Textlänge festzulegen. Je nach Browser lässt sich dann einfach kein Text mehr eingeben. Zusätzlich wird die Überschreitung mit einer Meldung quittiert.
    4. Datepicker

      Um einen Datepicker anzuzeigen, genügt es in den meisten Fällen das date-field zu verwenden. Damit wird ein HTML5 Date Input Feld erzeugt, welches von den meisten Browsern automatisch in ein Datums-Auswahlfeld umgewandelt wird.Das schöne beim Datumsfeld ist, dass man ein relatives Datum für Start und Endpunkt verwenden kann. Man hat also die Möglichkeit zu sagen, das maximale auswählbare Datum darf heute in zwei Wochen sein.
    5. Meldungen formatieren

      Meldungen über ungültige Eingaben können auf zwei Arten angezeigt werden: Meldungen über ungültige Eingaben können auf zwei Arten angezeigt werden: Statisch oder Floating. Was diese Optionen bedeuten und wann man welche einsetzen soll, zeigt dieses Beispiel.
    6. Empfänger auswählen lassen

      Um die Empfänger der Nachricht flexibel vom Besucher auswählen zu lassen, bietet Contact Form 7 eine einfach Möglichkeit welche die E-Mail Adressen nicht im Quelltext anzeigt.
    7. Spam Schutz mit Quiz

      Eine sichere Methode Spam zu vermeiden und dabei noch auf weitere Plugins zu verzichten ist ein Quiz.
    8. Fehlermeldung anzeigen wenn AGB nicht aktiviert wurde

      Einen „AGB akzpetiert“ Haken bietet Contact Form 7 ebenfalls. Wird dieser aktiviert, lässt sich das Formular nicht absenden. Wie der Besucher noch einen sichtbaren Hinweis bekommt, zeigt dieses Beispiel.
    9. Autoresponder

      Eine zweite E-Mail, entweder an den Besucher selbst oder an eine weitere E-Mail Adresse ist mit Contact Form 7 möglich. Die zweite E-Mail kann unabhängig von der ersten E-Mail Nachricht aussehen.
    10. Character Counter

      Für Eingabefelder bietet Contact Form 7 einen Character Counter an. Dieser zeigt während der Eingabe an, wie viele Zeichen bereits angegeben wurden oder alternativ wie viele noch eingegeben werden dürfen.