Wie man AMP-Formulare in WordPress erstellt (der einfache Weg)

Haben Sie schon von Accelerated Mobile Pages (AMP) gehört? Accelerated Mobile Pages (AMP) von Google kann dazu beitragen, Ihre Website zu beschleunigen und eine schnelle Benutzererfahrung auf mobilen Geräten zu bieten.

Allerdings werden bei AMP verschiedene Elemente von Ihrer Website entfernt, um die Leistung zu verbessern. Dazu gehören WordPress-Formulare.

Eine einfache Möglichkeit, dies zu umgehen, besteht darin, Formulare zu erstellen, die von AMP unterstützt werden. Unserer Erfahrung nach ist der einfachste Weg, dies zu tun, die Verwendung von WPForms.

In diesem Artikel zeigen wir Ihnen, wie Sie AMP-Formulare in WordPress mit WPForms erstellen können (der einfache Weg).

Warum ein AMP-Formular in WordPress erstellen?

Accelerated Mobile Pages oder AMP ist ein Google-Projekt, das dafür sorgt, dass Websites auf mobilen Geräten schneller geladen werden.

AMP bietet zwar ein großartiges mobiles Browsing-Erlebnis, da Ihre Webseiten schneller geladen werden, aber es deaktiviert 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 auch eines der vielen responsiven WordPress-Themes verwenden, die sowohl auf dem Desktop als auch auf dem Handy eine hervorragende Leistung bieten. Auf diese Weise müssen Sie bei der Gestaltung Ihrer Website keine Kompromisse eingehen, um auf dem Handy ein hervorragendes Erlebnis zu bieten.

Wenn Sie jedoch AMP auf Ihrer WordPress-Website verwenden, können Sie ein Plugin verwenden, um Formulare anzuzeigen. Sehen wir uns an, wie Sie ein AMP-Formular zu Ihrer Website hinzufügen.

Hinzufügen von AMP-Formularen in WordPress (Schritt für Schritt)

Der beste Weg, ein AMP-Formular zu erstellen, ist die Verwendung von WPForms. Es ist das anfängerfreundlichste Plugin für WordPress-Kontaktformulare, mit dem Sie AMP-fähige WordPress-Formulare erstellen können.

Ihr Team hat kürzlich mit Google zusammengearbeitet, um AMP-Formulare für WordPress einfach zu machen.

Schritt 1: Installieren und aktivieren Sie das WPForms Plugin

Für dieses Tutorial werden wir die WPForms Pro-Version verwenden, da sie mehr Funktionen, Formularvorlagen, Addons und Anpassungsoptionen bietet. Es gibt auch eine WPForms Lite-Version, die Sie verwenden können, um kostenlos zu beginnen.

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

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

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

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

Um AMP mit WordPress nutzen zu können, müssen Sie das offizielle AMP-Plugin für WordPress installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, fügt es automatisch Google AMP-Unterstützung für Ihre WordPress-Website hinzu.

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

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

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

Sobald 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 zu WPForms “ Add New page, um ein neues WordPress-Formular zu erstellen. WPForms ist standardmäßig mit AMP kompatibel, sodass Sie keine besonderen Einstellungen vornehmen müssen.

Auf dem Bildschirm zur Einrichtung des Formulars können Sie eine Formularvorlage auswählen und oben einen Namen eingeben. Sie können das leere Formular auswählen, wenn Sie von Grund auf neu beginnen möchten, oder eine vorgefertigte Vorlage verwenden, um sie schnell nach Ihren Bedürfnissen zu bearbeiten.

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

Als Nächstes sehen Sie die Formularerstellungsseite, auf der Sie verschiedene Optionen zur Anpassung Ihrer Vorlage finden.

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 die Feldoptionen werden auf der linken Seite angezeigt.

Sie können zum Beispiel die Beschriftung und das Format eines Feldes bearbeiten, es zu einem Pflichtfeld machen, eine bedingte Logik einrichten und vieles mehr. In ähnlicher Weise können Sie auch alle anderen Felder anpassen.

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

In den allgemeinen Einstellungen können Sie den Namen des Formulars, den Text der Schaltfläche „Senden“, den Text für die Bearbeitung der Schaltfläche „Senden“ und vieles mehr ändern.

Anschließend können Sie auf die Registerkarte „Benachrichtigungen“ klicken, um E-Mail-Benachrichtigungen einzurichten, die Sie benachrichtigen, wenn ein Benutzer das Formular ausfüllt.

Anschließend können Sie auf die Registerkarte „Bestätigung“ klicken, um eine Bestätigungsmeldung einzurichten, die angezeigt wird, wenn ein Benutzer das Formular abschickt.

Mit WPForms können Sie eine Nachricht anzeigen, eine Seite anzeigen oder Benutzer zu einer URL umleiten, wenn das Formular eingereicht wird.

Nachdem die Konfiguration abgeschlossen ist, können Sie Ihr Formular speichern.

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

Jetzt, wo Ihr WordPress-Formular fertig ist, können Sie es zu einer Seite hinzufügen.

Im WPForms Form Builder sehen Sie oben eine Schaltfläche „Einbetten“. Klicken Sie einfach darauf, um Ihr Formular zu einer neuen oder bestehenden Seite hinzuzufügen.

Anschließend öffnet sich ein Popup-Fenster, in dem Sie aufgefordert werden, eine neue Seite zu erstellen oder eine bestehende Seite auszuwählen.

Für diesen Lehrgang wählen wir die Option „Neue Seite erstellen“.

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

Danach klicken Sie einfach auf die Schaltfläche „Los geht’s“.

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

Alternativ können Sie auch den WPForms-Block verwenden, um das Formular im Content-Editor hinzuzufügen. Wählen Sie einfach Ihr AMP-Formular aus dem Dropdown-Menü aus.

Anschließend können Sie Ihre Seite veröffentlichen oder aktualisieren.

Das war’s schon! Sie brauchen nichts weiter zu konfigurieren. Das WPForms-Plugin fügt Ihrem Formular jetzt volle AMP-Unterstützung hinzu.

Wenn Sie sehen wollen, wie es aussieht, können Sie die Seite auf Ihrem Handy öffnen. Oder Sie können die Seite in Ihrem Desktop-Browser öffnen, indem Sie /amp/ oder /?amp am Ende der URL Ihrer Seite hinzufügen, etwa so:

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

Hinzufügen von Google reCAPTCHA zu Ihrem AMP-Formular

Standardmäßig enthält WPForms Anti-Spam-Einstellungen zum Abfangen und Blockieren von Spam. Zusätzlich können Sie Google reCAPTCHA verwenden, um Spam-Eingaben 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.

Zunächst müssen Sie die Google reCAPTCHA-Website aufrufen und auf die Schaltfläche „v3 Admin Console“ in der oberen rechten Ecke der Seite klicken.

Danach müssen Sie sich mit Ihrem Google-Konto anmelden. Danach sehen Sie die Seite „Eine neue Website registrieren“.

Als nächstes müssen Sie den Namen Ihrer Website in das Feld Label eingeben. Google AMP unterstützt nur reCAPTCHA v3, daher müssen Sie die Option „Score based (v3)“ für den reCAPTCHA-Typ wählen.

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

Klicken Sie anschließend auf die Schaltfläche „Absenden“.

Anschließend wird eine Erfolgsmeldung zusammen mit dem Website-Schlüssel und dem geheimen Schlüssel zum Hinzufügen von reCAPTCHA zu Ihrer Website angezeigt.

Kopieren Sie einfach diese Tasten.

Jetzt haben Sie die Google-API-Schlüssel, um reCAPTCHA zu Ihren Formularen hinzuzufügen. Es ist jedoch noch eine weitere Einstellung erforderlich, um die AMP-Kompatibilität mit dem reCATCHA zu gewährleisten.

Zunächst müssen Sie auf den Link „Zu den Einstellungen gehen“ klicken.

Als Nächstes sehen Sie wieder die reCAPTCHA-Einstellungen mit dem Kontrollkästchen „Allow this key to work with AMP pages“. Aktivieren Sie einfach das Kästchen und klicken Sie auf die Schaltfläche „Speichern“ unten.

Nun, da Sie Google API-Schlüssel haben, um reCAPTCHA auf AMP Formen hinzuzufügen, müssen Sie sie 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.

Danach fügen Sie einfach den Standortschlüssel und den geheimen Schlüssel ein. Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Einstellungen speichern“.

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

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

Sobald der Bildschirm zur Einrichtung des Formulars erscheint, klicken Sie auf die Registerkarte „Einstellungen“ und wählen Sie die Registerkarte „Spamschutz und Sicherheit“.

Aktivieren Sie hier einfach die Option Google v3 reCAPTCHA.

Wenn das erledigt ist, speichern Sie Ihr Formular, indem Sie auf die Schaltfläche „Speichern“ in der oberen rechten Ecke klicken.

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie AMP-Formulare in WordPress erstellen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zum Erstellen von DSGVO-konformen Formularen in WordPress und unsere Expertenauswahl der besten Plugins für Befragungen in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.