Priorisierter Support
Help Center / Themes / Hello Biz Theme / Formular Lite

Formular Lite

Zuletzt aktualisiert: September 3, 2025

Das Widget hinzufügen

So greifen Sie auf ein Widget zu und verwenden es:

  1. Klicken Sie im Elementor Editor auf +.
    Alle verfügbaren Widgets werden angezeigt.

  2. Klicken oder ziehen Sie das Widget auf die Arbeitsfläche. Weitere Informationen finden Sie unter Elemente zu einer Seite hinzufügen.

Was ist das Formular-Lite-Widget?

Informationen von Besuchern zu sammeln, kann eine der wichtigsten Funktionen sein, die Ihre Website für Sie erfüllen kann.

Das Formular-Lite-Widget ermöglicht es Ihnen, schnell und effizient ein Formular zu erstellen, mit dem Besucher Informationen übermitteln können, die Ihnen per E-Mail zugesandt und in Ihrem WP-Admin-Bereich gespeichert werden.

Sehen Sie alle verfügbaren Optionen des Formular-Lite-Widgets.

Häufiger Anwendungsfall

Alex möchte E-Mail-Reservierungen für seine Sportbar entgegennehmen. Er platziert einen CTA auf seiner Startseite, der mit einem Reservierungsformular verknüpft ist. Wenn Benutzer das Formular mit einer Reservierungsanfrage ausfüllen, wird diese an die E-Mail-Adresse der Bar gesendet, damit Alex einen Tisch reservieren kann.

Zusätzliche Anwendungsfälle

  • Lassen Sie Besucher ein Formular ausfüllen, um Ihren Newsletter zu abonnieren.
  • Sammeln Sie Bewerbungen über ein Formular auf Ihrer Website.
  • Besucher Ihrer Website können ein Formular absenden, damit einer Ihrer Vertreter mit ihnen in Kontakt treten kann.

Ein Formular-Lite-Widget hinzufügen: Schritt für Schritt

Im folgenden Beispiel verwenden wir ein Reservierungsformular. Kunden, die einen Tisch reservieren möchten, füllen das Formular aus, und wenn sie es absenden, erhält der Barbesitzer, Alex, eine E-Mail. Die Informationen werden auch im WP-Admin-Bereich verfügbar sein.

Formular hinzufügen

So fügen Sie ein Formular-Lite-Widget hinzu:

  1. Fügen Sie ein Formular-Lite-Widget zur Arbeitsfläche hinzu.
  2. Wählen Sie eines der Voreingestellten Formulardesigns.
  3. Öffnen Sie das Text-Feld.
  4. Geben Sie im Panel, im Textfeld Überschrift, Jetzt reservieren!

     ein.
  5. Geben Sie im Textfeld Beschreibung Sichern Sie sich Ihren Platz, indem Sie uns eine Reservierungsanfrage senden ein.
    Das Formular-Lite-Widget enthält standardmäßig Felder für Name, E-Mail und Nachricht. Wir möchten die Personen jedoch auch anrufen, um ihre Reservierung zu bestätigen, daher fügen wir ein Telefonfeld hinzu.
  6. Öffnen Sie im Panel den Abschnitt Formularfelder.
  7. Klicken Sie auf Element hinzufügen.
  8. Verwenden Sie das Dropdown-Menü Typ und wählen Sie Tel.
  9. Geben Sie im Textfeld „Beschriftung“ Telefon ein.
  10. Stellen Sie „Erforderlich“ auf Ja.
  11. Ziehen Sie das neue Feld unter das E-Mail-Feld.
    Nun stellen wir sicher, dass die Formularübermittlungen an den richtigen Ort gelangen.
  12. Schließen Sie den Abschnitt Formularfelder.
  13. Öffnen Sie das Feld Aktionen nach dem Absenden.
  14. Geben Sie im Feld An Ihre E-Mail-Adresse ein.
  15. Geben Sie in der Betreffzeile Reservierungsanfrage ein.

    Wenn Benutzer ihr Formular durch Klicken auf die Schaltfläche Senden absenden, wird eine E-Mail an die von Ihnen eingegebene Adresse gesendet. Die Übermittlung wird auch in Ihrem WP-Admin gespeichert. Einzelheiten finden Sie unter Formularübermittlungen verwalten.

Einstellungen für das Formular-Lite-Widget

Sie können Ihre Widgets mithilfe von Inhalts-, Stil- und anderen erweiterten Parametern anpassen, was Ihnen große Flexibilität bei der Anpassung an Ihre Bedürfnisse bietet. Klicken Sie auf die Registerkarten unten, um alle verfügbaren Einstellungen für das Formular-Widget anzuzeigen.

Tab „Inhalt“

Formularfelder, Schritte, Schaltflächen und Steuerelemente hinzufügen, löschen und bearbeiten. Legen Sie fest, was passiert, nachdem Besucher ihre Antworten übermittelt haben.

Wählen Sie eine der Formularvorlagen, um mit Ihrem Design zu beginnen.

  • Überschrift: Geben Sie eine Überschrift für Ihr Formular in das Textfeld ein. Die Überschrift sollte so kurz wie möglich sein, unter fünf Wörtern.
  • HTML-Tag der Überschrift: Der HTML-Tag teilt Suchmaschinen und Barrierefreiheitssoftware die Wichtigkeit des Elements mit. Wir empfehlen, die Standardeinstellung beizubehalten, aber Sie können das Dropdown-Menü verwenden, um den HTML-Tag zu ändern.
  • Beschreibung: Geben Sie alle Details ein, die Sie zu Ihrem Formular angeben möchten.

Geben Sie Ihrem Formular einen Namen.

Bearbeiten und erstellen Sie Felder für Ihr Formular. Jedes Feld repräsentiert Daten, die Sie von Ihren Besuchern sammeln, wie z. B. Name und E-Mail.

Es gibt zwei Symbole, die rechts neben dem Feldnamen erscheinen:

– Dieses Menüelement duplizieren. Das Kopieren hilft, die Konsistenz in Ihrem Menü zu wahren.

– Dieses Menüelement löschen.

Wenn Sie auf einen Feldnamen klicken, erscheinen zusätzliche Optionen unter zwei Registerkarten – Inhalt und Erweitert.

Auf der Registerkarte Inhalt sind die folgenden Optionen verfügbar:

  • Typ: Legen Sie den Feldtyp fest, um irrelevante Daten herauszufiltern. Wenn Sie beispielsweise den Typ auf E-Mail setzen, müssen Besucher gültige E-Mail-Adressen eingeben. Weitere Details finden Sie unter Feldtypen.
  • Beschriftung: Erstellen Sie einen Namen für das Feld, z. B. Name, um Benutzern mitzuteilen, welche Informationen sie eingeben sollen.
  • Platzhalter: Auch bekannt als Geistertext, ist dies Text, der im Feld erscheint, um detailliertere Informationen über das Feld zu geben, zum Beispiel in einem Feld namens Lieblingsfilme könnte der Geistertext lauten: „Listen Sie Ihre drei Top-Auswahlen auf.“
  • Erforderlich: Verwenden Sie den Schalter, um festzulegen, ob Benutzer dieses Feld ausfüllen müssen, um das Formular abzusenden.
  • Spaltenbreite: Legen Sie fest, wie viel Platz das Feld einnehmen soll. Dies kann für Felder verwendet werden, in denen Sie kurze Antworten erwarten, oder wenn Sie möchten, dass mehrere Felder in einer Zeile erscheinen. Wenn Sie beispielsweise möchten, dass zwei Felder in einer Zeile erscheinen, geben Sie jedem eine Breite von 50 %.

Erstellen Sie ein leeres Feld für Ihr Formular.

Verwenden Sie den Schalter, um den Namen des Feldes entweder anzuzeigen oder auszublenden.

Verwenden Sie den Schalter, um anzuzeigen oder auszublenden, ob das Feld erforderlich ist. Es ist gängige Praxis, diese Felder zu markieren, damit Besucher wissen, dass sie diese ausfüllen müssen.

Spaltenbreite: Legen Sie die Größe des für die Schaltfläche zugewiesenen Bereichs fest. Dies beeinflusst die Platzierung der Schaltfläche.

Wenn Ihre Spaltengröße beispielsweise 100 % beträgt und Sie die Schaltfläche rechts ausrichten, befindet sich die Schaltfläche auf der rechten Seite. Wenn Sie jedoch eine Spaltenbreite von 50 % festlegen und die Schaltfläche rechts ausrichten, erscheint sie in der Mitte des Formulars.

Die Schaltfläche Absenden sendet die Informationen im Formular an den Website-Betreiber. Sie wird der letzten Seite des Formulars hinzugefügt.

Wenn Sie die Schaltfläche nicht mit Absenden beschriften möchten, verwenden Sie das Textfeld, um eine andere Beschriftung einzugeben.

Sie können der Schaltfläche ein kleines Bild hinzufügen:

  • Für kein Symbol klicken Sie auf .
  • Um Ihr eigenes .svg-Bild als Symbol hochzuladen, klicken Sie auf
  • Um ein Symbol aus der Bibliothek auszuwählen, klicken Sie auf das Symbol.

Weisen Sie Ihrer Schaltfläche eine ID zu, damit Sie sie später identifizieren können. Dies hilft oft bei der Verarbeitung der gesammelten Informationen.

Stellen Sie auf Ja, wenn Sie Besuchern nach dem Absenden eines Formulars eine andere Seite anzeigen möchten. Die Seite könnte ein einfaches Dankeschön enthalten oder zusätzliche Informationen wie: „Wir melden uns innerhalb von 48 Stunden bei Ihnen.“

Wenn Sie auf Ja stellen, müssen Sie die URL der Seite hinzufügen.

Wenn ein Besucher ein Formular absendet, können Sie die Übermittlungen als E-Mail erhalten. Verwenden Sie diesen Abschnitt, um diese E-Mails zu definieren.

  • An: Die E-Mail-Adresse, an die die Übermittlungen gesendet werden.
  • Betreff: Die Betreffzeile der E-Mail, die an die E-Mail-Adresse in der Einstellung An gesendet wird.
  • Nachricht: Jeglicher Text und Formularinformationen, die in der E-Mail gesendet werden. Die Standardeinstellung ist [all-fields] und enthält alle Formularinformationen in der E-Mail.
  • Absender-E-Mail: Fügen Sie die E-Mail-Adresse hinzu, von der die E-Mail gesendet wird.
  • Absendername: Legen Sie fest, unter welchem Namen die E-Mail gesendet wird. Dies kann Ihnen später beim Filtern dieser E-Mails helfen.
  • Antwort an: Bearbeiten Sie diese E-Mail-Adresse, wenn Sie auf diese E-Mails antworten und diese Antworten an eine andere Adresse senden möchten.
  • Cc: Senden Sie eine Kopie dieser E-Mails an eine andere Adresse.
  • Bcc: Senden Sie eine Blindkopie dieser E-Mails an eine andere Adresse.
  • Metadaten: Standardmäßig enthalten die vom Formular gesendeten E-Mails Metadaten wie Uhrzeit, Datum, Seiten-URL, User Agent (Browserinformationen), Remote-IP (IP-Adresse der Person, die das Formular absendet), Credit (die Software, die das Formular erstellt hat).
  • Senden als: Verwenden Sie das Dropdown-Menü, um festzulegen, ob die vom Formular gesendete E-Mail im HTML- oder Klartextformat vorliegt.

Nur für Elementor Pro-Benutzer.

Schalten Sie Ein, um die Funktion für Formularübermittlungen zu aktivieren. Diese Funktion ermöglicht Ihnen den Zugriff auf Formularübermittlungen über WP Admin>Elementor>Übermittlungen.

Benutzerdefinierter Code kann manchmal erfordern, dass Sie Ihrem Formular eine ID geben.

Stellen Sie sicher, dass Ihre Formular-ID eindeutig ist.

Im Allgemeinen verfügen Browser bereits über integrierte Nachrichten für Formularübermittlungen, die den Erfolg oder Formularfehler anzeigen.

Das Umschalten von Benutzerdefinierte Nachrichten auf Ja ermöglicht es Ihnen, eigene Nachrichten zu erstellen, die angezeigt werden, falls der Browser des Besuchers diese Nachrichten nicht bereitstellt oder die Nachrichten aus irgendeinem Grund nicht angezeigt werden können.

Tab „Stil“

Legen Sie das Aussehen und Verhalten von Menüpunkten und Steuerelementen fest.

Legen Sie fest, ob die Überschrift und Beschreibung rechts, links oder in der Mitte des Formulars erscheinen sollen.

Steuern Sie das Erscheinungsbild der Überschrift.

Steuern Sie das Erscheinungsbild der Überschrift.

Steuern Sie das Layout Ihres Formulars.

  • Spaltenabstand: Wenn Ihr Formular mehr als eine Spalte hat, verwenden Sie den Schieberegler, um den Abstand zwischen den Spalten festzulegen. Dies tritt auf, wenn sich mehr als ein Feld in einer Zeile befindet.
  • Zeilenabstand: Verwenden Sie den Schieberegler, um den Abstand zwischen den Feldern zu erhöhen und zu verringern.

Steuern Sie das Erscheinungsbild der Formularbeschriftungen.

  • Abstand: Legen Sie den Abstand zwischen der Beschriftung und dem Feld fest.
  • Textfarbe: Legen Sie die Farbe des Feldnamens fest. Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Typografie: Legen Sie die Schriftart und -größe des Feldnamens fest.

    Weitere Details finden Sie unter Typografie.

Dieser Abschnitt bestimmt das Erscheinungsbild der Formularfelder. Dies umfasst den Platzhaltertext, den Feldrand und mehr.

  • Textfarbe: Legen Sie die Farbe des Platzhaltertextes fest. Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Typografie: Legen Sie die Schriftgröße und den Typ des Platzhaltertextes fest. Weitere Details finden Sie unter Typografie.
  • Hintergrundfarbe: Legen Sie die Farbe der Feld-Box fest.
  • Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Rahmen: Schalten Sie auf Ja, wenn Sie einen Rahmen um das Feld wünschen.
  • Rahmenfarbe: Legen Sie eine Farbe für den Rahmen des Feldes fest. Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Rahmenbreite: Umranden Sie das Feld mit einem Rahmen.
  • Form: Wählen Sie eine Rahmenform aus dem Dropdown-Menü:
    • Rund: Schaltflächen erscheinen mit glatten Ecken.
    • Abgerundet: Schaltflächen erscheinen mit gleichmäßig gekrümmten Kanten.
    • Scharf: Rechteckige Schaltflächen.

Verwenden Sie das Dropdown-Menü, um entweder auszuwählen:

  • Schaltfläche: Wird als Standard-Schaltfläche angezeigt.
  • Link: Wird als Text angezeigt.

Legen Sie die Schriftgröße und den Typ für alle Schaltflächen im Formular fest.

Sie können die Schaltfläche ändern lassen, wenn Benutzer ihre Maus bewegen:

  • Normal: Wie die Schaltfläche standardmäßig erscheint.
  • Hover: Wie die Schaltfläche erscheint, wenn Besucher mit der Maus darüberfahren. Der Hover-Modus ermöglicht es Ihnen, eine Übergangsdauer festzulegen. Dies ist die Zeitspanne, die die Schaltfläche benötigt, um ihr Aussehen zu ändern.

Folgende Eigenschaften können sich ändern:

Fügen Sie Ihrer Schaltfläche einen Rahmen hinzu. Wenn Sie einen Rahmen hinzufügen, können Sie auch festlegen:

Wählen Sie eine der folgenden Optionen:

  • Rund: Schaltflächen erscheinen mit glatten Ecken.
  • Abgerundet: Schaltflächen erscheinen mit gleichmäßig gekrümmten Kanten.
  • Scharf: Rechteckige Schaltflächen.

Legen Sie den Abstand zwischen dem Schaltflächenrand und dem Text fest. Weitere Details finden Sie unter Abstände und Ränder.

Der Abschnitt „Nachrichten“ steuert den Stil aller Nachrichten, die Besuchern nach dem Absenden eines Formulars angezeigt werden:

  • Typografie: Legen Sie die Größe und Art der im Nachrichtentext verwendeten Schriftart fest.
  • Farbe der Erfolgsmeldung: Legen Sie die Farbe der Nachricht fest, wenn das Formular des Besuchers an den Website-Betreiber gesendet wurde. Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Farbe der Fehlermeldung: Legen Sie die Farbe der Nachricht fest, wenn das Formular des Besuchers nicht an den Website-Betreiber gesendet wurde. Weitere Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Farbe der Inline-Nachricht: Dies ist nur relevant, wenn Sie sich für die Anzeige benutzerdefinierter Nachrichten entschieden haben. Einige benutzerdefinierte Nachrichten erscheinen innerhalb des Formulars selbst, diese werden als Inline-Nachrichten bezeichnet und diese Einstellung bestimmt deren Farbe.

Fügen Sie Ihrem Formular einen Hintergrund hinzu. Details finden Sie unter Hintergrund erstellen.

Verwenden Sie den Schieberegler, um die Breite des Formulars festzulegen.

Erstellen Sie Abstand zwischen dem Inhalt des Formulars und den Rändern des Formulars. Details finden Sie unter Abstände und Ränder.

Tab „Erweitert“

Steuern Sie die Platzierung Ihres Widgets, fügen Sie Links ein, fügen Sie benutzerdefinierten Code hinzu und vieles mehr.

Erfahren Sie mehr über die Einstellungen des Tabs „Erweitert“.

Auf dieser Seite

Diesen Artikel teilen

Hosted with