Ninja Forms Elementor Widget: Style Ninja Forms Without CSS
Das Ninja Form Widget in Master Addons ist kostenlos Es platziert ein Formular, das Sie im Ninja Forms Plugin erstellt haben, auf einer Elementor-Seite und gibt Ihnen Stil-Steuerelemente für den Titel, Beschriftungen, Felder, Optionsfelder und Checkboxen, Senden-Button und Nachrichten Vier Design-Variationen sind kostenlos, und sieben weitere kommen mit Master Addons Pro. Ninja Forms behandelt noch die Felder, Benachrichtigungen und Einreichungen.
So fügen Sie Ninja-Formulare zu Elementor hinzu
Sie benötigen das kostenlose Ninja Forms Plugin und mindestens ein Formular darin eingebaut.
- Installieren und aktivieren Ninja-Formulare Von WordPress.org, dann baue dein Formular im Ninja Forms Dashboard auf.
- Überprüfen Sie, dass die Ninja-Formular Widget ist in den Einstellungen des Master Addons Widgets eingeschaltet.
- Bearbeiten Sie Ihre Seite mit Elementor, durchsuchen Sie das Panel nach Ninja-Formular und ziehen Sie das Widget hinein.
- Wählen Sie Ihr Formular in der Kontaktformular Dropdown und wählen Sie, ob angezeigt werden soll Etiketten und Platzhalter Text.
- Wählen Sie auf der Registerkarte Stil eine DesignvariationPassen Sie dann die Eingaben, Kontrollkästchen, die Senden-Taste und Nachrichten an.
- Aktualisieren Sie die Seite und senden Sie einen Testeintrag, um zu überprüfen, ob Ninja Forms sie erhält.
Designvariationen: 4 kostenlos, 7 pro
Designvariation Im Tab Stil wendet ein bereites Aussehen auf die gesamte Form an Stil Eins bis Stil Vier sind kostenlos, und Stil Fünf bis Stil Elf benötigen Master Addons Pro. Wählen Sie eines als Ausgangspunkt und ändern Sie dann die Details in den Abschnitten darunter.
- Kostenlos: Stil Eins, Stil Zwei, Stil Drei und Stil Vier.
- Pro: Stil Fünf durch Stil Elf.
- Inhaltsoptionen: Etiketten und Platzhaltertext sowie Fehlermeldungen und Validierungsfehler anzeigen oder ausblenden.
Eingabe, Textbereich und Checkbox-Styling
Eingabe & Textarea Hat Normal - und Fokus-Tabulatoren mit Hintergrundfarbe und Rand, plus Textfarbe, Randradius, Ausrichtung, Texteinrückung, Eingabe - und Textflächenbreite und - höhe, Auffüllung, Abstand und Typografie. Radio & Checkbox Kann die Browser-Standardeinstellungen durch benutzerdefinierte Stile ersetzen: Größe, Farbe, Randbreite und Randfarbe, separater Randradius für Kontrollkästchen und Optionsfelder sowie eine überprüfte Farbe.
- Etiketten und Platzhalter: Textfarbe und Typografie für Etiketten sowie eine Textfarbe für Platzhalter.
- Feldbeschreibung: Farbe, Typografie und Abstand für den Hilfstext unter einem Feld.
- Titel & Beschreibung: Ausrichtung, Farbe, Typografie und Rand für den Formulartitel und die Beschreibung.
Senden Sie Schaltflächen- und Formularnachrichten
Schaltfläche senden Setzt Ausrichtung, volle oder benutzerdefinierte Breite, Hintergrund - und Textfarbe, Rand, Randradius, Polsterung, oberer Rand, Typografie und Box-Shadow, mit einem Hover-Tab für Hintergrund, Text - und Randfarbe Die Nachrichtenabschnitte stilisieren, was Besucher sehen, nachdem sie abgeschickt haben.
- Erfolgsmeldung: Textfarbe und Typografie.
- Benachrichtigung über erforderliche Felder: Farbe, Abstand und Typografie.
- Fehler: Textfarbe für Fehlermeldungen sowie Beschreibungs- und Randfarben für Felder, deren Validierung fehlschlägt.
Elementor-Shortcode-Widget vs. Ninja-Form-Widget
Free Elementor kann bereits ein Ninja Form anzeigen: fügen Sie seinen Shortcode in das Shortcode Widget ein Das Formular funktioniert so oder so genauso Der Unterschied ist, wie Sie es stylen.
| Merkmal | Elementor-Shortcode-Widget | Master Addons Ninja Form Widget |
|---|---|---|
| Preis | Frei (Elementorkern) | Kostenlos, Pro für 7 weitere Designvarianten |
| Hinzufügen des Formulars | Fügen Sie einen Shortcode wie [ninja_form id="1"] ein | Wählen Sie das Formular aus einem Dropdown |
| Styling | Ein eigenes CSS | Registerkartensteuerelemente für Felder, Kontrollkästchen, Schaltflächen und Nachrichten gestalten |
| Voreingestellte Blicke | Nein | 4 kostenlos, 7 Pro |
| Etiketten oder Platzhalter ausblenden | CSS | Schaltet |
| Felder, Benachrichtigungen, Einreichungen | Ninja-Formulare | Ninja-Formulare |
Beide Routen laufen mit demselben Ninja Forms Formular Das Widget spart Ihnen das Schreiben von CSS, um das Formular mit dem Rest der Seite abzugleichen.
Andere Form Widgets: Kontaktformular 7 (kostenlos), WPForms (kostenlos) und Schwerkraftformen (Pro).
Häufig gestellte Fragen für Ninja-Formular
Brauche ich das Ninja Forms Plugin installiert?
Ja. Installieren und aktivieren Sie das kostenlose Ninja Forms Plugin und bauen Sie dort zuerst Ihr Formular auf Ohne zeigt das Widget statt eines Formulars einen Hinweis “Ninja Forms ist nicht aktiviert” an.
Ist das Ninja Form Widget kostenlos?
Ja. Das Widget und Style One to Style Four sind in Master Addons kostenlos Style Five to Style Eleven brauchen Master Addons Pro.
Kann ich das Formular auf Mobilgeräten responsive gestalten?
Ja. Viele der Größen- und Abstandsregler, wie Eingabebreite und -höhe, Polsterung, Ausrichtung und Tastenbreite, verwenden separate Werte für Desktop, Tablet und Mobilgeräte.
Wie gestalte ich Fehlermeldungen oder die Erfolgsmeldung?
Verwenden Sie die Abschnitte Erfolgsmeldung, Hinweise zu erforderlichen Feldern und Fehler in der Registerkarte Stil Sie legen Textfarbe und Typografie für die Erfolgsmeldung sowie Text, Beschreibung und Randfarben für Fehler fest Es gibt keine Hintergrundfarbeinstellung für diese Nachrichten.
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
