ElementsKit enthält das Contact Form 7-Widget, das die Funktionalitäten des Formularerstellungs-Plugins ergänzt. Sie können die Stile von Contact Form 7 mit Elementor anpassen, indem Sie die Funktionalität des Seitenerstellungstools voll ausnutzen.

Lesen Sie diese Dokumentation, um zu erfahren, wie Sie das Formular mit Contact Form 7 mit Elementor erstellen und anpassen.

Voraussetzung: #

Dieses Widget ist ein Add-on für Contact Form 7.

Deshalb brauchen Sie Contact Form 7 Plugin installiert auf Ihrer WordPress-Site.

Schritt 1: Erstellen Sie ein Formular mit Contact Form 7 #

1. Gehe zu Kontakt > Neu hinzufügen.
2. Geben Sie einen Formularnamen ein.
3. Konfigurieren Sie die Einstellungen und Attribute des Formulars.
4. Klick auf das Speichern Taste.

Schritt 2: Holen Sie sich Contact Form 7 in Elementor #

Um das Contact Form 7 auf Elementor zu erhalten, aktivieren Sie zuerst das ElementsKit Contact Form 7-Widget, öffnen Sie dann den Elementor-Editor und ziehen Sie das Widget per Drag & Drop in den Entwurfsbereich.

Contact Form 7-Widget aktivieren #

So aktivieren Sie das Content-Ticker-Widget:

1. Navigieren Sie zu ElementsKit > Widgets aus dem WordPress-Dashboard.
2. Finden Sie die Kontaktformular 7 Widget aus der Liste und Aktivieren Sie das Widget.
3. Klick auf das ÄNDERUNGEN SPEICHERN.

Ziehen Sie das Widget per Drag & Drop #

Ziehen Sie anschließend das ElementsKit per Drag & Drop Kontaktformular 7 Widget in den Elementor-Editor.

Schritt 3: Wählen Sie ein Formular zum Bearbeiten mit Elementor aus #

In diesem Schritt können Sie auswählen, welches Formular Sie bearbeiten möchten. Dazu können Sie das Formular aus der Dropdown-Liste auswählen.

In Inhalt > Kontaktformular 7 > Stil Sie finden eine Liste der mit Contact Form 7 erstellten Formulare. Wählen Sie ein Formular aus und fahren Sie mit dem nächsten Schritt fort.

Schritt 4: Contact Form 7 mit Elementor anpassen #

Jetzt können Sie die Stile der Beschriftungen, Eingabefelder und Schaltflächen von Contact Form 7 mit Elementor anpassen.

Etikett #

1. Typografie: Legen Sie die Typografie für den Beschriftungstext fest.
2. Farbe: Wählen Sie eine Textfarbe für den Beschriftungstext.
3. Marge: Passen Sie den Rand für die Formularfeldbeschriftung an.
4. Hinweis: Sie können auch die Typografie und Farbe des Platzhalters ändern.

Eingang #

1. Polsterung: Passen Sie die Polsterung des Eingabefelds an.
2. Breite: Sie können die Breite des Eingabefeldes anpassen.
3. Höhe: Sie können die Höhe des Eingabefeldes ändern.
4. Rand unten: Ändern Sie den Rand am unteren Rand des Eingabefelds.

5. Textbereichshöhe: Sie können die Höhe des langen Textbereichsfelds ändern.
6. Textbereich-Füllung: Sie können auch die Polsterung des Textbereichs ändern.

7. Hintergrundtyp: Wählen Sie einen Hintergrundfarbtyp (klassisch oder Verlaufsfarbe).
8. Farbe: Wählen Sie eine Hintergrundfarbe für das Eingabefeld.
9. Randradius: Legen Sie den Rahmenradius für das Eingabefeld fest.
10. Randtyp: Wählen Sie den Rahmentyp des Eingabefelds aus.
11. Box Schatten: Sie können den Kastenschatten für das Eingabefeld festlegen.

Sie können diese Attribute einzeln festlegen für Normal, Schweben, Und Fokusmodi.

12. Typografie: Legen Sie die Typografie für den Eingabetext fest.
13. Textfarbe: Wählen Sie eine Farbe für den Eingabetext.
14. Platzhalter-Schriftgröße: Passen Sie die Schriftgröße des Platzhalters an.
15. Platzhalterfarbe: Wählen Sie eine Farbe für den Platzhaltertext.

Überprüf den advanced features of ElementsKit 👇