Möchten Sie ein Kontaktformular 7-Formular mit dem Essential Addons-Plugin von Elementor anpassen?
Kontaktformular 7 ist eines davon Wordpress-Plugins der beliebtesten Formularersteller. Es ist völlig kostenlos und Sie können damit eine erstellen Kontaktformular auf Ihrer WordPress-Website.
Sie können auch viele Arten von Formularen erstellen, z. B. ein Reservierungsformular oder ein Datei-Upload-Formular. Es bietet 14 Arten von Feldern, die Sie beim Erstellen eines Formulars verwenden können.
Siehe auch: So verwenden Sie Elementor-Widgets/Vorlagen als Gutenberg-Blöcke
Eines der häufigsten Probleme mit dem Kontaktformular 7-Plugin ist der Anpassungsprozess. Contact Form 7 verwendet den Standardstil von Ihnen Wordpress-Theme Anlage. Sie können einen anderen Stil verwenden, aber CSS-Kenntnisse sind erforderlich. Wenn Sie keine CSS-Kenntnisse haben, können Sie das Modul verwenden Wesentliche Addons um Ihr Formular zu stylen.
Essential Addons ist ein Elementor-Add-On, das den Prozess der Anpassung Ihrer Contact Form 7-Formulare mit Elementor verbessert. Elementor und Essential Addons sind Freemium-Plugins. Sie können die kostenlosen Versionen von beiden verwenden, um Ihre Contact Form 7-Formulare zu gestalten.
So gestalten Sie ein Kontaktformular 7-Formular mit Essential Addons
Bevor Sie mit dem Gestalten Ihrer Formulare beginnen, vergewissern Sie sich, dass Sie es installiert haben Elementor et Wesentliche Addons. Erstellen Sie nach der Installation und Aktivierung eine neue Seite (Seiten – > Hinzufügen) und bearbeiten Sie es mit Elementor.
Bevor Sie mit dem Anpassungsprozess beginnen, legen Sie das Seitenlayout fest, indem Sie auf das Zahnradsymbol in der unteren linken Ecke klicken. Legen Sie das Layout aus dem Dropdown-Menü fest.
Fügen Sie einen neuen Abschnitt hinzu, indem Sie auf das Plus-Symbol im Bearbeitungsfeld klicken und das Widget ziehen EA-Kontaktformular 7 aus dem linken Bereich im Editor.
Gehen Sie zum linken Bereich und wählen Sie das Formular aus, dessen Stil Sie anpassen möchten.
Navigieren Sie nach Auswahl eines Formulars zur Registerkarte Design. Wie Sie sehen können, können Sie mehrere Styling-Optionen festlegen. Hier sind die allgemeinen Styling-Optionen, die Sie festlegen können.
- Breite, Ausrichtung und Hintergrund des Formulars
Unter dem Block FormularContainer, klicken Sie im Abschnitt auf die Farbauswahl Hintergrundtyp und stellen Sie die gewünschte Farbe für den Hintergrund des Formulars ein. Sie können entweder eine Volltonfarbe oder eine Verlaufsfarbe als Hintergrund verwenden.
Lesen Sie auch: Elementor: So importieren oder exportieren Sie Vorlagen
Um die Formularausrichtung festzulegen, wählen Sie einfach Ihre bevorzugte Ausrichtungsoption im Abschnitt aus Formularausrichtung.
Um die Breite des Formulars festzulegen, legen Sie den Wert der Maximale Breite des Formulars im Feld fest Maximale Breite des Formulars.
- Hintergrundfeld, Rahmenbreite und -radius
Um den Hintergrund der Felder, die Breite und den Radius der Umrandung festzulegen, können Sie den Abschnitt öffnen Eingabe- & Textbereich. Klicken Sie auf die Feldfarbenauswahl Hintergrundfarbe um den Hintergrund einzustellen.
Sie können auch die Hintergrundfarbe von Feldern im Debug-Modus einstellen, indem Sie auf die Registerkarte klicken ANC.
Um die Breite der Felder zu definieren, können Sie den Wert in den Feldern definieren Eingabebreite. In diesem Abschnitt können Sie auch die Breite des Textfeldfeldes einstellen Breite des Textbereichs.
Um den Randradius festzulegen, bearbeiten Sie einfach das Feld Randradius und stellen Sie den gewünschten Randwert ein. Sie können auch die Typografie (Schriftfamilie, Schriftgröße, Schriftstil) festlegen, indem Sie auf das Stiftsymbol im Feld klicken Typographie.
- Etiketten
Mit Essential Addons können Sie auch den Stil der Beschriftungen Ihres Formulars anpassen. Sie können die Textfarbe sowie die Typografie festlegen. Öffnen Sie dazu die Option Etiketten. Legen Sie die Textfarbe fest, indem Sie auf die Farbauswahl im Feld klicken Textfarbe.
Um die Typografie festzulegen, klicken Sie auf das Stiftsymbol auf dem Feld Typografie.
- Senden-Schaltfläche
Um den Stil der Senden-Schaltfläche anzupassen, öffnen Sie den Block Taste Senden. Von hier aus können Sie Schaltflächenausrichtung, Breite, Hintergrundfarbe, Textfarbe, Randradius sowie Typografie festlegen.
- Fehlermeldung
Um den Stil der Fehlermeldung anzupassen, können Sie den Block öffnen Fehler. Sie können die Textfarbe der Fehlermeldung, die Typografie, die Hintergrundfarbe des Validierungsfehlers, die Textfarbe des Validierungsfehlers usw. festlegen.
Sie können mehrere andere Stiloptionen festlegen. Sie können mit dem linken Bedienfeld herumspielen, bis Sie mit dem Stil Ihres Formulars zufrieden sind.
Sie können Ihrer Seite mehrere andere Elemente hinzufügen, indem Sie die verfügbaren Widgets von Elementor und Essential Addons verwenden. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche VERÖFFENTLICHUNG unten im linken Bereich, um Ihre Seite zu veröffentlichen.
Integration des Formulars in eine normale Seite
Nachdem Sie auf die Schaltfläche geklickt haben VERÖFFENTLICHUNG, Ihre Kontaktseite wurde grundsätzlich veröffentlicht. Die Seite selbst wird von Elementor betrieben. Wenn Sie es vorziehen, Ihre hinzuzufügen Kontaktformular 7 auf eine normale Seite (eine Seite, die mit Gutenberg, dem standardmäßigen WordPress-Editor, erstellt wurde), können Sie das Plugin installieren Elementor-Blöcke für Gutenberg. Dieses Plugin konvertiert eine Elementor-Vorlage in einen Gutenberg-Block.
Um Ihre zu registrieren Kontaktformular 7 als Elementor-Vorlage erstellen möchten, klicken Sie auf die Pfeilschaltfläche neben der Schaltfläche VERÖFFENTLICHEN / AKTUALISIEREN auf der linken Seite und wählen Sie aus Als Vorlage speichern.
Geben Sie Ihrer Vorlage einen Namen und klicken Sie auf die Schaltfläche AUFZEICHNUNG.
Neue Seite erstellen (Seiten – > Hinzufügen) und geben Sie ihm einen Namen wie „kontaktieren Sie uns“, „Kontakt“ oder einen beliebigen anderen Namen.
Fügen Sie einen neuen Block hinzu und wählen Sie ihn aus Elementor-Bibliothek und wählen Sie die soeben erstellte Kontaktformular-Formularvorlage aus.
Und jetzt haben Sie gerade Ihr Contact Form 7-Formular personalisiert.
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
Hier ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie ein Kontaktformular 7-Formular mit Essential Addons anpassen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie es ihnen im mit commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
