So erstellen Sie AMP-Formulare in WordPress (Der einfache Weg)

Wir haben von vielen WordPress-Website-Besitzern gehört, die die gleiche Frustration teilen. Ihre Formulare sehen gut aus, aber auf AMP-Seiten laden sie entweder zu langsam oder funktionieren überhaupt nicht.

Ein Kleinunternehmer erzählte uns sogar, wie Kunden ihr Bestellformular immer wieder verließen, weil es auf Mobilgeräten ewig zum Laden brauchte.

Wenn Sie sich entschieden haben, AMP zu verwenden, um Ihre Website zu beschleunigen, benötigen Sie eine Lösung für Ihre Formulare. Wir haben einen unkomplizierten Ansatz gefunden, den jeder nutzen kann, um AMP-kompatible Formulare ohne Kopfzerbrechen oder Programmierung zu erstellen.

Nach dem Ausprobieren vieler Plugins und Methoden haben wir einen zuverlässigen Weg entdeckt, um schnelle, mobilfreundliche Formulare zu erstellen, die tatsächlich funktionieren.

In diesem Leitfaden führen wir Sie Schritt für Schritt durch den einfachsten Weg, AMP-Formulare für Ihre WordPress-Website zu erstellen. Egal, ob Sie ein Kontaktformular, eine Umfrage oder ein Bestellformular wünschen, das auf Mobilgeräten sofort geladen wird.

Warum ein AMP-Formular in WordPress erstellen?

Accelerated Mobile Pages, oder AMP, ist ein Google-Projekt, das Websites auf Mobilgeräten schneller laden lässt.

Während AMP ein großartiges mobiles Surferlebnis bietet, indem es Ihre Webseiten schneller laden lässt, deaktiviert es viele nützliche Funktionen auf Ihrer WordPress-Website.

Eines davon sind Kontaktformulare. Da AMP einen begrenzten Satz von HTML und JavaScript verwendet, können Ihre WordPress-Formulare auf AMP-Seiten nicht richtig geladen werden.

Alternativ können Sie eines der vielen responsiven WordPress-Themes verwenden, die eine hervorragende Leistung auf Desktops und Mobilgeräten bieten. Auf diese Weise müssen Sie keine Kompromisse bei der Gestaltung Ihrer Website eingehen, um ein überlegenes Erlebnis auf Mobilgeräten zu bieten.

Wenn Sie jedoch AMP auf Ihrer WordPress-Website verwenden, können Sie ein Plugin verwenden, um Formulare anzuzeigen. Hier ist eine kurze Übersicht über alle Themen, die wir in diesem Leitfaden behandeln werden:

Legen wir los!

AMP-Formulare in WordPress hinzufügen (Schritt für Schritt)

Der beste Weg, ein AMP-Formular zu erstellen, ist die Verwendung von WPForms. Es ist das anfängerfreundlichste WordPress-Kontaktformular-Plugin, das Ihnen hilft, AMP-fähige WordPress-Formulare zu erstellen. Ihr Team hat mit Google zusammengearbeitet, um AMP-Formulare für WordPress einfach zu machen.

Schritt 1: Installieren und Aktivieren des WPForms-Plugins

Sowohl die Lite- als auch die Pro-Version von WPForms ermöglichen es Ihnen, ein grundlegendes AMP-fähiges Kontaktformular zu erstellen. Aber für dieses Tutorial verwenden wir die WPForms Pro-Version, da sie mehr Funktionen, KI-Tools, Formularvorlagen, Add-ons und Anpassungsoptionen bietet.

Um zu beginnen, können Sie die WPForms-Website besuchen und ein Konto erstellen. Klicken Sie dann auf die Schaltfläche „WPForms jetzt erhalten“, wählen Sie einen Plan aus und schließen Sie den Anmeldevorgang ab.

Sobald Sie sich angemeldet haben, werden Sie zu Ihrem WPForms-Konto-Dashboard weitergeleitet. Von dort aus können Sie die Plugin-Datei herunterladen und Ihren Lizenzschlüssel kopieren – beides benötigen Sie in den nächsten Schritten.

Jetzt ist es an der Zeit, WPForms zu Ihrer Website hinzuzufügen. Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Neues Plugin hinzufügen.

Suchen Sie auf dem nächsten Bildschirm nach „WPForms“.

Wenn Sie WPForms in den Ergebnissen sehen, klicken Sie auf 'Jetzt installieren' und dann auf 'Aktivieren'.

Wenn Sie weitere Hilfe bei diesem Schritt benötigen, lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie in Ihrem Dashboard zu WPForms » Einstellungen.

Fügen Sie Ihren Lizenzschlüssel in das Feld 'Lizenzschlüssel' ein und klicken Sie auf 'Schlüssel überprüfen', um Ihr Konto zu verbinden.

Sobald dies erledigt ist, ist WPForms installiert, aktiviert und einsatzbereit auf Ihrer Website.

Schritt 2: AMP zu Ihrer WordPress-Website hinzufügen

Bevor wir ein Formular erstellen, ist es wichtig, dass AMP auf Ihrer WordPress-Website eingerichtet ist.

Um AMP mit WordPress nutzen zu können, müssen Sie das offizielle AMP-Plugin für WordPress über Ihr 'Plugins'-Panel im Adminbereich installieren und aktivieren.

Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung fügt das Plugin automatisch Google AMP-Unterstützung für Ihre WordPress-Site hinzu.

Sie können die AMP-Einstellungen für Ihre Website jedoch ändern, indem Sie in Ihrem Dashboard zu AMP » Einstellungen gehen.

Wenn Sie Anfänger sind, empfehlen wir die Wahl des Lesermodus (manchmal auch als Klassisch bezeichnet). Dies stellt sicher, dass Ihre Haupt-Desktop-Website genau gleich bleibt, während mobile Besucher die superschnelle AMP-Version erhalten.

Weitere Details finden Sie in unserem Leitfaden zur richtigen Einrichtung von Google AMP auf Ihrer WordPress-Website.

Nachdem Sie AMP konfiguriert haben, besteht der nächste Schritt darin, ein AMP-kompatibles Kontaktformular auf Ihrer WordPress-Website zu erstellen.

Schritt 3: Erstellen Sie ein neues AMP-Formular in WPForms

Gehen Sie einfach zur Seite WPForms » Neu erstellen, um ein neues WordPress-Formular zu erstellen.

WPForms ist standardmäßig mit AMP kompatibel, sodass Sie keine speziellen Einstellungen aktivieren müssen.

Auf dem Formular-Einrichtungsbildschirm können Sie damit beginnen, Ihrem Formular einen Namen zu geben.

Dann wählen Sie aus, wie Sie das Formular erstellen möchten.

Sie können 'Leeres Formular' auswählen, wenn Sie von Grund auf neu beginnen möchten. Wenn Sie die einfachere und schnellere Option bevorzugen, können Sie den KI-Formularersteller verwenden. Damit können Sie Ihr Formular mit einer einfachen Eingabeaufforderung erstellen.

Oder verwenden Sie eine vorgefertigte Vorlage, die Sie schnell an Ihre Bedürfnisse anpassen können. WPForms Pro bietet über 2.000 vorgefertigte Vorlagen zur Auswahl!

Für dieses Tutorial wählen wir die Vorlage „Einfaches Kontaktformular“.

Als Nächstes sehen Sie die Formular-Builder-Seite, auf der verschiedene Optionen zur Anpassung Ihrer Vorlage verfügbar sind.

Von hier aus können Sie Formularfelder hinzufügen oder entfernen. Um ein neues Feld zu Ihrem Formular hinzuzufügen, können Sie einfach auf ein Formularfeld im linken Bereich klicken und es auf die Formularvorlage ziehen.

Danach können Sie die Feldoptionen konfigurieren.

Klicken Sie einfach auf ein Feld, und dann erscheinen links 'Feldoptionen'.

Sie können beispielsweise das Label und das Format eines Feldes bearbeiten, es zu einem Pflichtfeld machen, eine bedingte Logik einrichten und vieles mehr. Ebenso können Sie alle anderen Felder anpassen.

Sie können Ihren Formularen auch weitere Felder hinzufügen. WPForms bietet grundlegende Felder wie Dropdown und Schieberegler sowie fortgeschrittenere wie Datumsfelder und Seitenumbrüche.

Ziehen Sie einfach die Feldtypen vom linken Bedienfeld nach rechts oder ordnen Sie sie in der Formularvorschau neu an, indem Sie sie nach oben oder unten ziehen.

Danach können Sie auf den Tab „Einstellungen“ klicken, um Ihre Formulareinstellungen zu konfigurieren.

Die 'Allgemeinen' Einstellungen ermöglichen es Ihnen, den Namen Ihres Formulars, den Text des Sende-Buttons, den Text der Verarbeitung des Sende-Buttons und mehr zu ändern.

Als Nächstes können Sie auf die Registerkarte „Benachrichtigungen“ klicken, um E-Mail-Benachrichtigungen einzurichten, die Sie benachrichtigen, wenn ein Benutzer das Formular ausfüllt.

Als Nächstes können Sie auf die Registerkarte „Bestätigung“ klicken, um eine Bestätigungsnachricht einzurichten, die angezeigt wird, wenn ein Benutzer das Formular absendet.

WPForms ermöglicht es Ihnen, eine Nachricht anzuzeigen, eine Seite anzuzeigen oder Benutzer bei der Formularübermittlung zu einer URL weiterzuleiten.

Nach Abschluss der Konfiguration können Sie Ihr Formular speichern.

Schritt 4: Fügen Sie Ihr AMP-Formular zu einer Seite hinzu

Jetzt, da Ihr Formular fertig ist, können Sie es in Ihre WordPress-Website einfügen.

Im WPForms-Formular-Builder sehen Sie oben eine Schaltfläche 'Einbetten'. Klicken Sie einfach darauf, um Ihr Formular zu einer neuen oder einer vorhandenen Seite hinzuzufügen.

Als Nächstes öffnet sich ein Popup-Fenster, in dem Sie aufgefordert werden, eine neue Seite zu erstellen oder eine vorhandene Seite auszuwählen.

Für dieses Tutorial wählen wir die Option 'Neue Seite erstellen'.

Als Nächstes müssen Sie einen Namen für Ihre neue Formularseite eingeben.

Sobald das erledigt ist, klicken Sie einfach auf die Schaltfläche „Los geht's“.

Von hier aus sehen Sie eine Vorschau Ihres AMP-Formulars im Inhaltseditor.

Alternativ können Sie auch den WPForms-Block verwenden, um das Formular im Inhaltseditor hinzuzufügen.

Wählen Sie Ihr AMP-Formular aus dem Dropdown-Menü aus.

Als Nächstes können Sie Ihre Seite veröffentlichen oder aktualisieren.

Das ist alles! Sie müssen nichts weiter konfigurieren. Das WPForms-Plugin fügt Ihrem Formular jetzt vollständige AMP-Unterstützung hinzu.

Wenn Sie sehen möchten, wie es aussieht, können Sie die Seite auf Ihrem Mobiltelefon öffnen. Wenn Sie den Lesemodus verwenden, können Sie die Seite in Ihrem Desktop-Browser öffnen, um sie zu testen, indem Sie /amp/ oder /?amp am Ende Ihrer Seiten-URL hinzufügen, wie folgt:

https://www.example.com/contact/?amp

Google reCAPTCHA zu Ihrem AMP-Formular hinzufügen

Standardmäßig enthält WPForms Anti-Spam-Einstellungen, um Spam abzufangen und zu blockieren. Zusätzlich können Sie Google reCAPTCHA verwenden, um Spam-Einreichungen zu reduzieren.

Um Google reCAPTCHA mit Ihren AMP-Formularen zu verwenden, müssen Sie Ihre Website für Google reCAPTCHA v3 registrieren und die Google API-Schlüssel erhalten.

Zuerst müssen Sie die Google reCAPTCHA-Website aufrufen und oben rechts auf der Seite auf die Schaltfläche „v3 Admin Console“ klicken.

Danach müssen Sie sich mit Ihrem Google-Konto anmelden. Sobald Sie fertig sind, sehen Sie die Seite 'Neuen Standort registrieren'.

Als Nächstes müssen Sie den Namen Ihrer Website in das Feld „Label“ eingeben. Google AMP-Seiten können das Standard-„Ich bin kein Roboter“-Kontrollkästchen (v2) nicht verarbeiten. Daher müssen Sie reCAPTCHA v3 verwenden, das unsichtbar im Hintergrund funktioniert.

Geben Sie danach Ihren Domainnamen (ohne https://www.) in das Feld Domains ein.

Klicken Sie als Nächstes auf die Schaltfläche 'Senden'.

Als Nächstes sehen Sie eine Erfolgsmeldung zusammen mit dem Site-Schlüssel und dem Geheimschlüssel, um reCAPTCHA zu Ihrer Website hinzuzufügen.

Kopieren Sie einfach diese Schlüssel.

Nun haben Sie die Google API-Schlüssel, um reCAPTCHA zu Ihren Formularen hinzuzufügen. Es gibt jedoch noch eine weitere Einstellung, die erforderlich ist, um die AMP-Kompatibilität mit reCAPTCHA sicherzustellen.

Zuerst müssen Sie auf den Link 'Zu Einstellungen gehen' klicken.

Als Nächstes sehen Sie erneut die reCAPTCHA-Einstellungen mit dem Kontrollkästchen „Diese Schlüssel für AMP-Seiten zulassen“. Aktivieren Sie einfach das Feld und klicken Sie auf die Schaltfläche „Speichern“ unten.

Jetzt, da Sie Google API-Schlüssel für reCAPTCHA in AMP-Formularen haben, müssen Sie diese in WPForms eingeben.

Sie können die Seite WPForms » Einstellungen » CAPTCHA in Ihrem WordPress-Dashboard öffnen.

Als Nächstes können Sie nach unten scrollen und die Option 'reCAPTCHA v3' auswählen.

Fügen Sie danach einfach den Site-Schlüssel und den Secret-Schlüssel ein. Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche 'Einstellungen speichern'.

Jetzt, da Google reCAPTCHA zu WPForms hinzugefügt wurde, können Sie es in Ihren Formularen nach Bedarf aktivieren.

Gehen Sie zu WPForms » Alle Formulare und wählen Sie das Formular aus, für das Sie reCAPTCHA aktivieren möchten. Klicken Sie einfach unter dem Formularnamen auf die Schaltfläche „Bearbeiten“.

Sobald der Formular-Einrichtungsbildschirm angezeigt wird, klicken Sie auf die Registerkarte „Einstellungen“ und wählen Sie die Registerkarte „Spam-Schutz und Sicherheit“ aus.

Aktivieren Sie einfach die Option Google v3 reCAPTCHA.

Sobald dies erledigt ist, speichern Sie Ihr Formular, indem Sie oben rechts auf die Schaltfläche „Speichern“ klicken.

Danach können Sie Ihre Kontaktseite erneut aufrufen und das AMP-Formular mit reCAPTCHA in Aktion sehen.

Bonus-Tipp: Machen Sie Ihre WordPress-Website mobilfreundlich

Das Erstellen von AMP-Formularen ist ein guter Anfang, aber wenn Sie Ihre gesamte Website mobilfreundlich gestalten, wird Ihre Benutzererfahrung noch weiter verbessert. Hier sind ein paar schnelle Tipps:

• Verwenden Sie ein mobilfreundliches Navigationsmenü: Erleichtern Sie Besuchern die Navigation auf Ihrer Website und das Finden dessen, was sie benötigen, auch auf kleinen Bildschirmen.
• Passen Sie die Platzierung und Größe Ihrer CTA-Schaltfläche an: Stellen Sie sicher, dass Ihre Call-to-Action-Schaltflächen leicht zu tippen und sichtbar sind, ohne zu viel scrollen zu müssen.
• Priorisieren Sie die Geschwindigkeit Ihrer Website: Komprimieren Sie Bilder und verwenden Sie Caching-Plugins, um die Ladezeiten zu verkürzen.

Eine mobil-optimierte Website hält Besucher bei der Stange und hilft Ihnen, mehr Conversions aus Ihren Formularen zu erzielen!

Details finden Sie in unserem Leitfaden, wie Sie eine mobilfreundliche WordPress-Website erstellen.

FAQ: AMP-Formulare in WordPress erstellen

Bevor wir zum Ende kommen, hier sind schnelle Antworten auf einige häufig gestellte Fragen zu AMP und dessen Verwendung mit WordPress-Formularen.

Was ist AMP in WordPress?

AMP (Accelerated Mobile Pages) ist ein Framework, das dazu beiträgt, dass Ihre Seiten auf Mobilgeräten schneller geladen werden, indem eine vereinfachte Version von HTML und JavaScript verwendet wird. In WordPress bedeutet AMP normalerweise die Erstellung einer leichten Version Ihrer Seiten, die für Geschwindigkeit auf Smartphones und Tablets optimiert ist.

Ist AMP noch relevant?

Für die meisten Websites ist AMP nicht mehr notwendig. Google priorisiert jetzt Core Web Vitals, die Sie mit einem schnellen, responsiven Theme und einem guten Caching-Plugin verbessern können. Nachrichtenverlage und große Medienseiten können jedoch immer noch von AMP profitieren.

Wie erstelle ich AMP-Seiten in WordPress?

Der einfachste Weg ist die Verwendung eines AMP-Plugins. Es kann automatisch AMP-Versionen Ihrer Seiten und Beiträge generieren. Nach der Installation können Sie auswählen, welche Inhalte eine AMP-Version haben sollen und grundlegende Einstellungen über Ihr WordPress-Dashboard anpassen.

Was sind die Nachteile von AMP?

Sie haben weniger Kontrolle über das Design, einige Plugins und Skripte funktionieren nicht, und erweiterte Funktionen (wie bestimmte Animationen, Tracking-Tools oder benutzerdefiniertes JavaScript) können eingeschränkt sein. Dies kann dazu führen, dass sich Ihre Website im Vergleich zu einer normalen WordPress-Seite eingeschränkter anfühlt.

Weitere Anleitungen zur Verwendung von WordPress-Formularen

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie AMP-Formulare in WordPress einfach erstellen können. Als Nächstes möchten Sie vielleicht auch unsere Anleitungen zu folgenden Themen sehen:

• So passen Sie Ihre WordPress-Formulare an und gestalten sie
• So verwenden Sie Kontaktformulare, um Ihre E-Mail-Liste in WordPress zu erweitern
• So erstellen Sie DSGVO-konforme Formulare in WordPress
• Ultimativer Leitfaden zur Verwendung von WordPress-Formularen
• Beste Online-Formularersteller (Expertenauswahl)

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.