Das Feedback-Formular ist eines der wichtigsten Elemente einer Website, mit dem Benutzer einen Webmaster oder Websitebesitzer kontaktieren können. Contact Form 7 ist eines der beliebtesten Plugins zum Erstellen von Feedback-Formularen in WordPress. Aber wie passt man das Aussehen dieses Formulars so an, dass es dem Stil Ihrer Website entspricht?
In diesem Artikel werden wir uns eine detaillierte Anleitung zum Anpassen des Erscheinungsbilds von Contact Form 7 für WordPress ansehen. Wir zeigen Ihnen, wie Sie Formularstile ändern, eigene CSS-Klassen hinzufügen, Erfolgs- und Fehlermeldungen anpassen und eigene Felder und Elemente zum Formular hinzufügen können.
Mit diesen Informationen können Sie das Erscheinungsbild Ihres Feedback-Formulars leicht anpassen, sodass es harmonisch in das Design Ihrer Website passt. Egal, ob Sie ein WordPress-Theme oder ein Website-Design haben - mit Contact Form 7 und dieser Anleitung können Sie ein Feedback-Formular erstellen, das genau so aussieht, wie Sie es möchten.
Aussehen von Contact Form 7 für WordPress: Detaillierte Anleitung
Wenn Sie ein Formular mit dem Plugin Contact Form 7 für WordPress erstellen, können Sie das Erscheinungsbild des Formulars so ändern, dass es dem Design Ihrer Website entspricht. In dieser detaillierten Anleitung erfahren Sie, wie Sie das Erscheinungsbild von Contact Form 7 anpassen.
Schritt 1: Erstellen Sie ein neues Formular
Als erstes öffnen Sie die Formular-Bearbeitungsseite im WordPress-Administrationsbereich und erstellen Sie ein neues Formular. Dazu können Sie den Contact Form 7-Assistenten verwenden oder eine fertige Formularvorlage kopieren und bearbeiten.
Schritt 2: Ändern Sie das Markup des Formulars
Bevor Sie das Erscheinungsbild eines Formulars ändern, können Sie das Markup des Formulars mithilfe von HTML-Tags ändern. Öffnen Sie dazu die Bearbeitungsseite des Formulars und suchen Sie nach dem Feld Formularmarkierung. In diesem Feld können Sie die HTML-Struktur des Formulars ändern, Klassen oder Attribute zu den Formularelementen hinzufügen.
Schritt 3: Ändern Sie die Formstile
Der nächste Schritt besteht darin, die Formstile zu ändern. Dazu können Sie CSS verwenden, um Farben, Schriftarten, Einrückungen und andere Stile für Formularelemente wie Textfelder, Schaltflächen usw. zu definieren. Sie können Ihrer WordPress-Theme-Stildatei Ihre Stile hinzufügen oder den integrierten Contact Form 7-Stileditor verwenden.
Schritt 4: Fügen Sie Klassen und IDs hinzu
Wenn Sie spezifische Stile nur auf bestimmte Formulare anwenden möchten, können Sie Ihrem Formular Klassen und IDs hinzufügen. Öffnen Sie dazu die Seite "Formular bearbeiten" und suchen Sie nach dem Feld "Erweiterte Einstellungen" oder "Formularklasse". Hier können Sie Klassen und IDs hinzufügen, die dann in Ihrer CSS-Datei verwendet werden können, um die Stile nur für dieses Formular anzupassen.
Schritt 5: Einrichten von Fehler- und Erfolgsmeldungen
Schließlich können Sie die Fehlermeldungen anpassen und das Formular erfolgreich senden. Öffnen Sie dazu die Seite zum Bearbeiten des Formulars und suchen Sie nach den entsprechenden Feldern zum Anpassen von Fehler- und Erfolgsmeldungen. Hier können Sie den Nachrichtentext ändern und CSS-Klassen zum Formatieren von Nachrichten definieren.
Nachdem Sie alle diese Schritte abgeschlossen haben, hat Ihr Contact Form 7-Formular ein angepasstes Erscheinungsbild, das dem Design Ihrer Website entspricht. Sie können das Formular überprüfen, indem Sie es ausfüllen und eine Testnachricht senden.
Contact Form 7 Plugin installieren
Zuerst müssen Sie das Contact Form 7-Plugin auf Ihrer WordPress-Website installieren. Hier ist, wie man es macht:
- Gehen Sie zum Administrationsbereich Ihrer WordPress-Website.
- Wählen Sie in der Navigationsleiste die Option Plugins aus.
- Klicken Sie auf die Schaltfläche "Neu hinzufügen".
- Geben Sie in der Suchleiste "Contact Form 7" ein.
- Wenn das Plugin als Ergebnis der Suche angezeigt wird, klicken Sie auf die Schaltfläche "Jetzt installieren".
- Klicken Sie nach der Installation des Plugins auf die Schaltfläche "Plugin aktivieren".
Jetzt haben Sie das Contact Form 7-Plugin erfolgreich auf Ihrer WordPress-Website installiert und aktiviert. Als nächstes können Sie das Erscheinungsbild des Kontaktformulars anpassen.
Erstellen und Anpassen eines neuen Formulars
Befolgen Sie diese einfachen Schritte, um ein neues Formular mit dem Plugin Contact Form 7 für WordPress zu erstellen:
- Öffnen Sie das Admin-Panel Ihrer WordPress-Website.
- Wechseln Sie in der Seitenleiste zum Abschnitt "Kontakte".
- Klicken Sie auf die Schaltfläche "Neu hinzufügen", um ein neues Formular zu erstellen.
Danach sehen Sie den Bearbeitungsbildschirm des Formulars, in dem Sie das Erscheinungsbild und den Inhalt des Formulars anpassen können.
Formulareinstellungen anpassen
Bevor Sie beginnen, das Formular selbst anzupassen, können Sie einige grundlegende Einstellungen festlegen. Einige der wichtigsten Einstellungen umfassen die folgenden:
- Name des Formulars: Geben Sie den Namen des Formulars an, der im Administrationsbereich und in Popup-Fenstern angezeigt werden soll
- Empfaenger: Geben Sie eine E-Mail-Adresse oder mehrere Adressen an, an die die Formulardaten gesendet werden sollen
- Betreff des Briefes: Geben Sie den Betreff der E-Mail an, die in den Benachrichtigungen angezeigt werden soll
- Text der Sendeschaltfläche: Geben Sie den Text an, der auf der Übermittlungsschaltfläche des Formulars angezeigt wird
Nachdem Sie diese grundlegenden Einstellungen konfiguriert haben, können Sie beginnen, dem Formular Felder hinzuzufügen.
Hinzufügen von Feldern zu einem Formular
Um dem neuen Formular Felder hinzuzufügen, müssen Sie die vordefinierten Contact Form 7-Tags verwenden. Diese Tags definieren den Feldtyp und seine Parameter. Hier sind einige Beispiele für Tags, die Sie verwenden können:
- [text your-name] : Feld zum Eingeben eines Namens
- [email your-email] : E-Mail-Eingabefeld
- [textarea your-message] : Texteingabefeld für die Nachricht
- [Senden"Senden"] : Schaltfläche zum Senden eines Formulars
Sie können eine beliebige Anzahl von Feldern hinzufügen, indem Sie diese Tags verwenden und die erforderlichen Parameter für jedes Feld angeben.
Nachdem Sie dem Formular Felder hinzugefügt haben, achten Sie darauf, die Änderungen zu speichern, bevor Sie mit dem nächsten Schritt fortfahren.
Benachrichtigungen einrichten
Wenn Sie Benachrichtigungen über das Ausfüllen eines Formulars erhalten möchten, können Sie Contact Form 7 so konfigurieren, dass E-Mails an eine bestimmte Adresse gesendet werden. Gehen Sie dazu zum Abschnitt "Benachrichtigungen" und fügen Sie die Adresse(e) des Empfängers in das entsprechende Feld ein.
Sie können den Benachrichtigungstext auch so anpassen, dass er Ihren Bedürfnissen entspricht.
Einfügen eines Formulars in eine Website
Wenn das Formular fertig ist, müssen Sie es in Ihre Website einfügen. Verwenden Sie dazu einen speziellen Shortcode [contact-form-7 ] wobei "id" die eindeutige ID Ihres Formulars ist.
Sie können diesen Shortcode auf jeder Seite oder jedem Eintrag Ihrer Website platzieren, auf dem das Formular angezeigt werden soll.
Nachdem Sie nun ein neues Formular mit Contact Form 7 erstellt und eingerichtet haben, ist es für die Verwendung auf Ihrer Website bereit.
