Bildoptimierung in WordPress zur Verbesserung der Ladezeit deiner Webseite

Deine WordPress-Website lädt nicht schnell genug? Häufig ist der größte Flaschenhals die Größe der Bilder auf deiner Seite. In diesem Tutorial führen wir dich durch den kompletten Prozess, wie du ein Plugin installierst und dafür sorgst, dass es deine Bilder automatisch optimiert und das kleinere .webp Format umwandelt.

Contact Form 7 in WordPress: Vorteile, DSGVO-Anpassungen & reCaptcha Integration leicht gemacht

Entdecke in diesem Contact Form 7 Tutorial, wie du das leistungsstarke WordPress-Plugin effektiv einsetzt, um Kundenanfragen professionell zu verwalten. Lerne Schritt für Schritt, wie du dein Kontaktformular DSGVO-konform anpasst, reCAPTCHA integrierst und Spam-Nachrichten verhinderst.

Contact Form 7 gehört zu den beliebtesten und vielseitigsten Plugins für WordPress. Es ermöglicht dir, benutzerdefinierte Kontaktformulare schnell und einfach zu erstellen und auf deiner Website einzubinden – und das ganz kostenlos und flexibel an deine Bedürfnisse anpassbar. In diesem Artikel zeigen wir dir Schritt für Schritt, wie du Contact Form 7 optimal einsetzen kannst.

Vorteile von Contact Form 7

  • Hoher Funktionsumfang
  • Komplett kostenlos, auch bei Funktionalitäten, die bei anderen Plugins kostenpflichtig sind

Nachteile von Contact Form 7

  • Wenig benutzerfreundliche Oberfläche / kein visueller Editor
  • Der Code ist aufgebläht (auch bei Nichtnutzung des Plugins sind im Quellcode Elemente und Skripte von CF 7 zu finden)
  • Nachrichten werden standardmäßig nicht in der Datenbank der Webseite gespeichert

Während man sich an die Oberfläche mit der Zeit gewöhnt, kann man mit Hilfe weiterer Plugins und Code-Anpassungen die übrigen Nachteile von Contact Form 7 relativ einfach umgehen.

Das Erstellen eines Formulars

  1. Tipp:

    Falls dir das Standard-Design von Contact Form 7 nicht gefällt, schau dir gerne unser YouTube-Video dazu an.
    Nach der Installation des Plugins, navigiere zum WordPress Menüpunkt -> Formulare -> Kontaktformulare.
  2. Hier siehst du eine Übersicht deiner bereits erstellten Formulare. Tipp: Mit CF 7 kannst du problemlos Formulare duplizieren, du musst also nur einmal die Arbeit reinstecken.
  3. Nutze die blau umrandeten Knöpfe im Formular, um Elemente hinzuzufügen, oder gib sie mit dem CF7-Syntax direkt in das Textfeld ein.
  4. Label ist dabei der Name des Feldes.
  5. Du kannst im Formular-Tag-Generator das Feld zum Pflichtfeld machen sowie einen Platzhalter einfügen, dann wird der Standardwert dafür genutzt.
  6. Nach der Fertigstellung speichere das Formular und kopiere den Shortcode aus dem blauen Kasten.
  7. Füge den Shortcode auf der gewünschten Seite (z.B. Kontaktseite) ein.

Spam-Nachrichten mit reCAPTCHA verhindern

Tipp:

Falls du eine DSGVO-konforme Methode zur Spam-Verhinderung bevorzugst, bieten wir dir dazu selbstverständlich auch ein ausführliches Tutorial an.
Google’s reCAPTCHA ermittelt je nach Version auf verschiedene Weisen, ob es sich bei einem Webseitenbesucher um einen Menschen oder Bot handelt. Bei der wohl bekanntesten Version, reCAPTCHA v2, musst du die richtigen Bilder auswählen, um zu bestätigen, dass du ein Mensch bist. Auch die Bewegung der Maus wird analysiert, und wenn diese zu roboterhaft wirkt, wird der Zugriff verweigert.

Die neuere Version, reCAPTCHA v3, erfordert keine Interaktion mehr. Es wird im Hintergrund automatisch erkannt, ob sich jemand natürlich verhält.

Allerdings macht reCAPTCHA v3 mitunter Fehler und stuft Menschen fälschlicherweise als Bots ein. In der Vergangenheit haben wir daher bevorzugt auf reCAPTCHA v2 gesetzt, welches standardmäßig nicht (mehr) in CF7 integriert ist. Mittlerweile ist unsere bevorzugte Lösung das Anti-Spam-Plugin von Matthias Nordwig, das wir in diesem Video auf unserem YouTube-Kanal ausführlich vorgestellt haben: Spam in WordPress vermeiden – DSGVO konform und besser als Google ReCaptcha!
Eine weitere Alternative ist ein DSGVO konformes Image Captcha, das wir dir in diesem Video vorgestellt haben: Spam in Contact Form 7 mit dem Image Captcha DSGVO-konform vermeiden! Im Folgenden zeigen wir dir, wie du reCaptcha v2 installieren kannst.

Einrichten von reCAPTCHA v2

  1. Gehe zu -> Plugins und installiere -> ReCaptcha v2 for Contact Form 7.
  2. Aktiviere das Add-on.
  3. Gehe in WordPress zu -> Formulare -> reCaptcha Version und wähle reCAPTCHA Version 2.
  4. Lasse die reCAPTCHA-Quelle bei google.com und klicke auf -> “Absenden”.
  5. Füge den [recaptcha] Shortcode am Ende des Formulars ein. (Nicht notwendig, wenn du v3 verwendest.)
  6. Gehe zu -> Integrationen und wähle unter “reCAPTCHA” -> Integration konfigurieren.
  7. Folge diesem Link, um auf die richtige Google reCAPTCHA-Seite zu gelangen (Wichtig: Du musst in deinem Google-Konto eingeloggt sein).
  8. Klicke auf das “+”-Symbol oben rechts, um einen neuen Eintrag hinzuzufügen.
  9. Benenne das Label und wähle unter -> reCAPTCHA-Typ Version 2.
  10. Klicke auf „Kästchen, ich bin kein Roboter”.
  11. Um den Missbrauch deines CAPTCHA-Schlüssels zu verhindern, füge unter -> Domains deine Webseite hinzu, damit nur sie die Schlüssel verwenden kann.
  12. Akzeptiere die Nutzungsbedingungen und kopiere den Webseiten-Schlüssel und den Geheimcode in die entsprechenden Felder bei Contact Form 7.

DSGVO-Checkbox einbauen

  1. Erstelle mit dem Formular-Tag-Generator eine “Zustimmung” und gib ihr einen Namen.
  2. Definiere die nicht optionale Zustimmung etwas weiter unten.
  3. Wähle “Tag einfügen” und füge darüber ein <label> ein. Erkläre deinen Kunden, dass sie mit dem Anklicken des Kästchens deine Nutzungsbedingungen akzeptieren.

Wenn du einen Link zu deiner Datenschutzerklärung einfügen möchtest, verwende dafür HTML und integriere den entsprechenden Link. Achte darauf, das Attribut target="_blank" zu nutzen, damit der Link in einem neuen Tab geöffnet wird. Ein Beispiel für den HTML-Eintrag könnte so aussehen:

<a href="/datenschutz-firma-jaist-bad-aibling-parkett-handwerk/" target="_blank">

Tipp: Ergänze am Ende deines Formulars einen Hinweis, dass die Datenschutzerklärung akzeptiert werden muss, damit das Formular erfolgreich abgesendet werden kann.

Einrichtung der E-Mail Vorlage

Die E-Mail-Vorlage von Contact Form 7 ist recht selbsterklärend. Dennoch haben wir einige Tipps für dich, damit alles reibungslos abläuft:

  1. Verwende nur die grauen Tags, die dir unter dem Reiter „E-Mail“ angezeigt werden, da nur diese in deiner E-Mail eingesetzt werden können.
  2. Trage bei „Von“ einen sinnvollen Absender wie „Kontaktformular von [dein Firmenname]“ ein und nutze eine existierende E-Mail-Adresse von dir.
  3. Das DSGVO-Feld solltest du nicht in die E-Mail aufnehmen, da deine Kunden bereits vor dem Absenden des Formulars ihre Zustimmung gegeben haben.
  4. Die Option „E-Mail (2)“ ermöglicht es, eine Bestätigungs-E-Mail an den Kunden zu senden. Diese Option ist optional, da oft eine Bestätigungsnachricht auf der Website ausreicht.

Vorlage:

Von: [vollername]
E-Mail: [your-email]
Telefonnummer: [your-fon]
Anliegen: [was]
Nachricht: [your-message]

------------
Diese E-Mail wurde vom Kontaktformular der Seite Deinedomain.de gesendet.

Automatisches Speichern von Nachrichten in der Datenbank

Wenn du Probleme mit dem Versand deiner E-Mail hast kann es passieren, dass Nachrichten, die über das Kontaktformular deiner Webseite abgeschickt werden, verloren gehen. Du kannst hier nachhelfen, indem du die über das Contact Form 7 verschickten Nachrichten auch in deiner Datenbank speicherst. So garantierst du, dass deine Kunden immer eine Antwort erhalten. Wir empfehlen dir hierzu das Plugin Contact Form 7 Database Addon – CFDB7, um das Risiko zu minimieren, eine Nachricht zu verlieren.

Weiterhin empfehlen wir dir die Installation eines Plugins, das den E-Mail-Versand auf SMTP umstellt; hierzu empfehlen wir dir aktuell das Plugin FluentSMTP. Eine Anleitung zur Einrichtung gibt es als Teil unserer Video-Serie Einführung in WordPress. Alternativ kannst du auch auf unser Tutorial zur Einrichtung des Plugins Post SMTP Mail / Email Log setzen.

Zuletzt noch der Hinweis, dass du auf GitHub unsere Vorlagen findest, um die zu versendende E-Mail zu gestalten sowie das Kontaktformular einzurichten.

Hast du Fragen oder Anmerkungen? Hinterlasse gerne einen Kommentar unter diesem Beitrag und bewerte ihn, sofern er dir gefallen hat.

Beitrag bewerten

fürchterlich!mehgutsehr gut!fantastisch! (0)
Loading...

Fragen oder Anregungen zum Beitrag?
Hinterlasse einen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert