📮

Dein Friendly Automate sieht noch anders aus? Klicke hier für das ältere Tutorial:

Erstelle dein erstes Formular (Mautic 4)

Formulare sind eine ideale Möglichkeit, Zero-Party-Daten von deinen Kund:innen zu erhalten (lies mehr über die Bedeutung von Zero-Party-Daten in unserem Blog). Einerseits kannst du über einfache Formulare Kontaktdaten und Kundeninformationen erhalten; du kannst über ein Formular aber auch direkt eine Kampagne starten, z.B. als Anmeldung zu einem Webinar mit automatisch folgenden Erinnerungsmails und Teilnahmebestätigungen.

In diesem Tutorial lernst du, wie du ein einfaches erstes Formular in Friendly Automate erstellst und den Code in deine Webseite einbindest.

Richte dein Formular ein

Als Beispiel erstellen wir ein simples Kontaktformular, das den Vornamen, eine Emailadresse und eine Nachricht abfragt. Die eingegebenen Daten sollen per Email an eine hinterlegte Kontaktadresse weitergeleitet werden. In der Vorschau sähe das Formular so aus:

Um zu beginnen, klicke in Friendly Automate links auf «Komponenten», dann auf «Formulare» und dann oben rechts auf «Neu».

Es erscheint ein Popup, in dem du auswählen kannst, ob du mit dem Formular eine Kampagne starten möchtest oder ob dein Formular für sich stehen soll. Für ein erstes einfaches Kontaktformular wählst du das «Eigenständiges Formular».

Überblick

Um dein Formular erfolgreich einzurichten, braucht es drei Schritte, die du oben in den drei Reitern siehst:

• Details: Wähle hier den Namen deines Formulars und was dem Nutzer nach der Eingabe angezeigt wird.
• Felder: Richte hier die Eingabefelder für dein Formular ein.
• Aktionen: Bestimme hier, wie die Daten nach der Eingabe verarbeitet werden.

Um die Einstellungen auf der rechten Seite (Kategorie, Verfügbar usw.) musst du dich bei deinem ersten Formular noch nicht kümmern.

Oben rechts kannst du deinen Fortschritt jederzeit sichern.

Erster Schritt: Details

Gib im Feld «Name» ein, wie dein Formular heissen soll, zum Beispiel «Kontaktformular». Dies ist ein interner Name, der nur in Friendly Automate sichtbar ist.

Die «Aktion nach erfolgreichem Absenden» bestimmt, was die Nutzerin sieht, nachdem sie auf den Absende-Button geklickt hat. Du hast drei Möglichkeiten:

• Im Formular bleiben: Die Daten werden gesendet, aber die Nutzerin sieht keine Bestätigung.
• Weiterleitungs-URL: Du kannst den Link auf eine Danke-Seite eingeben, wenn du eine solche eingerichtet hast.
• Text anzeigen: Oberhalb des Formulars wird ein Danke-Text eingeblendet.

Die einfachste sinnvolle Option für ein erstes Formular ist «Text anzeigen». Im Feld «Weiterleitungs-URL/Text» gibst du den entsprechenden Text ein.

In der Vorschau sieht das nach Absenden des Formulars so aus:

Wenn du möchtest, kannst du mit einem Klick auf «Speichern» in der oberen rechten Ecke deinen Fortschritt speichern, bevor du weitermachst.

Zweiter Schritt: Felder

Wähle jetzt den zweiten Reiter «Felder». Über das Dropdown-Menü kannst du ein neues Feld hinzufügen. Die wichtigsten einfachen Felder sind:

• Text: kurze Antwort: Für einzeilige Texteingaben wie Namen oder Adressen.
• Text: Absatz: Für mehrzeilige Texteingaben wie eine Kontaktanfrage.
• E-Mail: Für Emailadressen.

Wähle für die Namenseingabe zuerst ein Feld «Text: Kurze Antwort».

Überblick

Es erscheint ein Popup mit fünf Reitern, in denen du folgende Einstellungen vornehmen kannst:

• Generell: Hier richtest du Label (Text über dem Eingabefeld) und Eingabeplatzhalter ein.
• Zugeordnetes Feld: Hier kannst du eine Verknüpfung mit einem Feld im Friendly-Automate-CRM einrichten, sodass die entsprechenden Felder im CRM automatisch ausgefüllt bzw. aktualisiert werden.
• Validierung: Hier bestimmst du, ob die Eingabe dieses Feldes erforderlich ist.
• Attribute: Für dein erstes Formular überspringen wir diese Einstellungen.
• Verhalten: Für dein erstes Formular überspringen wir diese Einstellungen auch.

Generell

Bleibe also zuerst im Reiter «Generell». Gib als «Label» die Beschreibung für das Feld ein, zum Beispiel «Vorname».

Eine andere Möglichkeit ist, das Label nicht anzuzeigen (Auswahl rechts) und unten im Feld «Eingabeplatzhalter» einen Platzhalter-Text, zum Beispiel «Vorname» einzutragen.

So sieht ein Formular mit Labels aus:

So sieht ein Formular mit Platzhaltern aus:

Zugeordnetes Feld

Gehe jetzt in den nächsten Reiter «Zugeordnetes Feld». In diesem wichtigen Schritt stellst du ein, mit welchem Feld aus dem Friendly-Automate-CRM dieses Feld verknüpft wird. Dadurch wird das entsprechende Feld im CRM automatisch ausgefüllt bzw. aktualisiert.

Wähle für den Vornamen das Objekt «Kontakt» und Feld «Vorname».

Validierung

Gehe jetzt in den nächsten Reiter «Validierung». Hier gibst du an, ob die Eingabe des Feldes erforderlich ist. Wenn ja, solltest du unbedingt den «Validierungstext» ausfüllen. Das ist der Text, der angezeigt wird, wenn das Feld nicht ausgefüllt wurde.

So sieht der Validierungstext in der Formular-Vorschau aus, wenn versucht wird, das Formular ohne dieses Feld abzuschicken:

Attribute und Verhalten

Für dein erstes Formular empfehlen wir, diese Einstellungen zu überspringen.

Feld hinzufügen

Klicke jetzt auf «Hinzufügen», um das Feld zu erstellen.

Du gelangst zurück zur Übersicht, in der du eine Vorschau deines neuen Feldes sehen kannst. Du siehst hier auch, mit welchem Kontaktfeld das Feld verknüpft ist:

Weitere Felder erstellen

Du kannst jetzt auf dieselbe Weise weitere Felder erstellen. Wähle wieder im Reiter «Felder» aus dem Dropdown-Menü das entsprechende Feld aus und gehe wie soeben beschrieben vor. Einige Beispiele:

• Nachname: Du könntest natürlich identisch wie den Vornamen auch ein Feld für den Nachnamen hinzufügen (Text-Feld, Verknüpfung mit «Nachname»).
• Emailadresse: Dafür wählst du aus dem Dropdown-Menü die Option «E-Mail». Dieses Feld ist bereits automatisch mit dem E-Mail-Feld im CRM verknüpft.
• Texteingabe: Für ein Nachrichten-Feld wählst du aus dem Dropdown-Menü die Option «Text: Absatz». Dieses Feld solltest du nicht mit einem Feld aus dem CRM verknüpfen, da du die eingegebene Nachricht vermutlich nicht im CRM speichern möchtest.

Formular überprüfen und Eingabe-Button anpassen

Wenn du alle Felder erstellt hast, kannst du die Formular-Felder in der Übersicht überprüfen. Du kannst die Felder über die Buttons auf der rechten Seite jederzeit bearbeiten oder löschen.

Die Reihenfolge der Felder kannst du ganz einfach per Drag-and-Drop verändern.

Ausserdem siehst in der Vorschau unten den Eingabe-Button. Mit einem Klick auf das Bearbeiten-Symbol rechts kannst du den Text des Buttons anpassen.

Wenn du möchtest, kannst du wieder mit einem Klick auf «Speichern» ganz oben rechts deinen Fortschritt speichern, bevor du weitermachst.

Dritter Schritt: Aktionen

Zuletzt legst du im Reiter «Aktionen» fest, was mit den Daten passiert, nachdem sie abgeschickt wurden. Du kannst eine oder mehrere Aktionen festlegen. Für ein einfaches Kontaktformular erstellen wir nur eine Aktion: Die Werte des Formulars sollen per Email an eine Mitarbeiterin gesendet werden, damit das Anliegen bearbeitet werden kann. Optional kannst du auf die gleiche Weise auch dem Absender ein Bestätigungsmail senden.

Öffne dazu das Dropdown-Menü und wähle «Formular-Eingaben senden».

(Mit den ähnlichen Aktionen «E-Mail an Kontakt senden» und «Sende eine E-Mail an eine:n Mitarbeiter:in» lässt sich eine bereits vorhandene E-Mail als Vorlage nutzen. Über «Formular-Eingaben senden» erstellen wir eine einfache E-Mail direkt in einem simplen Editor.)

Es öffnet sich ein Popup. Hier kannst du folgendes eintragen:

• Name: Benenne hier die Aktion, zum Beispiel «Bestätigungsmail an uns».
• Beschreibung: Beschreibe optional, was die Aktion macht. Dies wird nur in der Aktionen-Übersicht angezeigt und dient deiner eigenen Orientierung.
• Betreff: Dies ist der Betreff der Email, die an die Mitarbeiterin versendet wird.

• Nachricht: Dies ist der Inhalt der Email, die an die Mitarbeiterin verschickt wird. Du kannst die voreingestellte Nachricht beliebig anpassen.

• To: Gib hier die Emailadresse ein, an die das Bestätigungsmail gesendet werden soll.

Die weiteren Felder und Einstellungen kannst du für dein erstes Formular überspringen. Erstelle die Aktion durch einen Klick auf den Button «Hinzufügen».

In der Übersicht siehst du jetzt die Aktion, die du erstellt hast. Über die Buttons rechts kannst du die Aktion bearbeiten oder löschen.

Diese Aktion könntest du jetzt noch ein zweites Mal anlegen, um dem Kunden ein anderes Bestätigungsmail zu schicken. Dafür könntest du den Betreff und die Nachricht zum Beispiel so anpassen:

Beachte, dass du hier die Schalter auf der rechten Seite etwas anpassen musst:

• An Kontakt senden: Ja (Die Email wird an die im Formular eingegebene Adresse gesendet)
• Dem Kontakt antworten: Nein (Die Emailadresse aus dem Formular soll nicht als Reply-To-Adresse eingetragen werden)

Damit hast du in wenigen einfachen Schritten zwei wichtige Formular-Aktionen eingerichtet:

Wenn du möchtest, kannst du weitere Aktionen erstellen. Einige einfache Möglichkeiten:

• Kontakt-Punkte anpassen: Der Kontakt erhält Punkte für die Kontaktaufnahme.
• Kontakt-Segmente anpassen: Der Kontakt wird zu einem Segment hinzugefügt.

Umfangreichere Möglichkeiten erhältst du, wenn du dein Formular als Auslöser einer Kampagne (einer Automatisierung) einsetzt.

Sobald du deine Aktionen erstellt hast, ist dein Formular fertig. Klicke oben rechts auf «Speichern & Schließen», um dein Formular zu speichern.

Formular-Vorschau anzeigen & anpassen

Du gelangst zurück zur Übersichtsseite deines Formulars. Du kannst dir nun eine Vorschau des Formulars anzeigen lassen, indem du oben rechts auf den kleinen Pfeil und dann auf «Vorschau» klickst:

Du kannst aus ein paar einfachen Design-Vorlagen auswählen, um das Erscheinungsbild deines Formulars anzupassen. Klicke dazu oben rechts auf «Ändern», scrolle ganz nach unten und wähle unten rechts aus den «Vorlagen» aus.

Binde das Formular in deine Webseite ein

Jetzt bist du bereit dafür, das Formular in deine Webseite einzubauen. Für dein erstes Formular kannst du die «eingebettete» Einfüge-Option wählen. Du findest den Button auf der Übersichtsseite deines Formulars:

Es öffnet sich ein Popup mit zwei Code-Optionen. Kopiere den Javascript-Code.

Auf deiner Webseite kannst du nun an der passenden Stelle den Javascript-Code einbinden. In Wordpress wählst du dafür etwa den Block «Shortcode» und fügst den Code ein:

So würde das Formular dann auf der Beispiel-Webseite aussehen:

Mehr Formatierungsmöglichkeiten erhältst du mit der «selbst gehosteten» Formular-Einbindung. Diese verlangt Kenntnisse in HTML und CSS. Wir bieten dafür auch Unterstützung im Rahmen unseres Consulting-Angebots, melde dich einfach bei uns.

Werte die eingesendeten Daten aus

Die Daten, die deine Kund:innen über das Formular einsenden, kannst du auf mehrere Arten auswerten und weiterverwenden:

• Daten in Formular-Feldern, die mit deinem Friendly-Automate-CRM verknüpft sind, werden automatisch ins CRM eingetragen bzw. aktualisiert.
• Über deine eingebenen Aktionen hast du weitere nächste Schritte geplant. Du bekommst etwa eine Email mit der Kontaktanfrage oder deinem Kontakt werden Punkte zugewiesen.
• Du kannst Formulare als Auslöser für Kampagnen verwenden.
• In Friendly Automate kannst du dir zudem eine Übersicht aller Formular-Einsendungen anzeigen lassen. Um diese aufzurufen, hast du zwei Möglichkeiten:

Auf der Formular-Übersichtsseite findest du eine Spalte mit Buttons, über die du zu den eingesendeten Ergebnissen gelangst:

Oder du klickst auf das Formular, dann oben rechts auf den kleinen Pfeil und auf «Ergebnisse»:

So sieht eine Beispiel-Ergebnisliste aus. Du hast über die Buttons oben rechts auch die Möglichkeit, die Daten zu exportieren.

Damit weisst du alles, um ein erstes einfaches Formular erfolreich zu erstellen, einzubinden und auszuwerten.