Die Kontaktformular 7 Element von Master Addons Ist ein spezielles Widget, das zum Integrieren und Stilieren von Formularen verwendet wird, die mit dem beliebten Contact Form 7-Plugin in Ihrem Gerät erstellt Elementordesigns. Damit können Sie die robuste Funktionalität von CF7 nutzen und gleichzeitig eine leistungsstarke visuelle Anpassung durch Elementor erhalten.
Mit dem Kontaktformular 7 Element können Sie:
- Wählen Jedes vorhandene Kontaktformular 7-Formular aus einem Dropdown.
- Wählen Sie aus mehreren Designvariationen (Stil Eins Durch Stil Eleven).
- Kontrollieren Sie die Sichtbarkeit von Fehlermeldungen und Validierungsfehler.
- Passen Sie die vollständig an Formularbehälter, Eingabe- und Textbereichsfelder, Etiketten, und die Schaltfläche senden Für Normal und Schweben Staaten.
- Stil die Anzeige von Fehler- und Validierungsnachrichten.
Also, mal sehen, wie man dieses Element hinzufügt und anpasst.
Was ist das Kontaktformular 7 Widget in Elementor? #
Das Elementor-Widget Kontaktformular 7 ist ein Master-Addons-Element, das jedes vorhandene Formular Kontaktformular 7 im Elementor anzeigt und Ihnen die volle visuelle Kontrolle über dessen Design gibt. CF7 verwaltet weiterhin die Formularlogik und die E-Mail-Zustellung, während Sie den Container, Eingabefelder, Beschriftungen, die Senden-Taste und Fehlermeldungen von Elementors Style-Registerkarte erstellen. Master Addons liefert elf vorgefertigte Design-Voreinstellungen (Style One bis Style Eleven), sodass Sie ein einfaches CF7-Formular neu gestalten können, um es an Ihre Website anzupassen, ohne CSS zu schreiben. Es ist Teil der kostenlosen Master Addons Widgets und Erweiterungen Bibliothek.
Hinzufügen und Konfigurieren des Kontaktformulars 7 Element #
Um ein gestyltes Kontaktformular 7-Formular in Elementor hinzuzufügen: Bearbeiten Sie Ihre Seite mit Elementor, ziehen Sie die Kontaktformular 7 Widget auf die Leinwand, wählen Sie Ihr Formular aus dem Dropdown aus, wählen Sie eine der elf Designvarianten aus und stimmen Sie dann den Behälter, die Felder, Etiketten und die Senden-Schaltfläche im Stil Tab. Die folgenden Schritte gehen durch jedes Teil im Detail.
Befolgen Sie diese Schritte, um das Kontaktformular 7-Element auf jeder Seite Ihrer Website hinzuzufügen und zu konfigurieren.
Schritt 1: Erstellen oder Bearbeiten einer Seite #
- Gehen Sie von Ihrem WordPress-Dashboard aus zu Seiten → Neu hinzufügen Um eine neue Seite zu erstellen, können Sie auch eine vorhandene Seite auswählen und klicken Bearbeiten.
- Klicken Sie als nächstes auf das “Mit Elementor bearbeiten” Taste.
Schritt 2: Finden Sie das Kontaktformular 7 Element #
- Verwenden Sie im linken Elementor-Panel die Suchleiste, um „zu finden“Kontaktformular 7.”
- Ziehen Sie das Addon per Drag & Drop in Ihren gewünschten Abschnitt der Seite.
Schritt 3: Passen Sie die Einstellungen für das Kontaktformular 7 an #
Nach dem Platzieren des Addon finden Sie die Anpassungsabschnitte im linken Bereich, hauptsächlich unter dem Inhalt und Stil Tabulatoren.
Inhaltstabelle #
Hier wählen Sie das Formular aus und definieren Fehlersichtbarkeit.
Kontaktformular 7: #
- Wählen Sie das Kontaktformular aus: Wählen Sie aus der Dropdown-Liste das spezifische Formular Kontaktformular 7 aus, das Sie anzeigen möchten.
- Fehlerstil (Fehlermeldungen/Validierungsfehler): Wählen Sie, ob Show oder Verstecken Die gesamten Übermittlungs-Erfolgs-/Fehlermeldungen und die feldspezifischen Validierungsfehler.
Designlayout: #
- Designvariationen: Wählen Sie einen vorgestalteten Stil für das Formular aus (Stil Eins Durch Stil Eleven).
Stil Tab #
Hier steuern Sie das visuelle Erscheinungsbild der Form und ihrer Elemente.
Formularbehälter: #
- Hintergrundtyp: Legen Sie den Hintergrundstil für den gesamten Formularcontainer fest: Klassisch oder Gradient.
- Farbe der Randoberseite: Legen Sie eine Farbe für den oberen Rand des Behälters fest.
- Formbreite (%) / Formauffüllung: Kontrollieren Sie die Größe und den inneren Abstand des Formularbehälters.
Titel: #
- Farbe / Ausrichtung / Typografie: Stil des Titels des Formulars (sofern einer in der CF7-Struktur vorhanden ist).
Eingabe & Textarea: #
- Hintergrundfarbe / Textfarbe: Legen Sie den Hintergrund und die Textfarbe für alle Eingabe - und Textbereichsfelder fest.
- Polsterung: Passen Sie den inneren Abstand der Felder an.
- Feldbreite (%): Legen Sie die horizontale Größe der Felder fest.
- Grenztyp / Grenzradius: Legen Sie den Randstil und die abgerundeten Ecken für die Eingabefelder fest.
Etiketten: #
- Farbe / Typografie: Gestalten Sie die Textfarbe und die Schrifteinstellungen für die Feldbeschriftungen.
Schaltfläche senden: #
- Tastentypografie: Steuern Sie die Schrifteinstellungen für den Schaltflächentext.
- Normal / Hover: Legen Sie in beiden Zuständen Folgendes für die Schaltfläche fest:
- Hintergrundtyp
- Textfarbe
- Randfarbe
- Grenzradius / Polsterung: Legen Sie die abgerundeten Ecken und den inneren Abstand des Knopfes fest.
Fehler: #
- Fehlermeldungen (Allgemein): Stylen Sie die wichtigsten Einreichungsfehlermeldungen (häufig globale Fehler-/Erfolgsmeldungen).
- Textfarbe / Hintergrundfarbe / Randtyp.
- Validierungsfehler (feldspezifisch): Stylen Sie die Fehlermeldungen, die unter einzelnen Feldern erscheinen (z.B, “Dieses Feld ist erforderlich”).
- Hintergrundfarbe / Textfarbe / Randtyp.
Schritt 4: Speichern und veröffentlichen Sie Ihre Seite #
Wenn Sie alles nach Ihren Wünschen angepasst haben:
- Klicken Sie auf das “Veröffentlichen” Button (wenn es eine neue Seite ist) oder “Aktualisieren(bei Bearbeitung einer vorhandenen Seite).
- Testen Sie die Formularübermittlung und Fehlermeldungen im Frontend, um sicherzustellen, dass alle Stile korrekt angewendet werden.
Häufig gestellte Fragen #
Wie gestalte ich Kontaktformular 7 in Elementor?
Fügen Sie das Widget Master Addons Kontaktformular 7 zu Ihrer Elementor-Seite hinzu, wählen Sie Ihr Formular aus dem Dropdown aus, und öffnen Sie dann die Registerkarte Stil Von dort aus können Sie den Formularcontainer, die Eingabe - und Textbereichsfelder, Beschriftungen, die Schaltfläche zum Senden und Fehlermeldungen neu gestalten Sie können auch eine von elf vorgefertigten Design-Voreinstellungen auswählen, um das manuelle Styling zu überspringen.
Ist das Kontaktformular 7 Widget in Master Addons kostenlos?
Ja. Das Widget Kontaktformular 7 ist Teil des kostenlosen Master Addons Widgets und Erweiterungen Bibliothek. Sie benötigen nur das kostenlose Plugin Kontaktformular 7 und Master Addons installiert und aktiv; kein Elementor Pro oder kostenpflichtiges Upgrade ist erforderlich, um Ihre Formulare zu stylen.
Wie viele Designstile für Kontaktformular 7 sind in Master Addons enthalten?
Master Addons umfasst elf vorgefertigte Designvarianten mit der Bezeichnung Style One bis Style Eleven Wählen Sie eine im Abschnitt Designlayout, um sofort einen kompletten Look zu erhalten, und passen Sie dann Farben, Ränder und Typografie auf der Registerkarte Style an Ihre Marke an.
Kann ich dem Absenden-Button von Kontaktformular 7 ein Font Awesome-Symbol hinzufügen?
Ja. Über das integrierte Tastendesign in diesem Widget hinaus können Sie dem Senden-Button ein Symbol hinzufügen, indem Sie unserem Leitfaden folgen Wenden Sie ein Font Awesome-Symbol in der Senden-Schaltfläche für Kontaktformular 7 an. Es passt gut zu den Normal- und Hover-Buttonstilen, die Sie hier festlegen.
Warum wird mein Contact Form 7-Styling nicht in Elementor angezeigt?
Das ist fast immer Caching oder ein Plugin-Konflikt Bestätigen Sie, dass sowohl Kontaktformular 7 als auch Master-Addons aktiv sind, stellen Sie sicher, dass Sie das Master-Addons-Kontaktformular 7-Widget verwenden (nicht den einfachen CF7-Shortcode), dann löschen Sie Ihren Seitencache und laden Sie hart nach. Auch das Leanhalten von Assets hilft; siehe unsere Tipps zu Beschleunigen Sie Ihre Elementor-Website.
