Kontaktformular 7 Elementor-Widget: Stil CF7 ohne CSS
Das Kontaktformular 7-Widget im kostenlosen Master Addons-Plugin platziert jedes Formular, in dem Sie es integriert haben Kontaktformular 7 Auf eine Elementor-Seite und lässt es sich aus dem Panel stylen Wählen Sie das Formular aus, wählen Sie eine Design-Variante, dann setzen Sie den Container, Titel, Felder, Beschriftungen, senden Schaltfläche und Fehlermeldungen Kontaktformular 7 behandelt weiterhin die Felder und sendet die E-Mail Vier Design-Variationen sind kostenlos und sieben weitere kommen mit Master Addons Pro. Sie benötigen das kostenlose Plugin Kontaktformular 7 installiert und mindestens ein Formular erstellt.
So fügen Sie Elementor das Kontaktformular 7 hinzu
Sie brauchen Elementor, den kostenlosen Kontaktformular 7 Plugin und das kostenlose Master Addons Plugin.
- Installieren Sie Kontaktformular 7 und erstellen Sie Ihr Formular unter Kontakt, Neu hinzufügen, mit den Feldern und E-Mail-Einstellungen, die Sie benötigen.
- Installieren und aktivieren Master Addons von WordPress.org.
- Bearbeiten Sie Ihre Seite mit Elementor und durchsuchen Sie das Widgets-Panel nach Kontaktformular 7. Wählen Sie das mit dem Master Addons-Abzeichen.
- In Wählen Sie das Kontaktformular, wählen Sie Ihr Formular.
- Wählen Sie im Stil eine Designvariante (Style One bis Four sind kostenlos).
- Passen Sie den Container, die Felder, Etiketten, die Schaltfläche und Fehler an und senden Sie dann eine Testnachricht auf der Live-Seite.
Jede Einstellung wird in der Kontaktformular 7 Widget-Einstellungen Führung.
Designvariationen: 4 kostenlos, 7 pro
Im Stil, DesignlayoutWählen Sie a DesignvariationStyle One to Style Four sind im kostenlosen Plugin Style Five to Style Eleven brauchen Master Addons Pro. Jede Variation gestaltet die Felder und die Schaltfläche zusammen, und Sie können jedes Teil anschließend in den folgenden Abschnitten ändern.
- Jedes Widget auf der Seite kann seine eigene Variation verwenden, sodass ein Footer-Formular und ein Kontaktseitenformular unterschiedlich aussehen können.
- Wählen Sie das Formular im Inhaltsregister unter Wählen Sie das Kontaktformular. Die Liste zeigt die Formulare, die Sie im Kontaktformular 7 erstellt haben.
- Wenn das Kontaktformular 7 nicht aktiv ist, zeigt das Widget einen Hinweis anstelle eines Formulars an.
Styling-Kontaktformular 7: Widget vs. CSS vs. Elementor Pro-Formular
Es gibt drei gängige Möglichkeiten, um eine gut aussehende Form auf einer Elementor-Seite zu erhalten So vergleichen sie.
| Master Addons CF7 Widget | Benutzerdefiniertes CSS auf CF7 | Elementor Pro Form-Widget | |
|---|---|---|---|
| Formbauer | Kontaktformular 7 | Kontaktformular 7 | Eingebaut in Elementor Pro |
| Styling | Panel-Steuerungen und 11 Variationen (4 kostenlos) | CSS schreiben und warten | Panel-kontrollen |
| Kosten | Kostenlos (7 Variationen benötigen Pro) | Kostenlos | Benötigt Elementor Pro |
| Am besten für | Websites, die bereits CF7 verwenden | Entwickler, die volle Kontrolle wollen | Websites auf Elementor Pro, die Formen und Aktionen an einem Ort wünschen |
Wenn Sie bereits Formulare für Kontaktformular 7 haben, ist das Widget der schnellste Weg, diese zu Ihrem Design zu passen. Wenn Sie ein anderes Formular-Plugin verwenden, lesen Sie das Ninja-Formulare oder Schwerkraftformen Widgets, oder die Mailchimp Widget für Anmeldungen.
Formular Container und Titel
Formularbehälter Setzt einen Farb, Farbverlauf oder Bildhintergrund, ein Randfarbe, Formbreite und Formpolsterung. Die Titel Abschnitt legt die Farbe, Ausrichtung und Typografie einer Überschrift innerhalb Ihres Formularauszeichens fest, sofern Ihr Formular eines enthält.
- Stellen Sie die Formbreite unter 100% ein, um eine schmale Form in einer breiten Spalte zu zentrieren.
- Die obere Randfarbe wirkt als einfacher Akzent über der Form.
- Durch die Polsterung erhält das Formular Platz in einer farbigen Karte.
Felder und Etiketten
Eingabe & Textarea Setzt die Hintergrundfarbe, Textfarbe, Polsterung, Feldbreite, Rand - und Randradius für Textfelder, Textbereiche und Menüs auswählen. Etiketten Farbe und Typografie hat, so dass Flurnamen von dem, was Besucher eingeben, abheben können.
- Die Feldbreite funktioniert in Prozent und ist praktisch für zweispaltige Layouts, die in Ihrem CF7-Formular-Markup erstellt werden.
- Kontrollkästchen, Optionsfelder und Dateieingaben behalten Ihr Design oder CF7-Styling bei.
- Halten Sie genügend Kontrast zwischen Feldhintergrund und Text für die Zugänglichkeit.
Senden Sie Schaltflächen- und Fehlermeldungen
Schaltfläche senden Typografie plus Normal - und Hover-Tab hat: Hintergrund, Textfarbe und Randfarbe für Normal, und Hintergrund - und Textfarbe für Hover Unterhalb der Tabs werden Randbreite, Randfarbe, Radius und Polsterung eingestellt Die Fehler Abschnittsstile Fehlermeldungen Unter Felder und Validierungsfehler Für das gesamte Formular und im Inhaltsregister können Sie jedes davon anzeigen oder ausblenden.
- Die Standardschaltfläche ist Lila (#6e00e9) mit weißem Text, also legen Sie Ihre Markenfarben fest.
- Das Ausblenden von Feldfehlern macht das Formular aufgeräumter, Besucher verlassen sich dann jedoch auf die Meldung auf Formularebene.
- Es gibt keine Icon-Steuerung für den Button Um einen hinzuzufügen, siehe So fügen Sie dem Absenden-Button für Kontaktformular 7 ein Font Awesome-Symbol hinzu.
Häufig gestellte Fragen zum Kontaktformular 7
Wie verbinde ich das mit meinen bestehenden Formularen für das Kontaktformular 7?
Im Reiter Inhalt öffnen Wählen Sie das Kontaktformular. Es listet jedes Formular auf, das Sie im Kontaktformular erstellt haben. 7. Wählen Sie eines aus und das Widget zeigt es mit dem von Ihnen gewählten Design an.
Wird mein Formular weiterhin E-Mails versenden und wie im Kontaktformular 7 konfiguriert funktionieren?
Ja. Das Widget ändert nur das Aussehen des Formulars Felder, E-Mail-Einstellungen, Nachrichten und Spamschutz bleiben im Kontaktformular 7 und funktionieren so, wie Sie sie dort einrichten.
Ist das Kontaktformular 7 Widget kostenlos?
Ja, das Widget ist Teil des kostenlosen Master Addons Plugins, und Style One to Style Four sind kostenlos Style Five to Style Eleven brauchen Master Addons Pro. Das Kontaktformular 7 selbst ist ebenfalls kostenlos.
Benötige ich das Plugin Kontaktformular 7?
Ja. Dieses Widget styles Kontaktformular 7 bildet, daher muss das kostenlose Plugin Kontaktformular 7 installiert und aktiv sein Ohne zeigt das Widget einen Hinweis “Kontaktformular 7 ist nicht aktiviert” an.
Was passiert, wenn ich ein neues Feld im Plugin Kontaktformular 7 hinzufüge?
Bearbeiten Sie das Formular in Kontaktformular 7 und speichern Sie Das Widget zeigt das aktualisierte Formular an, und Ihre Feld - und Beschriftungsstile gelten für das neue Feld, da sie auf alle Textfelder und Beschriftungen abzielen Aktualisieren Sie den Elementor-Editor, wenn die Vorschau nicht aktualisiert wird.
Muss ich CSS kennen, um meine Formulare zu stylen?
Nein für Farben, Ränder, Abstände und Typografie, die allesamt Bedienelemente des Panels sind Layout im Inneren des Formulars, wie zum Beispiel das Anbringen zweier Felder nebeneinander, stammt von Ihrem Markup des Formblatts Kontaktformular 7.
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
