Kontaktformular 7 Widget-Einstellungen

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 Kontaktformular 7-Formular 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-Tab aus gestalten. Master Addons versendet elf Design-Voreinstellungen (Style One to Four im kostenlosen Plugin, Style Five to Eleven in Pro), sodass Sie ein einfaches CF7-Formular neu gestalten können, um es an Ihre Website anzupassen, ohne CSS zu schreiben. Es ist Teil des kostenlosen Master Addons Widgets und Erweiterungen Bibliothek. für einen Überblick und einen Vergleich mit CSS und dem Elementor Pro Form Widget siehe die Kontaktformular 7 Elementor-Widget Seite.

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 Designvariante aus (Style One bis Four sind kostenlos) und stimmen Sie dann den Behälter, die Felder und Etiketten fein ab und senden Sie die 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 #

1. 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.
2. Klicken Sie als nächstes auf das “Mit Elementor bearbeiten” Taste.

Schritt 2: Finden Sie das Kontaktformular 7 Element #

1. Verwenden Sie im linken Elementor-Panel die Suchleiste, um „zu finden“Kontaktformular 7.”
2. 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 Hinweise unter einzelnen Feldern (Fehlermeldungen) und die Validierungsnachricht auf Formularebene (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 (Unter Felder): Stylen Sie die Hinweise, die unter einzelnen Feldern erscheinen, z. B. eine erforderliche Feldnachricht.
  • Textfarbe / Hintergrundfarbe / Randtyp.
• Validierungsfehler (ganze Form): Stylen Sie die angezeigte Nachricht auf Formularebene, wenn die Validierung einer Einreichung fehlschlägt.
  • Hintergrundfarbe / Textfarbe / Randtyp.

Schritt 4: Speichern und veröffentlichen Sie Ihre Seite #

Wenn Sie alles nach Ihren Wünschen angepasst haben:

1. Klicken Sie auf das “Veröffentlichen” Button (wenn es eine neue Seite ist) oder “Aktualisieren(bei Bearbeitung einer vorhandenen Seite).
2. Testen Sie die Formularübermittlung und Fehlermeldungen im Frontend, um sicherzustellen, dass alle Stile korrekt angewendet werden.

Häufig gestellte Fragen #