Seit vielen Jahren nutze ich nun schon Contact Form 7 für meine Formulare und war eigentlich immer zufrieden. Doch in manchen Fällen benötigt man mehr Funktionen und so habe ich mich nach einer Alternative umgesehen. Gefunden habe ich Caldera Forms.
Das Plugin hat einen enormen Funktionsumfang, wie z.B. einen Layout-Builder, Conditional Logic, mehrseitige Formulare und Weiterleitungen.
Wie Caldera funktioniert und wie du ein einfaches Kontaktformular anlegst, erkläre ich dir nun Schritt für Schritt.

Die besonderen Features von Caldera Forms:

  • Einfache Benutzeroberfläche
  • Formbuilder, der per Drag & Drop bedienbar ist
  • Große Auswahl an Feldtypen, wie beispielsweise Berechnung, Upload, Color-Picker, Schieberegler,….
  • Conditional Logic: Felder werden bei festgelegten Bedingungen angezeigt oder versteckt
  • Weiterleitung: z.B. Weiterleitung auf eine Danke-Seite
  • Mehrseitige Formulare
  • Autoresponder: Automatische Antwortmails
  • Speichern der Formulareinträge

Wie man sieht, hat die kostenlose Version von Caldera Forms einiges zu bieten. In der Premium Version sind noch einige weitere Funktionen enthalten.

Caldera Forms Tutorial

In dieser Anleitung gehe ich nur auf die wichtigsten Grundfunktionen ein. Was man mit Caldera noch alles umsetzen kann, werde ich in einem späteren Artikel erklären.

1. Caldera Forms installieren

Zur Installation von Caldera klickst du einfach im Dashboard auf > Plugins > installieren. Dort suchst du nach Caldera und klickst auf installieren und im Anschluss auf aktivieren.

2. Einfaches Kontaktformular anlegen

Nachdem du das Plugin aktiviert hast, kannst du unter dem neuen Menüpunkt Caldera Formulare ein erstes Kontaktformular anlegen.
Klicke dazu einfach auf Formulare (1) und anschließend im oberen Bereich auf Neues Formular.

kontaktformular anlegen

In einem Popup kannst Du dann entweder mit einem leeren Formular starten oder aus den folgenden 6 Formularvorlagen auswählen:

Caldera Forms Vorlagen

Caldera Forms bietet 6 vorgefertigte Formular Templates an.

  • Contact Form: ein einfaches Kontaktformular
  • Variable Pricing Form: ein Formular mit Berechnung von Preisen für Produkte oder Dienstleistungen
  • Registration Form: Registrierformular
  • Simple Booking Form: ein einfaches Buchungsformular, beispielsweise für die Reservierung von Hotelzimmern
  • Rate Our Service Form: Bewertungsformular mit Bewertungssternchen
  • Job Application Form: Bewerbungsformular mit Dateiupload

Für dieses Tutorial wähle ich ein leeres Formular, um die Funktionsweise besser erklären zu können.

Nachdem du die Vorlage Blank Form ausgewählt hast, kannst du dem Formular einen Namen geben und speichern.

Formular erstellen

 

3. Layout und Formular-Felder festlegen

Sobald das Formular erstellt ist, leitet dich Caldera zur Layout Ansicht weiter.

Im Reiter Layout kannst Du nun per Drag & Drop das Layout und die Felder festlegen.
Als erstes lege ich das Feld Vorname an. Dazu muss man einfach nur Add Field in die Zeile ziehen.

Feld hinzufügen

Felder werden via Drag & Drop an die gewünschte Stelle gezogen

 

Danach öffnet sich ein Popup mit den verfügbaren Feldtypen. Für das Namensfeld wähle ich hier Einzelne Textzeile.

 

Feldtyp auswählen

Sobald das Feld angelegt ist (Set Field), kannst du auf der rechten Seite die Detaileinstellungen vornehmen.

Feld Einstellungen

 

Hier noch eine kurze Übersicht über die Feld-Einstellungen:

  • Feld-Typ: Textzeile, Dropdown, Checkbox usw.
  • ID: wird automatisch vergeben
  • Name: Beschriftung des Feldes, die auch im Backend über dem Feld angezeigt wird.
  • Label verstecken: wenn die Option angehakt ist, wird die Beschriftung nicht über dem Feld angezeigt.
  • Slug: Eindeutiges Kürzel, das für die Magic Tags genutzt werden kann.
  • Condition: auswählbar, wenn Felder bei bestimmten Bedingungen angezeigt werden sollen.
  • Pflichtfeld: muss das Feld ausgefüllt werden?
  • Beschreibung: hier kannst du Zusatzinfos eingeben. Z.B. eine Ausfüllhilfe.
  • In der Eingabeliste anzeigen: Feld wird in den gespeichterten Einträgen angezeigt.
  • Eigene CSS-Klasse: für individuelle CSS-Anpassungen.
  • Platzhalter: Text der innerhalb des Feldes angezeigt werden soll.
  • Standard: hier kann ein Standardwert vorgegeben werden.
  • HTML5 Typ: der Feldtyp kann hier z.B. auf Telefon oder URL umgestellt werden.
  • Versteckte Eingabe

 

Als nächstes kommt nun ein Feld für den Nachnamen hinzu.
Dieses möchte ich aber nicht unter dem Vornamen, sondern neben dem Vornamen platzieren. Also 2 Spalten nebeneinander.
Bei Contact Form 7 ist das immer etwas aufwändiger, da dies nur über CSS-Anpassungen geht.

Aber mit Caldera geht das kinderleicht. Dazu klickst du einfach auf Split Row und schon hast du ein 2-spaltiges Layout. Auch die Unterteilung in 3 oder 4 Spalten ist so möglich.

Spalten anlegen

Unterteilung der Zeile in mehrere Spalten

Layout spalten

Für die weiteren Felder erstellst du zunächst eine neue Zeile. Anschließend legst dann die gewünschten Formularfelder an.

Zeile anlegen

Neue Zeile hinzufügen

Fertiges Kontaktformular

Am Ende sollte das Formular in etwa so aussehen:

fertiges formular

Caldera Forms bietet eine Vorschau des Formulars an.

Nachdem du es mit Save Form gespeichert hast, kannst du dir eine Vorschau des Formulars in einem neuen Tab ansehen:

formular vorschau

Einfaches Kontaktformular mit 2-spaltigem Layout

 

4. Email-Einstellungen (an Empfänger)

Im Reiter Email findest du alle wichtigen Einstellungen für den Erhalt des Kontaktformulars. D.h. hier kannst du die Benachrichtigung, die du  bekommst bearbeiten. Möchtest du auch eine Bestätigungsmail an den Absender schicken, kannst du dies im nächsten Tab Prozessoren einrichten.

email einstellungen

Einstellungen für die Email an den Empfänger

  1. Absender-Name: Hier gibst du den Absender ein, beispielsweise Kontaktanfrage.
  2. Absender-Mail: am besten trägst du deine Email-Adresse ein.
  3. Reply To Email: hier sollte die Mail-Adresse des Formularabsenders eingetragen werden. Da man diese ja nicht kennt, kann man bei Calder hierfür Magic Tags einfügen. Sobald du das Feld anklickst, wird ein Dropdown mit den genutzten Feldern angezeigt. In diesem Beispielformular wählst du %email% aus.
  4. Email Recipients: dein Formular soll an mehrere Mail-Adressen gehen? Dann kannst du diese hier (mit Komma getrennt) eintragen.
  5. BCC: entspricht dem vorherigen Punkt, nur dass die Empfänger in Blind Copy gesetzt werden.
  6. Email-Betreff: die Betreffzeile des Formulars, z.B. Anfrage oder Kontaktformular
  7. Email-Nachricht: standardmäßig steht hier {summary} und übermittelt alle Felder des Formulars. Wenn du die Ausgabe anders formatieren möchtest oder zusätzliche Infos erhalten möchtest, kannst du die Magic Tags nutzen.

Magic Tags

Caldera Forms bietet mehrere Arten von Magic Fields. Für die Formatierung der Mail-Benachrichtigung kannst du beispielsweise die Feldwerte deines Formulars als Magic Tag ausgeben.
Dazu musst du lediglich den Slug in folgende Form bringen: [code]%slug%[/code].
Wenn Du also ein Feld „Vorname“ mit dem Slug „vorname“ hast, sieht der Tag so aus: [code]%vorname%[/code].
Wenn dein Formular auf mehreren Seiten eingebaut ist und du wissen möchtest, von welcher Seite es abgeschickt wurde, kannst du z.B. folgenden Tag verwenden:

Seiten-Titel: [code]{embed_post:post_title}[/code]

Weitere Infos zu den Magic Tags findest du in der Plugin Doku von Calderaforms

5. Formular Prozessoren

Im Reiter Prozessoren kannst du einstellen, was nach dem Absenden eines Formulars geschehen soll. Folgende Optionen bietet Caldera an:

  • Auto Antwort an den Formular-Absender
  • Umleitung, z.B. auf eine Danke-Seite
  • Condition Recipien: je nach Bedingung können unterschiedliche Empfänger die Formular-Mail erhalten
  • Increment Value, z.B. für eine fortlaufende Bestellnummer
formular prozessoren

Formular Prozessoren: hier kannst du Weiterleitungen und Autoresponder einrichten.

Reply Mail

Um eine automatische Antwortmail an den Absender (Reply-Mail) zu erstellen, klickst du zunächst auf Prozessor hinzufügen. Im folgenden Popup wählst du Auto Antwort aus.

reply mail

Einstellungen für die automatische Antwortmail an den Absender

Auch hier kannst du die Magic Tags nutzen, um die Antwortmail zu personalisieren. In der Nachricht kannst du so den Absender mit Namen ansprechen. Dazu fügst du einfach [code]%vorname% %nachname%[/code] ein.

Weiterleitung (Danke-Seite)

Wenn nach dem Absenden des Formulars eine Weiterleitung erfolgen soll, klickst du erneut auf Prozessor hinzufügen. Diesmal wählst du den Prozessor Umleiten.

weiterleitung

Weiterleitung nach Abschicken des Formulars

Im Feld URL musst du einfach nur die Adresse zu deiner Danke-Seite eingeben. Zusätzlich kannst du auch noch den Text für die Umleitungsnachricht eingeben.

Im Standard lädt Caldera Forms die Seite nach Abschicken eines Formulars nicht neu. D.h. der User sieht eine leere Seite. Damit das nicht passiert, kann man mit dem Umleitung-Prozessor einen Refresh einrichten. Alternativ kannst du auch unter Form Settings die Einstellungen anpassen.

Dazu musst du statt der URL das Magic Tag [code]%current_url%[/code] als Wert eintragen.

page reload

Weiterleitung zur vorherigen Seite

6. Bedingungen

Caldera ist eines der wenigen kostenlosen Plugins, das Conditional Logic Funktionen anbietet. Diese kannst du im Reiter Bedingungen festlegen.

conditional logic

Festlegen von Bedingungen für die Anzeige von Feldern

Dazu klickst du zuerst auf Add Conditional Group, benennst diese und fügst dann die gewünschten Bedingungen ein.
Also wenn Feld A eine bestimmte Bedingung erfüllt, wird Feld B angezeigt oder versteckt.

7. Revisionen

Im Tab Revisionen kannst du wie auch im WordPress Editor zu einer vorherigen gespeichert Version des Formulars zurückkehren.

8. Variable

In diesem Reiter können Variablen festgelegt werden, die man aber bei Standardformularen nicht benötigt.

9. Responsive

Hier kannst du einstellen, ab welcher Bildschirmbreite das Layout zusammengeklappt dargestellt wird. Die Standardeinstellung beträgt 767 Pixel und das Layout basiert auf Bootstrap.

responsive einstellungen

Responsive Breakpoints

10. Form Settings

Das Kontaktformular ist jetzt soweit fertig. Doch vor dem Einbau in die Seite, solltest du noch die generellen Formulareinstellungen überprüfen.

formular grundeinstellungen

Generelle Formulareinstellungen

Unter Form Settings findest du nicht nur den Shortcode zum Einfügen in eine Seite, sondern kannst auch noch einige Einstellungen anpassen. Hier die wichtigsten:

  • Erfolgsmeldung: Text, der bei der erfolgreichen Übermittlung angezeigt wird
  • Einträge sichern: auf Wunsch speichert Caldera die Formulare in der Datenbank.
  • Create sub-menu: wenn du die gespeicherten Einträge in einen Unterpunkt im Menü sehen möchtest,  musst du diese Option aktivieren.

    liste der formulareinträge

    Gespeicherte Formulareinträge

  • Formular ausblenden: standardmäßig wird das Formular nach dem Abschicken ausgeblendet. Dies verhindert, dass ein Nutzer es mehrmals absendet.
  • Honeypot / Honigtopf: dient der Spam-Abwehr.

11. Formular einfügen

Sobald das Layout fertig ist und alle Einstellungen angepasst sind, kannst du das Formular in die gewünschte Seite einfügen. Dafür gibt es 3 Möglichkeiten:

    1. Shortcode Button
      Wenn Du auf einer Seite bist, klickst Du auf den Button Caldera Form und wählst im Popup das gewünschte Formular aus.

      formular einfügen

      Formular per Button in die Seite einfügen

    2. Shortcode
      Zu jedem Formular stellt Caldera einen Shortcode bereit, der z.B. so aussehen kann:

caldera formular shortcode

Diesen kannst du nun überall per copy & paste einfügen.

  • Widget
    Natürlich kannst du das Formular auch als Widget in die Sidebar einbauen.

 

formular widget

Caldera Form Widget

 

Fazit:

Caldera Forms ist auf jeden Fall ein empfehlenswertes Plugin. Im Vergleich zu CF7 ist es für den User wesentlich einfacher zu bedienen und bringt sehr viele nützliche Funktionen mit. Wenn du also mehrseitege Formulare, Bedingungen und Weiterleitungen benötigst, ist dies das richtige Formular-Plugin für dich!