KI-Zusammenfassung
Möchten Sie ein interaktives Formular erstellen, um Leads auf Ihrer WordPress-Website zu erfassen? Mit unserem Lead Forms Addon können Sie ein Formular erstellen, das es Benutzern ermöglicht, beim Ausfüllen Ihres Formulars Schritt für Schritt vorzugehen.
Dieses Tutorial zeigt Ihnen, wie Sie das Lead Forms Addon in WPForms installieren und verwenden.
Voraussetzungen:
- Sie benötigen die Pro-Lizenzstufe oder höher, um auf das Lead Forms Addon zugreifen zu können
- Stellen Sie sicher, dass Sie die neueste Version von WPForms installiert haben, um die mindestens erforderliche Version für das Lead Forms Addon zu erfüllen
Was sind Lead-Formulare?
Lead Forms sind Online-Formulare, die zum Sammeln von Informationen von potenziellen Kunden, auch „Leads“ genannt, verwendet werden. Sie ähneln Konversationsformularen, da sie es Benutzern ermöglichen, beim Ausfüllen des Formulars Schritt für Schritt vorzugehen.
Lead Forms bieten eine Möglichkeit, Kontaktinformationen von Benutzern zu sammeln, die an Ihren Produkten oder Dienstleistungen interessiert sind, ohne sie mit mehreren Feldern gleichzeitig zu überfordern.
Installation des Lead Forms Addons
Bevor Sie beginnen, müssen Sie sicherstellen, dass WPForms auf Ihrer WordPress-Site installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben.
Nachdem Sie dies getan haben, können Sie das Lead Forms Addon schnell installieren und aktivieren.
Aktivieren des Lead-Formular-Modus
Die Einstellungen für das Lead Forms Addon befinden sich im Formular-Builder. Um fortzufahren, müssen Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Builder zuzugreifen.
Um Ihr Formular in ein Lead-Formular umzuwandeln, gehen Sie zu Einstellungen » Lead Forms. Sie müssen die Option Lead Form Mode aktivieren umschalten.
Sie sehen eine Einblendung, die Sie darüber informiert, dass Ihr Formular neu strukturiert wird. Klicken Sie zum Fortfahren auf Lead Forms aktivieren.
Sobald Sie den Lead-Formular-Modus aktiviert haben, werden zusätzliche Optionen angezeigt. Wir werden diese Optionen durchgehen, wenn wir das Lead-Formular anpassen.
Sie sehen auch einen Hinweis, der Sie auffordert, das Formular im Formular-Builder in der Vorschau anzuzeigen und sicherzustellen, dass die Felder richtig formatiert sind, bevor Sie Ihre Änderungen speichern. Klicken Sie auf den Link Felder-Tab, um auf Ihre Felder zuzugreifen.
Auf dem Reiter Felder werden Sie feststellen, dass neben jedem Feld Seitenumbrüche hinzugefügt wurden. Alle Felder werden auch in der Mitte ausgerichtet und verwenden eine Vollbild-Option.
Hinweis: Sie können die Felder Layout oder Eintragvorschau nicht zum Formular-Builder hinzufügen, sobald der Lead-Formular-Modus aktiviert ist.
Wenn der Lead-Formular-Modus aktiviert ist, sind Feldgrößen, Layout und Farben für jedes Feld deaktiviert. Alle Anpassungen werden auf der Seite mit den Lead-Formular-Einstellungen vorgenommen.
Sie können das Formular schnell speichern und in der Vorschau anzeigen, um zu sehen, wie das Lead-Formular im Frontend aussieht.
Anpassen Ihres Lead-Formulars
Das Lead Forms Addon bietet verschiedene Optionen, mit denen Sie das Erscheinungsbild Ihres Lead-Formulars anpassen können. Alle Anpassungsoptionen finden Sie auf der Einstellungsseite für Lead Forms.
Nachfolgend gehen wir die verfügbaren Anpassungsoptionen durch.
Titel des Lead-Formulars
Der Titel des Lead-Formulars ermöglicht es Ihnen, einen Titel für Ihr Lead-Formular einzugeben. Der Titel ist im Frontend sichtbar, wenn Benutzer Ihr Formular ausfüllen.
Wir empfehlen, einen kurzen, aber aussagekräftigen Titel zu verwenden, damit die Benutzer den Zweck Ihres Lead-Formulars kennen, bevor sie es ausfüllen.
Wenn Sie das Formular im Frontend in der Vorschau anzeigen, wird der Titel oben im Lead-Formular auf der ersten Seite angezeigt.
Akzentfarbe
Diese Einstellung ermöglicht es Ihnen, die Standardfarbe für Ihre Schaltflächen, Fortschrittsbalken und Symbole zu ändern. Wenn Sie auf das Dropdown-Menü klicken, können Sie mit der Farbauswahl eine Akzentfarbe auswählen.
Alternativ können Sie den HEX-Code für die Farbe Ihrer Marke in das Feld Akzentfarbe eingeben.
Erweiterte Stileinstellungen
Es gibt erweiterte Einstellungen, um Ihr Lead-Formular weiter anzupassen. Um auf diese Optionen zuzugreifen, müssen Sie die Erweiterten Stileinstellungen auf die Ein-Position schalten.
Nach der Aktivierung finden Sie zusätzliche Optionen. Nachfolgend werden die verfügbaren Optionen behandelt.
Formularcontainer
Unter dem Schalter für erweiterte Stileinstellungen finden Sie die Option Formularcontainer. Wenn diese aktiviert ist, wird das Lead-Formular in einen Container eingeschlossen, sodass es sich von anderen Elementen auf der Seite abhebt.
Nachdem Sie die Option Formularcontainer aktiviert haben, werden zusätzliche Styling-Optionen angezeigt.
- Schatten: Diese Option fügt dem Lead-Formular-Container automatisch einen Schatten hinzu, wenn sie aktiviert ist. Dies ist nützlich, wenn Ihr Lead-Formular vom Hintergrund abgehoben erscheinen soll.
- Abgerundete Ecken: Diese Einstellung verleiht Ihrem Lead-Formular ein modernes Design, indem sie dem Container abgerundete Ecken hinzufügt, wenn sie aktiviert ist.
So sieht das Formular im Frontend mit aktiviertem Schatten und abgerundeten Ecken aus.
Unter den Container-Einstellungen finden Sie zusätzliche Optionen, um die Farben der Elemente im Lead-Formular anzupassen.
- Hintergrund des Containers: Diese Einstellung steuert die Farbe des Lead-Formular-Containers. Sie können die Farbauswahl verwenden oder manuell einen HEX-Wert eingeben, um die Farbe des Formular-Containers zu aktualisieren.
- Feldrahmen: Diese Option wird verwendet, um die Rahmenfarbe der Felder in Ihrem Lead-Formular zu ändern.
- Primärer Text: Mit dieser Option können Sie die Farbe von primären Texten wie Seitentiteln und Feldbezeichnungen ändern.
- Sekundärer Text: Mit dieser Option können Sie die Farbe von sekundären Elementen wie Eingabetexten oder Feld-Beschreibungen aktualisieren.
Stileinstellungen exportieren / importieren
Das Lead Forms Add-on ermöglicht den Import und Export von Stileinstellungen von einem Lead Form zu einem anderen. Alle von Ihnen konfigurierten Stileinstellungen werden als Export-Strings im Feld Ihre Stileinstellungen exportieren gespeichert.
Um Ihre Lead Form Stileinstellungen zu exportieren, klicken Sie auf das Kopieren-Symbol neben dem Feld Ihre Stileinstellungen exportieren.
Wenn Sie Stileinstellungen von einem anderen Lead Form kopiert haben, können Sie die Stile schnell in das Lead Form einfügen und importieren, das Sie gerade bearbeiten.
Um Stile von einem anderen Lead Form zu importieren, müssen Sie die kopierten Stile in das Feld Neue Stileinstellungen importieren einfügen.
Sobald Sie die Stile hinzugefügt haben, klicken Sie auf die Schaltfläche Stileinstellungen importieren, um fortzufahren.
Sie sehen eine Überlagerung, die Sie darüber informiert, dass der Import die Stileinstellungen Ihres Lead Forms aktualisiert. Klicken Sie auf Ja, importieren, um fortzufahren.
Nachdem Sie die Stileinstellungen importiert haben, werden die erweiterten Styling-Einstellungen mit den Werten aktualisiert, die Sie während des Imports eingegeben haben.
Hinweis: Stellen Sie beim Importieren von Stileinstellungen sicher, dass Sie die kopierten Stile aus dem Feld Ihre Stileinstellungen exportieren korrekt einfügen. Achten Sie auch darauf, keine zusätzlichen Leerzeichen zum Import-String hinzuzufügen.
Sie erhalten eine Fehlermeldung für einen ungültigen Import-String, wenn der von Ihnen eingefügte Import-String nicht dem erwarteten Format entspricht.
Best Practices für Lead-Formulare
Wie bereits erwähnt, strukturiert die Aktivierung von Lead Forms Ihr Formular neu. Hier sind einige Best Practices, um das Erscheinungsbild Ihres Lead Forms zu verbessern.
1. Verwandte Felder kombinieren
Verwandte Felder wie Name und E-Mail können auf einer Seite des Lead Forms gruppiert werden, indem Sie sie per Drag & Drop auf die entsprechende Seite ziehen.
Per Konvention sollten Lead Forms 1–3 verwandte Felder pro Seite haben. Es wird empfohlen, jede Seite kurz zu halten, damit sich Benutzer beim Ausfüllen Ihres Formulars nicht eingeschüchtert fühlen.
2. Seitentitel verwenden
Standardmäßig werden Feldbezeichnungen als Seitentitel auf einer Lead Form-Seite verwendet. Sobald Sie verwandte Felder gruppiert haben, verwendet jedes Feld seine Feldbezeichnung als Titel.
Anstatt einzelne Titel für jedes Feld auf der Seite zu haben, können Sie einen generischen Titel erstellen, der beschreibt, worum es auf der Seite geht.
Um einen Seitentitel hinzuzufügen, klicken Sie auf ein Seitenumbruch-Feld, um seine Feldoptionen zu öffnen. Im Tab Allgemein finden Sie ein Textfeld Seitentitel, um einer Lead Form-Seite einen Titel hinzuzufügen.
Sobald Sie den Seitentitel hinzugefügt haben, wird er direkt über den Feldern auf dieser Seite angezeigt.
3. Platzhaltertext verwenden
Auf Lead Forms werden standardmäßig Feldbezeichnungen als Seitentitel verwendet. Wenn Sie Ihren Formularseiten einen Seitentitel hinzugefügt haben, können Sie Feldbezeichnungen deaktivieren und Platzhaltertext verwenden, um das Design des Lead Forms zu verbessern.
Um eine Feldbezeichnung zu deaktivieren, klicken Sie auf das Feld, um das Menü Feldoptionen zu öffnen. Im Tab Erweitert finden Sie die Option, einen Platzhalter für das Feld hinzuzufügen.
Nachdem Sie den Platzhaltertext hinzugefügt haben, scrollen Sie nach unten und schalten Sie die Option Bezeichnung ausblenden auf Ein.
4. Symbolauswahl für Optionsfelder und Kontrollkästchen verwenden
Wenn Sie Kontrollkästchen oder Multiple-Choice-Felder in Ihrem Lead-Formular verwenden, können Sie für jeden Eintrag Symbole hinzufügen. Dies macht Ihr Formular für Benutzer optisch ansprechend, wenn sie das Lead-Formular ausfüllen.
Um diese Funktion zu nutzen, fügen wir unserem Lead-Formular einen Seitenumbruch und ein Multiple-Choice-Feld hinzu. Sie können ein Feld hinzufügen, indem Sie darauf klicken oder es in den Formular-Vorschau-Bereich ziehen und dort ablegen.
Wählen Sie als Nächstes das Multiple-Choice-Feld aus, um seine Feldoptionen zu öffnen. Wir passen die Beschriftung und die Auswahlmöglichkeiten des Feldes für unser Beispiel an.
Scrollen Sie als Nächstes nach unten und aktivieren Sie die Option Symbolauswahl verwenden.
Sobald Sie die Symbolauswahl aktiviert haben, übernehmen die Symbole die Akzentfarbe, die Sie bei der Anpassung Ihres Lead-Formulars angegeben haben. Sie können Symbole aus der Font Awesome-Symbolbibliothek auswählen.
Sie können auch die Größe der Symbole in Ihrem Formular anpassen.
Wenn Sie mit der Anpassung Ihres Lead-Formulars fertig sind, klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.
Hier ist ein interaktives Formular, das Ihnen einen Überblick darüber gibt, wie diese Formulare auf Ihrer Website erscheinen würden.
Häufig gestellte Fragen
Dies sind die Antworten auf einige Top-Fragen zur Verwendung des Lead Forms Addons mit WPForms.
Kann ich das Lead Forms Addon mit anderen WPForms Addons verwenden?
Ja. Das Lead Forms Addon ist mit den meisten unserer anderen Addons kompatibel. Sobald Sie Lead Forms aktivieren, können Sie es mit jedem unserer Zahlungs- und Marketing-Addons integrieren.
Das Lead Forms Addon ist jedoch eine Alternative zu den Addons Formulare Seiten und Konversationsformulare, die zur Vereinfachung der Lead-Erfassung entwickelt wurden. Sie können also keines dieser Addons verwenden, wenn der Lead-Formular-Modus für ein Formular aktiviert ist.
Das war's! Sie wissen jetzt, wie Sie das Lead Forms Addon in WPForms installieren und anpassen.
Möchten Sie als Nächstes Ihr Lead-Formular mit einem Marketingdienst verbinden, um Leads einfach nachzuverfolgen? Lesen Sie unbedingt unsere Tutorials zur Marketingintegration für Mailchimp, Constant Contact, AWeber, Drip, Campaign Monitor und GetResponse, um mehr zu erfahren.
