Kontaktformulare mit Thrive Architect erstellen

In diesem Tutorial lernst du, wie du Kontaktformulare mit Thrive Architect erstellst und bearbeitest.

1 Das Formular auswählen

Du hast die Wahl zwischen dem einfachen Kontaktformular und dem Lead Generation Formular, wobei ich dir das Lead Generation Formular empfehlen würde, da es mehr Möglichkeiten der Individualisierung bietet.

Suche also zunächst in den Thrive Architekt Elementen nach dem Lead Generation Formular und ziehe es per drag&drop an die Stelle an deiner Seite, an der du gerne ein Formular hättest.

Sobald das Formular an seinem Platz ist, wird dir Thrive eine Auswahl an Templates zeigen, aus denen du ein zu deiner Seite passendes Layout wählen kannst. 

2 Felder einstellen

Im nächsten Schritt individualisieren wir dein Formular für deine Bedürfnisse. Wenn du das Formular in Thrive ausgewählt hast (nach Schritt 1 sollte es bereits ausgewählt sein, ansonsten klicke einfach auf das Formular und stelle sicher, dass am oberen Bildrand “Form” ausgewählt ist), siehst du auf der linken Seite die Optionen, in denen du dein Formular bearbeiten und verändern kannst.

Zunächst solltest du dich dem Punkt “Form Fields” widmen. Hier kannst du einstellen, welche Felder dein Formular haben soll. Mit “Add new” kannst du neue Felder hinzufügen und mit einem Klick auf den Papierkorb am Rand jedes Feldes in der Liste kannst du das jeweilige Feld entfernen. Mit einem einfachen drag&drop am linken Rand jedes Feldes in der Liste kannst du die Reihenfolge der Felder im Formular verändern.

Mit dem Bleistift Icon kannst du die einzelnen Felder bearbeiten. Der “Field type” gibt an, um was für ein Feld es sich handeln soll. Hier kannst du vordefinierte Felder für Namen, Telefonnummer oder E-Mail auswählen, kannst aber auch Spezielfelder, wie einen Dokument-Upload, ein Auswahlfeld oder einen Drop-Down einfügen. Im Feld “Name” kannst du dem Feld einen Namen geben, der nicht im Formular und damit nicht für den User zu sehen ist. Hier solltest du Namen wählen, die es dir ermöglichen die Felder für einen späteren Schritt zu unterscheiden. Im “Placeholder” Feld kannst du einen Text eintragen, der angezeigt wird solange das Feld im Formular unausgefüllt ist. Mit “Required” legst du fest, ob User das Feld ausfüllen müssen und “Show label” blendet die Feld-Beschriftung im Formular ein. Es empfiehlt sich, Beschriftungen für Felder einzublenden, da dies die Orientierung im Formular einfacher macht.
Wenn du mit den Einstellungen zufrieden bist, klicke auf “Apply”, um die Einstellungen für das bearbeitete Feld zu übernehmen.

3 Layout bearbeiten

Nachdem dein Formular deinen inhaltlichen Anforderungen entspricht, sollten wir als nächstes das äußere Erscheinungsbild deinen Bedürfnissen anpassen.

Klicke dazu auf den orangen Button “Edit Form Elements”. Damit kannst du das Formular auf einer tieferen Ebene bearbeiten. Du hast jetzt Zugriff auf jedes Element, aus dem dein Formular besteht und kannst es direkt in Thrive Architect verändern.

Wenn du Beschriftungen eingeblendet hast, kannst du jetzt direkt im Formular die Beschriftungen deiner Felder verändern und deinen Bedürfnissen anpassen (z.B. wirst du wahrscheinlich alle Beschriftungen auf Deutsch übersetzen wollen, wenn du eine deutschsprachige Seite betreibst). Solltest du im letzten Schritt Felder gelöscht haben, sind wahrscheinlich leere “Columns” zurück geblieben. Alle leeren und unerwünschten Elemente kannst du in diesem Bearbeitungsmodus mit einem einfachen Klick auf den Papierkorb, am Rand des jeweiligen Elements, löschen.

Weiters kannst du das Aussehen und die Farbe sowie die Beschriftung deines “Absenden” Buttons verändern, kannst Hintergrundfarben für die Felder einstellen und auch Schriftart und Farbe der Texte verändern und deinem Seiten-Layout anpassen. Wenn du mit deinen Einstellungen zufrieden bist, klickst du auf “Done” am unteren Bildrand und speicherst dein Formular ab.
(Solltest du eine andere Hintergrundfarbe für das gesamte Formular wünschen, kannst du diese in den übergeordneten Formular-Optionen aus Schritt 2 verändern.)

4 Formular verknüpfen

Als nächstes kommen wir zum wichtigsten Teil der Einstellungen: dem Einrichten einer Verknüpfung deines Formulars.

Dazu klickst du erneut auf die Main Options deines Formulars und klickst dort auf den Button “Add Connection”. Hier kannst du einstellen, wie du die ausgefüllten Formulare erhalten möchtest (z.B. per E-Mail).

Dann kannst du das E-Mail aufsetzen und einstellen, wie die Seite dir die Nachrichten senden soll, indem du auf “Compose Email” klickst. Es öffnet sich ein “Compose Email” Fenster, in dem du einträgst, an welche Adresse die Nachrichten gesandt werden, wer als Absender genannt wird und wie der Betreff lauten soll. Als Nachricht ist der Shortcode “[all_form_fields]” voreingestellt. Mit diesem Shortcode erhältst du automatisch eine Liste aller ausgefüllten Felder und ihrer Beschriftungen. Solltest du diese Nachricht für deine persönlichen Bedürfnisse verändern wollen, kannst du aus dem Dropdown Menü auf jedes deiner Felder zugreifen und in deine Nachricht einfügen.
Wichtig hierbei ist, dass du dem Feld in Schritt 2 einen Namen gegeben hast, anhand dem du es in dieser Liste wieder findest.

Wenn du die Nachricht an dich erstellt hast, kannst du entscheiden, ob User auch eine Bestätigung erhalten sollen. Solltest du dich dafür entscheiden, kannst du diese Nachricht auf die selbe Art verfassen, wie du es zuvor getan hast.
Wenn du mit deinen Einstellungen zufrieden bist, kannst du sie speichern indem du auf “Save and Apply” klickst.

In einem letzten Schritt solltest du jetzt festlegen, was nach dem Absenden der Nachricht passieren soll. Um das zu tun, findest du “After successful submission” in den Main Options deines Formulars. Hier kannst du User entweder zu einer anderen Seite weiterleiten (”Redirect to Custom URL”) oder eine einfache Sendebestätigung anzeigen lassen (”Show success notification”). Wenn du eine passende Bestätigungs-Seite hast, kannst du diese hier verwenden, ansonsten sollte eine eingeblendete Sendebestätigung ausreichen, um Usern genug Feedback zu geben, damit diese wissen, dass ihre Nachricht erfolgreich abgeschickt wurde.

5 Testen

Gratuliere! Du hast erfolgreich ein Formular in Thrive Architect erstellt.
Jetzt solltest du das Formular noch ein paar mal testen und überprüfen, ob alle Nachrichten genau so ankommen, wie du es dir vorgestellt hast.
Wenn alles passt steht der Veröffentlichung deiner Seite nichts mehr im Wege.

Ich hoffe meine Anleitung hat dir geholfen. Wenn du noch Fragen oder Anmerkungen hast, lass gerne ein Kommentar zurück. Ich freue mich immer über Feedback.
Viel Erfolg mit deiner Webseite!

Herzlichst,
Sara