Springe zum Hauptinhalt

So erstellen Sie ein mehrstufiges Formular mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie wissen, wie Sie mit Elementor ein mehrstufiges Formular erstellen?

Kennen Sie Typeform? Er ist ein beliebter Online-Formularersteller, der für seinen interaktiven Stil bekannt ist. In Typeform können Sie ein interaktives Online-Formular mit mehreren Schritten für eine Vielzahl von Zwecken erstellen.

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

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

Aber seit Version 2.9 verfügt Elementor selbst über eine Funktion, mit der Sie mehrstufige Formulare erstellen können. In diesem Artikel zeigen wir Ihnen, wie es mit Hilfe von Elementor geht.

Ein Formular mit mehreren Schritten selbst ist eine großartige Idee, um Platz in Ihrem Design zu sparen (egal ob es sich um eine Seite oder eine Theme-Builder-Vorlage handelt). 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Formular in mehreren Schritten erstellen

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).

Formular in mehreren Schritten erstellen

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 Stil um Ihr Formular anzupassen. Es gibt 5 Einstellblöcke, die Sie öffnen können.

Erstellen Sie ein mehrstufiges Formular mit Elementor

  • Formular : 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!

Fazit

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren