So erstellen Sie ein mehrstufiges Formular mit Elementor

Möchten Sie wissen, wie Sie eine Formular in mehreren Schritten mit Elementor ?

Kennen Sie Typform? Er ist ein Schöpfer von Formen beliebte Online-Plattform, die für ihren interaktiven Stil bekannt ist. In Typeform können Sie eine erstellen Formular Interaktives Online-Spiel mit mehreren Schritten für eine Vielzahl von Zwecken.

Wenn Sie eine WordPress-basierte Website haben, die von . betrieben wird Elementor, können Sie mühelos Ihre integrieren Formen Typeform mit Essential Addons.

Siehe auch: So fügen Sie ein Preisraster in Elementor hinzu

Aber seit Version 2.9, Elementor selbst verfügt über eine Funktion, die Sie zum Erstellen verwenden können Formen in mehreren Etappen. In diesem Artikel zeigen wir Ihnen, wie es mit Hilfe von gehtElementor.

Un Formular Multi-Step selbst ist eine großartige Idee, um Platz in Ihrem Design zu sparen (sei es eine Seite oder eine Theme-Builder-Vorlage). Es ermöglicht Ihnen, eine lange Form in eine einfachere Form zu kürzen.

So erstellen Sie ein mehrstufiges Formular in Elementor

Bevor Sie beginnen, stellen Sie sicher, dass Sie Ihr Elementor auf die Pro-Version aktualisiert haben, falls Sie dies nicht getan haben, da das Formular-Widget (das Elementor-Widget zum Erstellen von Formularen) nur in der Pro verfügbar ist.

Lesen Sie auch: So erstellen Sie ein Kontaktformular in Elementor

In diesem Artikel springen wir direkt zum Hinzufügen des Formular-Widgets. Das mehrstufige Formular, das wir erstellen werden, besteht aus drei Schritten wie folgt:

• Schritt 1: Name und Geschlecht
• Schritt 2: Telefon und E-Mail
• Schritt 3: Optionsfeld

Ziehen Sie zuerst das Formular-Widget in das Bearbeitungsfeld von Elementor.

Gehen Sie zum Einstellungsfeld auf der linken Seite, um die Einstellungen vorzunehmen. Im Block Formularfelder sous die Registerkarte Inhalt, Definieren Sie die Felder nach Ihren Bedürfnissen. In unserem Fall sind die Felder wie folgt:

• Name
• Genre
• Telefon
• Email
• Hobby

Wenn Sie mit dem Hinzufügen und Definieren der benötigten Formularfelder fertig sind, fügen Sie ein weiteres Feld hinzu und legen Sie den Feldtyp auf . fest Schritt.

Siehe auch: So erstellen Sie ein abgerundetes Bild in Elementor

Dieser Schritt fügt automatisch ein neues Feld in der obersten Reihenfolge und ein neues Feld unten hinzu. Sie können die Beschriftung des oberen Felds auf etwas wie setzen Schritt 1.

Ziehen Sie dann das untere Feld und platzieren Sie es direkt über dem Feld aus dem zweiten Schritt (in diesem Fall das Feld Telefon).

Fügen Sie ein weiteres Feld hinzu und legen Sie den Feldtyp fest auf Schritt. Ziehen Sie es und platzieren Sie es im dritten Schritt direkt über dem Feld (in diesem Fall dem Hobby-Feld).

Hier. Sie können das Ergebnis in der Vorschau anzeigen, bevor Sie das Formular anpassen. Standardmäßig ist der Schritttyp auf Zahl und Text eingestellt.

Sie können aus dem Block heraus bearbeiten Schrittparameter unter der Registerkarte Inhalt.

Sie können auf die Registerkarte zugreifen Design um Ihr Formular anzupassen. Es gibt 5 Einstellblöcke, die Sie öffnen können.

• Form : Sie können diesen Block öffnen, um den Abstand zwischen den Spalten und Zeilen des Formulars, die Typografie (Schriftfamilie, Schriftgröße, Schriftstil usw.) der Beschriftungen des Formulars und die Farbe des Textes des letzteren festzulegen define .
• Felder : Sie können diesen Block öffnen, um die Typografie der Formularfelder, die Textfarbe der Felder, den Hintergrund, die Rahmenbreite, die Rahmenfarbe und den Rahmenradius festzulegen.
• Taste : Sie können diesen Block öffnen, um die Schaltflächen anzupassen. Sei es der Senden-Button, der vorherige Button oder der nächste Button. Sie können Elemente wie Texttypografie, Textfarbe, Hintergrundfarbe usw. definieren.
• Nachricht: Sie können diesen Block öffnen, um die Typografie der Nachrichten sowie die Farbe des Textes festzulegen.
• Schritte: Sie können diesen Block öffnen, um die Typografie der Schritte, die Farbe, die Breite des Trennzeichens, den Abstand des Trennzeichens usw. zu definieren.

Sobald Sie mit der Bearbeitung Ihrer Vorlage fertig sind, können Sie sie veröffentlichen oder aktualisieren.

Lesen Sie auch: So erstellen Sie einen Teammitgliedsbereich mit Elementor 

Wenn Sie das soeben erstellte Formular in eine Gutenberg-Seite einfügen möchten (oder vielleicht in einen Blog-Beitrag einfügen möchten), können Sie das Formular-Widget als globales Widget speichern. Anschließend können Sie das Widget mit dem Plugin importieren import Elementor-Blöcke für Gutenberg.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

Hier ist ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie mit Elementor ein mehrstufiges Formular erstellen.  Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...