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.

Geschichten wie diese inspirierten uns, eine einfache Lösung zu finden. Einen Ansatz, 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:

• AMP-Formulare in WordPress hinzufügen (Schritt für Schritt)
• Google reCAPTCHA zu Ihrem AMP-Formular hinzufügen
• Bonus-Tipp: Machen Sie Ihre WordPress-Website mobilfreundlich

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

Für dieses Tutorial verwenden wir die WPForms Pro-Version, da sie mehr Funktionen, KI-Tools, Formularvorlagen, Add-ons und Anpassungsoptionen bietet. Es gibt auch eine WPForms Lite-Version, die Sie kostenlos nutzen können, um loszulegen.

Sowohl die Lite- als auch die Pro-Version von WPForms ermöglichen es Ihnen, ein grundlegendes AMP-fähiges Kontaktformular zu erstellen.

Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

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 zu verwenden, müssen Sie das offizielle AMP-Plugin für WordPress installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren 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.

Auf der AMP-Einstellungsseite können Sie AMP auf Ihrer Website aktivieren oder deaktivieren, einen Website-Modus für AMP auswählen und unterstützte Vorlagen auswählen.

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. Oder Sie können die Seite in Ihrem Desktop-Browser öffnen, 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'.

Geben Sie als Nächstes den Namen Ihrer Website im Feld „Label“ ein. Google AMP unterstützt nur reCAPTCHA v3, daher müssen Sie die Option „Score-basiert (v3)“ für den reCAPTCHA-Typ wählen.

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.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach AMP-Formulare in WordPress erstellen können. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen von DSGVO-konformen Formularen in WordPress und unsere Expertenauswahl der besten Online-Formularersteller ansehen.

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.