WPForms zu einer Elementor-Seite hinzufügen

Möchten Sie Ihrer Website mit Elementor ein WordPress-Formular hinzufügen? Sie können das WPForms Elementor-Widget einfach verwenden, um Formulare zu Ihren Seiten hinzuzufügen und sie nach Ihren Wünschen zu bearbeiten. Noch besser: Sie können all dies direkt im Elementor Page Builder erledigen.

Dieses Tutorial zeigt Ihnen, wie Sie WPForms zu einer Elementor-Seite hinzufügen.

---

Stellen Sie vor Beginn sicher, dass Sie das WPForms-Plugin installiert und aktiviert und Ihren Lizenzschlüssel überprüft haben.

1. Modernes Markup aktivieren

Bevor Sie Ihre Formulare in Elementor gestalten, müssen Sie das moderne Markup in WPForms aktivieren. Gehen Sie dazu zu WPForms » Einstellungen und wählen Sie die Registerkarte Allgemein.

Scrollen Sie als Nächstes zum Abschnitt Allgemein und stellen Sie sicher, dass die Option Formular-Styling einschließen auf Basis- und Formular-Theme-Styling eingestellt ist.

Stellen Sie danach den Schalter Modernes Markup verwenden auf EIN, um es zu aktivieren.

Speichern Sie Ihre Änderungen, nachdem Sie diese Option aktiviert haben. Sobald das moderne Markup aktiviert ist, können Sie Ihre Formulare mit Elementor gestalten, wie in den folgenden Abschnitten beschrieben.

2. Ihr Formular einbetten

Zuerst müssen Sie die Seite oder den Beitrag öffnen, auf der Sie Ihr Formular einbetten möchten.

Wenn Sie den Elementor-Builder beim ersten Öffnen des Seiten- oder Beitragseditors nicht sehen, klicken Sie auf die blaue Schaltfläche Mit Elementor bearbeiten.

Sobald Sie den Elementor-Builder geöffnet haben, schauen Sie in die linke Seitenleiste. Im Abschnitt Basis-Widgets sollten Sie ein Widget mit der Bezeichnung WPForms sehen.

Ziehen Sie das WPForms-Widget in den Widget-Bereich auf der rechten Seite des Bildschirms.

Als Nächstes müssen Sie zwischen dem Hinzufügen eines vorhandenen Formulars oder dem Erstellen eines brandneuen Formulars in Elementor wählen.

Ein vorhandenes Formular hinzufügen

Wenn Sie ein bereits erstelltes Formular zu dieser Seite hinzufügen möchten, klicken Sie auf das Dropdown-Menü im WPForms-Widget. Sie sehen alle von Ihnen erstellten Formulare. Wählen Sie das Formular aus, das Sie zu Ihrer Seite hinzufügen möchten.

Elementor zeigt Ihnen eine Live-Vorschau Ihres Formulars, wie es auf Ihrer Website erscheinen wird. Wenn Sie Änderungen am Formular vornehmen müssen, klicken Sie im linken Bereich auf den Link Das ausgewählte Formular bearbeiten.

Der Formular-Builder wird in einem Popup-Fenster geöffnet, damit Sie Änderungen an Ihrem Formular vornehmen können. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf Speichern und dann auf das X-Symbol in der oberen rechten Ecke, um den Builder zu schließen.

Sie sehen sofort alle Änderungen, die Sie im Elementor-Builder vorgenommen haben.

Erstellen eines neuen Formulars

Wenn Sie noch keine Formulare haben oder einfach ein neues für diese Seite erstellen möchten, können Sie ein neues Formular erstellen, ohne den Elementor-Seitenersteller zu schließen. Klicken Sie dazu im linken Bereich auf die Schaltfläche + Neues Formular.

Der WPForms-Formularersteller wird dann angezeigt, sodass Sie mit der Erstellung Ihres Formulars beginnen können, indem Sie zuerst einen Namen hinzufügen und eine Vorlage auswählen.

Wenn Sie mit der Erstellung Ihres Formulars fertig sind, klicken Sie in der oberen rechten Ecke des Formularerstellers auf die Schaltfläche Speichern und dann auf das X-Symbol, um ihn zu schließen.

Sie sehen dann Ihr neues Formular im Elementor-Seitenersteller. Wenn Sie weitere Änderungen vornehmen müssen, klicken Sie einfach im linken Bereich auf den Link Ausgewähltes Formular bearbeiten.

3. Anzeigeoptionen konfigurieren

Um den Formulartitel oder die Beschreibung auf der Seite anzuzeigen, klicken Sie, um die Anzeigeoptionen für das WPForms-Widget im linken Bereich des Seitenerstellers zu erweitern.

Schalten Sie dann die Einstellungen ein, um den Formularnamen und die Formularbeschreibung nach Ihren Wünschen anzuzeigen.

Sie können auch das Aussehen des Formulars im Frontend im Erweitert-Tab des Elementor-Builders ändern.

Um zu erfahren, wie Sie die Einstellungen hier verwenden, lesen Sie die Elementor-Dokumentation zu erweiterten Widget-Optionen.

4. Ihr Formular anpassen

WPForms integriert sich in Elementor und ermöglicht es Ihnen, das Erscheinungsbild Ihrer Formulare anzupassen. Navigieren Sie dazu im Elementor-Seitenmenü zur Registerkarte "Stil".

Die Registerkarte "Stil" in Elementor ermöglicht es Ihnen, die Stile der Formularfelder, Beschriftungen und Schaltflächen anzupassen, ohne CSS-Kenntnisse zu benötigen. Sie finden auch eine Option, diese Stileinstellungen von einem Formular auf ein anderes im Abschnitt "Erweitert" zu kopieren.

Wir werden jede dieser Optionen im Folgenden detaillierter behandeln.

Designs

Die Einstellung Designs ermöglicht es Ihnen, ein vordefiniertes Farbdesign auszuwählen, um den Stil der Felder, Beschriftungen, Schaltflächen, des Containers und des Hintergrunds Ihres Formulars automatisch zu aktualisieren.

Um es anzuwenden, klicken Sie einfach auf Ihr bevorzugtes Design, und es werden sofort die Farben der Felder, Beschriftungen, Schaltflächen, des Containers oder des Hintergrunds Ihres Formulars angepasst.

Wenn Sie nach der Auswahl eines Designs einzelne Einstellungen anpassen, werden diese Änderungen als neues benutzerdefiniertes Formular-Design gespeichert. Dieses neue Design wird Ihrer Liste der verfügbaren Designs hinzugefügt und kann wie jedes andere Formular-Design auf jedes Formular angewendet werden.

Sie können dieses Thema auch umbenennen, um es im Feld Themenname leicht identifizieren zu können.

Um ein benutzerdefiniertes Formular-Thema zu löschen, klicken Sie einfach unter dem Namen des Themas auf die Schaltfläche THEMA LÖSCHEN.

Feldstile

In der Option "Feldstile" sehen Sie Einstellungen für Größe, Randradius und Farboptionen für Hintergrund, Rand und Text.

Die Einstellungen Größe steuern die Größe jedes Feldes in Ihrem Formular. Verfügbare Optionen sind: Klein, Mittel und Groß.

Als Nächstes finden Sie die Einstellung Abgerundete Ecken. Diese ändert die Rundung Ihrer Feld-Ecken – eine höhere Zahl bedeutet rundere Ecken.

Als Nächstes finden Sie Optionen zum Aktualisieren der Farben für Hintergrund, Rahmen und Text Ihrer Formularfelder. Um die Standardfarben zu ändern, klicken Sie auf die Farbe neben der Beschriftung.

Dies öffnet eine Farbauswahl, mit der Sie die gewünschte Farbe auswählen können. Wenn Sie eine bestimmte Markenfarbe für Ihre Formulare haben, können Sie den Farbcode direkt in das Feld HEXA eingeben. Während HEXA die Standardeinheit ist, können Sie sie bei Bedarf auch auf RGBA oder HSLA umstellen.

Label-Stile

Unter Beschriftungsstile sehen Sie Optionen zur Anpassung der Größe und Farben Ihrer Formularbeschriftungen. Über das Dropdown-Menü Größe können Sie je nach Wunsch entweder Klein, Mittel oder Groß auswählen.

Als Nächstes finden Sie Optionen zum Aktualisieren der Farben für Beschriftung, Unterbeschriftung & Hinweis und Fehlermeldung Ihrer Felder. Nachfolgend erklären wir die verfügbaren Farboptionen.

• Beschriftung: Diese Option ändert die Textfarbe Ihrer Beschriftungen.
• Unterbeschriftung & Hinweis: Diese Option steuert die Farbe von Feldunterbeschriftungen und Hinweisen, die angezeigt werden, wenn WPForms Benutzern im Frontend Werte vorschlägt.
• Fehler: Die Farbe der Fehlermeldungen, die angezeigt werden, wenn beim Ausfüllen Ihres Formulars ein Fehler auftritt.

Schaltflächenstile

Die Einstellungen Schaltflächenstile ermöglichen es Ihnen, den Stil Ihrer Schaltflächen anzupassen. Um die Größe der Schaltfläche zu ändern, klicken Sie auf das Dropdown-Menü Größe und wählen Sie die gewünschte Option aus.

Um der Schaltfläche abgerundete Kanten zu geben, geben Sie einfach den Wert in das Feld Abgerundete Ecken ein.

Als Nächstes sehen Sie Optionen zum Aktualisieren der Hintergrund- und Textfarben Ihrer Schaltfläche.

Container-Stile

Die Einstellungen für Containerstile ermöglichen es Ihnen, den Innenabstand, den Randstil, die Randgröße, die abgerundeten Ecken, den Schatten und die Farben für den Container Ihres Formulars anzupassen. Nachfolgend haben wir die verfügbaren Containeroptionen detailliert beschrieben.

• Innenabstand: Diese Option legt den Abstand innerhalb der Ränder des Formularcontainers fest. Sie können diesen Wert erhöhen oder verringern, um den Abstand um Ihre Formularinhalte anzupassen.
• Rahmen (Stil): Diese Einstellung ermöglicht es Ihnen, die Umrandung Ihres Containers auszuwählen, mit Optionen für einen durchgezogenen, gestrichelten oder gepunkteten Rahmen.
• Randgröße: Bestimmt die Dicke des Randes Ihres Containers. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
• Radius: Dies passt an, wie abgerundet die Ecken Ihres Containers sind, und verleiht dem Erscheinungsbild Ihres Formulars eine weichere oder definiertere Kante. Die Standardmessung erfolgt in Pixeln (px), kann aber geändert werden, um Ihrem Stil zu entsprechen.
• Schatten: Wählen Sie die Größe des Schatteneffekts für Ihren Container, um Ihrem Formular-Design Tiefe zu verleihen, mit Optionen von keiner bis zu großer Größe.
• Rahmen (Farbe): Aktualisieren Sie die Rahmenfarbe Ihres Containers, um sie an Ihr visuelles Thema anzupassen und die Gesamtästhetik des Formulars zu verbessern.

Hintergrundstile

Die Einstellungen für Hintergrundstile geben Ihnen die Kontrolle über das Hintergrundbild und die Hintergrundfarbe Ihres Formulars.

Wählen Sie zunächst eine Bildquelle aus dem Dropdown-Menü Bild. Für Bilder, die bereits auf Ihre Website hochgeladen wurden, oder um neue hochzuladen, wählen Sie die Option Mediathek. Um eine größere Auswahl an professionellen Bildern zu erkunden, wählen Sie die Option Stockfotos.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf den Abschnitt Bild auswählen, um fortzufahren.

Wenn Sie Mediathek aus dem Dropdown-Menü Bild auswählen, öffnet sich die Mediathek Ihrer Website, sodass Sie ein Bild auswählen oder ein neues hochladen können. Wenn Stockfotos ausgewählt ist, wird Ihnen eine Auswahl an Stockfotos für den Hintergrund Ihres Formulars angezeigt.

Sobald Sie Ihr Bild ausgewählt haben, bietet der Abschnitt Hintergrundstile zusätzliche Anpassungsoptionen:

• Position: Mit dieser Einstellung können Sie Ihr Hintergrundbild innerhalb des Formulars ausrichten, indem Sie Optionen wie Oben Mitte, Unten Mitte und mehr auswählen, um die perfekte Platzierung zu erzielen.
• Wiederholung: Wählen Sie, wie Ihr Hintergrundbild wiederholt wird. Die Optionen sind Keine Wiederholung für ein einzelnes Bild, Kachel, um das Bild über den gesamten Hintergrund zu wiederholen, Horizontal wiederholen für die Wiederholung über die Breite und Vertikal wiederholen für die Wiederholung über die Länge.
• Größe: Dies passt an, wie Ihr Hintergrundbild in das Formular passt. Abdecken stellt sicher, dass das Bild den gesamten Hintergrund abdeckt und sich an die Größe des Formulars anpasst. Wenn Abmessungen ausgewählt ist, können Sie die genaue Breite und Höhe für Ihr Bild angeben.
• Farben: Diese Option ermöglicht es Ihnen, eine Hintergrundfarbe auszuwählen, die sichtbar ist, wenn kein Bild verwendet wird.

Erweiterte Stile

In diesem Abschnitt können Sie Ihrem Formular CSS-Klassen hinzufügen, indem Sie den Klassennamen in das Feld Zusätzliche Klassen eingeben.

Als Nächstes finden Sie den CSS-Code, der alle von Ihnen hinzugefügten Stile zum Formular widerspiegelt, unter Stileinstellungen kopieren / einfügen.

Diese Option ermöglicht es Ihnen, Stile von einem Formular in ein anderes zu kopieren.

Wenn Sie Stileinstellungen von einem anderen Formular kopiert haben, können Sie sie hier schnell einfügen. Nach dem Einfügen des Code-Snippets verwendet das Formular die Stile des vorherigen Formulars.

Wenn Sie eine von Ihnen vorgenommene Anpassung an Ihrem Formular zurücksetzen möchten, klicken Sie auf die Schaltfläche Stileinstellungen zurücksetzen. Dadurch wird Ihr Formular ohne benutzerdefinierte Stile in seinen ursprünglichen Zustand zurückversetzt.

Stellen Sie nach der Gestaltung Ihres Formulars sicher, dass Sie Ihre Änderungen speichern, indem Sie entweder die Seite veröffentlichen oder sie als Entwurf speichern.

5. Ihr Formular veröffentlichen

Bevor Sie Ihr Formular live schalten, ist es eine gute Idee, es zu testen und sicherzustellen, dass es wie erwartet funktioniert. Unser Leitfaden zum richtigen Testen Ihrer WordPress-Formulare vor dem Start enthält eine vollständige Checkliste, die Sie bei diesem Vorgang unterstützt.

Wenn Sie bereit sind, Ihr Formular zu veröffentlichen, klicken Sie unten im Elementor-Seitenersteller auf die Schaltfläche Veröffentlichen oder Aktualisieren.

Das ist alles! Jetzt wissen Sie, wie Sie WPForms mit Elementor auf einer Seite einbetten.

Möchten Sie als Nächstes Felder basierend auf den Auswahlmöglichkeiten oder Eingaben Ihrer Benutzer in Ihren Formularen anzeigen oder ausblenden? Werfen Sie einen Blick auf unseren einfachen Leitfaden zur Verwendung von intelligenter bedingter Logik, um Schritte zur Implementierung zu erhalten.