WPForms Elementor Widget zum Hinzufügen und Stylen Ihrer Formulare
Das Widget Master Addons WPForms platziert ein Formular, das Sie in WPForms erstellt haben, auf jeder Elementor-Seite und lässt Sie es aus dem Elementor-Panel stylen Wählen Sie das Formular aus, wählen Sie, ob es seinen Titel, seine Beschreibung, Beschriftungen und Platzhalter anzeigen soll, dann Stileingaben, Optionsfelder, Kontrollkästchen, den Senden-Button und Fehlermeldungen. Stil Eins bis Vier sind kostenlos, und Master Addons Pro Fügt Style Five zu Eleven hinzuSie benötigen das installierte WPForms-Plugin, entweder das kostenlose WPForms Lite oder einen kostenpflichtigen Plan.
So fügen Sie WPForms zu Elementor hinzu
Sie benötigen Elementor, das WPForms Plugin und das kostenlose Master Addons Plugin.
- Installieren Sie WPForms von Plugins, fügen Sie Neu hinzu und erstellen Sie dann Ihr Formular und speichern Sie es WPForms, Neues hinzufügen.
- Überprüfen Sie, ob WP Forms unter eingeschaltet ist Master-Addons, Widgets.
- Bearbeiten Sie Ihre Seite mit Elementor, suchen Sie nach WPForms und ziehen Sie das Master Addons Widget an Ort und Stelle.
- Wählen Sie Ihr Formular in der Kontaktformular Dropdown und stellen Sie Titel, Beschriftungen und Platzhalterschalter ein.
- Wählen Sie auf der Registerkarte Stil eine Designvariante aus.
- Stylen Sie die Eingaben, Kontrollkästchen, senden Sie Schaltfläche und Fehler, dann Vorschau und senden Sie einen Testeintrag.
WPForms fügt Elementor außerdem ein eigenes grundlegendes WPForms-Widget hinzu. Verwenden Sie das Master Addons-Widget, wenn Sie die Stilvoreinstellungen und detaillierten Styling-Steuerelemente wünschen.
Designvariationen: 4 kostenlos, 11 mit Pro
Die Designvariationen Durch Dropdown im Abschnitt Designlayout ändert sich das Aussehen von Feldern, Beschriftungen und der Schaltfläche. Stil Eins bis Vier funktioniert im kostenlosen Plugin, und Pro entsperrt Stil Fünf bis Elf, einschließlich eines Floating Label-Stils. Dies sind die gleichen Stilvoreinstellungen Kontaktformular 7 Widget-Verwendungen und die folgenden Demos werden mit diesem Widget erstellt.
- Benutzerdefinierter Titel und Beschreibung: Ersetzen Sie den WPForms-Titel und die Beschreibung durch Ihren eigenen Text.
- Etiketten und Platzhalter Schalter verstecken oder zeigen sie.
- Fehlermeldungen: WPForms-Validierungsnachrichten anzeigen oder ausblenden.
Eingabe, Textbereich und Checkbox-Styling
Die Eingabe & Textarea Abschnitt hat Normal - und Fokus-Registerkarten Hintergrund - und Textfarbe, Rand, Randradius, Texteinrückung, Eingabe - und Textflächenbreite und - höhe, Auffüllung, Abstand, Typografie und Kastenschatten festlegen, dann fokussierten Feldern einen eigenen Rand und Schatten geben. Radio & Checkbox Schaltet Benutzerdefinierte Stile mit Größe, Farbe, Randbreite, Randfarbe, separatem Radius für Kontrollkästchen und Optionsfelder sowie einer angezeigten Farbe ein.
- Etikett, Platzhalter und Feldbeschreibung Farben und Typografie.
- Titel- und Beschreibungsausrichtung, Farbe, Typografie und Rand.
- Unterschiedliche Breiten für einzeilige Eingänge und das Nachrichtenfeld.
Senden Sie Button und Fehler beim Styling
Die Schaltfläche senden Abschnitt setzt Ausrichtung, volle oder benutzerdefinierte Breite, Hintergrund - und Textfarbe, Umrandung, Umrandungsradius, Polsterung, Oberrand, Typografie und Kastenschatten, mit Hoverfarben für Hintergrund, Text und Umrandung Die Fehler Abschnitt Stile der Fehlertextfarbe und die Randfarbe und Breite von Feldern, die die Validierung nicht bestehen Erfolgsmeldungen behalten das WPForms-Styling bei.
- Eine Vollbreite-Taste für mobilfreundliche Formulare.
- Bewegen Sie die Maus auf Farben, die zu Ihren anderen Tasten passen.
- Rote Feldgrenzen, die fehlende Felder offensichtlich machen.
WPForms vs. Elementorformulare
Elementor Pro verfügt über ein eigenes Form-Widget, sodass Sie WPForms nicht benötigen, wenn Sie bereits für Elementor Pro bezahlen. So vergleichen sich die beiden Ansätze.
| Merkmal | WPForms mit Master-Addons | Elementor Pro-Formular |
|---|---|---|
| Preis | WPForms Lite ist kostenlos, erweiterte Funktionen benötigen einen kostenpflichtigen WPForms-Plan | Benötigt Elementor Pro |
| Wo Sie das Formular aufbauen | WPForms Drag-and-Drop-Builder | Im Elementor Form Widget |
| Styling in Elementor | Durch dieses Master Addons Widget | Eingebaut in das Formular-Widget |
| Felder | Wird durch Ihren WPForms-Plan festgelegt | Text, E-Mail, Textbereich, Nummer, Datum, Uhrzeit, Datei-Upload, Schritt und mehr |
| Nach einreichen | Benachrichtigungen und Bestätigungen in WPForms, Integrationen in kostenpflichtigen Plänen | E-Mail, Weiterleitung, Webhook, Popup, Einsendungen und E-Mail-Marketing-Aktionen |
| Außerhalb von Elementor verwenden | Ja, in jedem Editor oder Thema | Nur Elementorseiten |
Wählen Sie Elementor Forms, wenn Sie Elementor Pro bereits haben und alles in einem Editor haben möchten Wählen Sie WPForms, wenn Sie Formulare wünschen, die auch außerhalb von Elementor funktionieren, oder bevorzugen Sie dessen Formular-Builder Verwenden Sie stattdessen Kontaktformular 7? Die Kontaktformular 7 Widget bietet Voreinstellungen im gleichen Stil.
Häufig gestellte Fragen für WPForms
Ist das WPForms-Widget kostenlos?
Ja. Das Widget befindet sich im kostenlosen Master Addons Plugin mit Style One to Four und allen Styling-Abschnitten. Master Addons Pro Fügt Stil Fünf zu Elf hinzu.
Brauche ich das Plugin WPForms installiert?
Ja. WPForms, kostenlos oder kostenpflichtig installieren und aktivieren und dort zuerst Ihre Formulare erstellen Ohne zeigt das Widget einen Hinweis “WPForms ist nicht aktiviert” Funktionen wie bedingte Logik funktionieren weiter, da das Widget Ihr echtes WPForms-Formular anzeigt.
Wie füge ich WPForms zu Elementor hinzu?
Erstellen Sie das Formular in WPForms, ziehen Sie dann das Widget Master Addons WPForms auf Ihre Elementor-Seite und wählen Sie das Formular im Dropdown des Kontaktformulars aus. Die vollständigen Schritte finden Sie im Abschnitt zum Anleitungen oben.
Wie ändere ich das Aussehen von Fehlermeldungen?
Öffnen Sie den Abschnitt Fehler im Register Stil, um die Fehlertextfarbe sowie die Randfarbe und Breite ungültiger Felder festzulegen. Im Register Inhalt können Sie auch Fehlermeldungen ausblenden. Es gibt keinen separaten Abschnitt zum Stil von Erfolgsmeldungen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
