Ranked #1 Best Cloud Service Provider in the Netherlands 2024!
E-commerce
10 Minuten Lesezeit

Der ultimative Leitfaden zum Einrichten des Kontaktformulars 7 auf WordPress

Verfasst von
Veröffentlicht am
November 23, 2023
Updated on
May 17, 2024

Die Schaffung eines nahtlosen Kommunikationskanals zwischen Ihnen und Ihren Website-Besuchern ist für jedes erfolgreiche Online-Geschäft von entscheidender Bedeutung. Contact Form 7 ist ein beliebtes WordPress-Plugin, mit dem Sie genau das tun können. In diesem umfassenden Handbuch führen wir Sie durch den gesamten Prozess der Konfiguration von Contact Form 7 für Ihre WordPress-Site, von der Installation bis zur Anpassung.

Contact Form 7 installieren

Um loszulegen, müssen Sie Contact Form 7 auf Ihrer WordPress-Website installieren und aktivieren. Folgen Sie diesen Schritten:

  1. Loggen Sie sich in Ihr WordPress-Admin-Dashboard ein.
  2. Navigiere zu Plugins > Neu hinzufügen.
  3. Geben Sie in der Suchleiste „Contact Form 7" ein und drücken Sie die Eingabetaste.
  4. Lokalisieren Sie den Kontaktformular 7-Plugin von Takayuki Miyoshi und klicken Sie auf Jetzt installieren.
  5. Sobald die Installation abgeschlossen ist, klicken Sie auf Aktivieren.

Herzlichen Glückwunsch, Contact Form 7 ist jetzt installiert und kann auf Ihrer Website verwendet werden!

Erstellen Sie Ihr erstes Kontaktformular

Wenn Contact Form 7 installiert ist, können Sie jetzt Ihr erstes Kontaktformular erstellen. Gehen Sie dazu wie folgt vor:

  1. Gehe in deinem WordPress-Admin-Dashboard zu Kontakt > Neu hinzufügen.
  2. Geben Sie einen Titel für Ihr Kontaktformular in das dafür vorgesehene Feld ein.
  3. Sie werden sehen, dass bereits eine Standardformularvorlage vorhanden ist. Sie können diese Vorlage ändern oder eine neue Vorlage von Grund auf neu erstellen. Im Moment verwenden wir die Standardvorlage.
  4. Klicken Sie auf Speichern, um Ihr neues Kontaktformular zu speichern.

Hinzufügen von Formularfeldern

Das Anpassen Ihres Kontaktformulars ist mit Contact Form 7 ganz einfach. Sie können verschiedene Felder wie Textfelder, Dropdownmenüs, Checkboxen und mehr hinzufügen. Gehen Sie wie folgt vor:

  1. Platzieren Sie den Cursor im Formulareditor an der Stelle, an der Sie ein neues Feld hinzufügen möchten.
  2. Klicken Sie in der Werkzeugleiste über der Formularvorlage auf den Feldtyp, den Sie hinzufügen möchten (z. B. Text, E-Mail, URL usw.).
  3. Es erscheint ein Popup-Fenster, in dem Sie die Eigenschaften des Felds anpassen können, z. B. die Bezeichnung, den Standardwert und den erforderlichen Status.
  4. Klicken Sie auf Tag einfügen, um das Feld zu Ihrer Formularvorlage hinzuzufügen.

Wiederholen Sie diese Schritte für jedes Feld, das Sie Ihrem Formular hinzufügen möchten.

Konfiguration von E-Mail-Benachrichtigungen

Sobald Ihr Formular fertig ist, müssen Sie E-Mail-Benachrichtigungen einrichten, um Nachrichten von Besuchern Ihrer Website zu erhalten. Um das zu tun:

  1. Scrollen Sie im Formulareditor nach unten zum Abschnitt E-Mail.
  2. Geben Sie Ihre E-Mail-Adresse in das Feld An ein, um Formularübermittlungen zu erhalten.
  3. Passen Sie die Felder „Von“, „Betreff“ und „Zusätzliche Kopfzeilen“ nach Bedarf an.
  4. Stellen Sie im Feld Nachrichtentext sicher, dass alle Formularfeld-Tags enthalten sind, damit Sie die übermittelten Informationen erhalten.

Vergessen Sie nicht, auf Speichern zu klicken, um Ihre Änderungen zu speichern.

Gestalten Sie Ihr Kontaktformular

Um Ihr Kontaktformular optisch ansprechend und konsistent mit dem Design Ihrer Website zu gestalten, können Sie benutzerdefinierte CSS-Stile anwenden. So geht's:

  1. Gehe in deinem WordPress-Dashboard zu: Darstellung > Anpassen.
  2. Navigieren Sie zum Abschnitt Zusätzliches CSS.
  3. Fügen Sie Ihren benutzerdefinierten CSS-Code hinzu, um die Elemente des Kontaktformulars 7 zu gestalten. Zum Beispiel:

.wpcf7-Formular {

Hintergrundfarbe: #f8f8f8;

Polsterung: 20px;

Grenzradius: 5 px;

}


.wpcf7-form-Eingabe [type="text "],

.wpcf7-Formulareingabe [type="email "],

.wpcf7-form-Textbereich {

Breite: 100%;

Polsterung: 10px;

Rand: 1px solid #ccc;

Grenzradius: 3px;

}


.wpcf7-einreichen {

Hintergrundfarbe: #4CAF50;

Grenze: keine;

Farbe: weiß;

Polsterung: 15px 32px;

Textausrichtung: zentriert;

Textdekoration: keine;

Anzeige: Inline-Block;

Schriftgröße: 16px;

Rand: 4px 2px;

Cursor: Zeiger;

Grenzradius: 5 px;

}

  1. Klicken Sie auf Veröffentlichen, um Ihre benutzerdefinierten Styles zu speichern.

Ihr Kontaktformular sollte jetzt nach Ihren Wünschen gestaltet sein.

Tipps für den Spam-Schutz

Spam kann für Webseitenbesitzer ein erhebliches Problem sein. Zum Glück bietet Contact Form 7 mehrere Optionen, um Ihre Formulare vor Spam-Einsendungen zu schützen:

  1. CAPTCHA: Integrieren Sie den reCAPTCHA-Dienst von Google, um Ihrem Formular ein CAPTCHA-Feld hinzuzufügen. Dazu müssen Benutzer überprüfen, ob sie ein Mensch sind, bevor sie das Formular abschicken.
  2. Honigtopf: Verwenden Sie das Honeypot-Plugin von Contact Form 7, um Ihrem Formular ein verstecktes Feld hinzuzufügen. Bots füllen das Feld aus, aber Menschen werden es nicht sehen. Wenn das Feld ausgefüllt ist, wird die Einreichung als Spam gekennzeichnet.
  3. Akismet: Integrieren Sie Contact Form 7 in den Anti-Spam-Dienst von Akismet, um Spam-Eingaben automatisch herauszufiltern.

Die Implementierung einer oder mehrerer dieser Methoden kann dazu beitragen, Ihren Posteingang sauber zu halten und sicherzustellen, dass Sie nur legitime Nachrichten von Ihren Website-Besuchern erhalten.

Integration mit Alumio

Alumio ist eine leistungsstarke Integrationsplattform, die Ihnen bei Ihrem WordPress-Integrationen mit verschiedenen Anwendungen und Systemen. Durch die Integration von Contact Form 7 in Alumio können Sie Prozesse automatisieren und Ihre Arbeitsabläufe optimieren.

Sie können Contact Form 7 beispielsweise mit Ihrem CRM-System verbinden, um automatisch Leads oder Kontakte zu erstellen, wenn ein Formular gesendet wird. Das spart Zeit und stellt sicher, dass keine Leads verpasst werden.

Um Contact Form 7 mit Alumio zu integrieren, müssen Sie:

  1. Eröffnen Sie ein Alumio-Konto.
  2. Erstellen Sie eine neue Integration in Alumio und verbinden Sie WordPress mit Ihrer gewünschten Anwendung (z. B. CRM, Marketing Automation usw.).
  3. Konfigurieren Sie die Integrationseinstellungen, um die Felder von Contact Form 7 den entsprechenden Feldern in Ihrer verbundenen Anwendung zuzuordnen.
  4. Aktivieren und testen Sie die Integration, um sicherzustellen, dass alles korrekt funktioniert.

Wenn Alumio und Contact Form 7 zusammenarbeiten, können Sie effizientere Arbeitsabläufe erstellen und das Beste aus den Kontaktformularen Ihrer Website herausholen.

Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the business automation benefits!
Nehmen Sie Kontakt auf

Wir helfen Ihnen gerne weiter und beantworten Ihre Fragen

About our partner

Start integrating with popular apps!

No items found.

Connect with any custom endpoint

Start integrating with popular apps!

No items found.

Connect with

No items found.
Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the business automation benefits!