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 einfaches 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 «Einzelformular».

Ü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, Veröffentlicht 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 «Erfolgreiche Submit Aktion» 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.
• Redirect 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 «Redirect 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 «Anwenden» 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: Für einzeilige Texteingaben wie Namen oder Adressen.
• Textbereich: Für mehrzeilige Texteingaben wie eine Kontaktanfrage.
• Email: Für Emailadressen.

Wähle für die Namenseingabe zuerst ein Text-Feld.

Ü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 Platzhalter (Text im Eingabefeld) ein.
• Kontakt-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.
• Bestätigung: 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 «Platzhalter» einen Platzhalter-Text, zum Beispiel «Vorname» einzutragen.

So sieht das Formular mit Labels aus:

So sieht das Formular mit Platzhaltern aus:

Kontakt-Feld

Gehe jetzt in den nächsten Reiter «Kontakt-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 Feld «Kontakt Vorname».

Bestätigung

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

So sieht der «Validation Text» in der Formular-Vorschau aus, wenn das Formular ohne dieses Feld abgeschickt wurde:

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 «Kontakt Nachname»).
• Emailadresse: Dafür wählst du aus dem Dropdown-Menü die Option «Email». Dieses Feld ist bereits automatisch mit dem Email-Feld im CRM verknüpft.
• Texteingabe: Für ein Nachrichten-Feld wählst du aus dem Dropdown-Menü die Option «Textbereich». 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 nochmals 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 «Anwenden» 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.

Öffne dazu das Dropdown-Menü und wähle «Werte des Formulars senden».

(Die ähnliche Aktion «Sende dem User eine Email» würde den Mitarbeiter lediglich informieren, dass das Formular abgeschickt wurde, ohne die Inhalte des Formulars zu übermitteln.)

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

• Name: Benenne hier die Aktion, zum Beispiel «Kontaktformular an Mitarbeiter».
• 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.

💡
Felder, wie hier {formfield=vorname}, kannst du über die Buttons im Popup etwas weiter unten rechts einfügen.
• 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 der Mitarbeiterin ein.

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.

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.
• Listen des Kontakts anpassen: Der Kontakt wird zu einem Segment hinzugefügt.
• Email an Kontakt senden: Der Kontakt erhält eine Email.
• Double-Opt-in (DOI): Der Kontakt erhält eine Email, um seine Emailadresse zu bestätigen.

Sobald du deine Aktionen erstellt hast, ist dein Formular fertig. Klicke oben rechts auf «Sichern & 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.

Einige Vorlagen-Beispiele:

Ohne Vorlage

Sunday

Neopolitan

Skyline

Binde das Formular in deine Webseite ein

Jetzt bist du bereit dafür, das Formular in deine Webseite einzubauen. Wähle für dein erstes Formular die automatische Einfüge-Option. 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 Kontaktformular dann auf der Beispiel-Webseite aussehen:

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.
• 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 rechts neben dem entsprechenden Formular einen roten Button, mit dem 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!

Hast du noch Fragen? Gerne helfen wir Dir per 📧 E-Mail, ☎️ Telefon und 👩‍💻 Videoanrufen.

Hier gelangst du zurück zur Hilfe-Startseite:

Friendly Automate