Möchten Sie AMP-freundliche Formulare auf Ihrer WordPress-Website erstellen?
Accelerated Mobile Pages (AMP) beschleunigen Websites. Allerdings werden bei AMP WordPress-Formulare entfernt, um die Leistung Ihrer Website zu verbessern.
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 einsteigerfreundlichste WordPress-Formular-Plugin, 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.
Hinweis: Die Felder Modern Style Dropdown und Number Slider sind nicht mit Google AMP kompatibel. Stattdessen müssen Sie die Dropdown-Felder „Zahl“ und „Klassischer Stil“ verwenden.
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 lernen, wie Sie AMP-Formulare in WordPress einfach erstellen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Erstellung GDPR-konformer Formulare in WordPress und den besten Drag-and-Drop-Seitenersteller für 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
That’s great news. I can finally use the potential of the paid WP Forms I have on the site (that is, besides being able to use it on all the sites I’ve done thanks to unlimited sites). Thank you for the detailed instructions on how to use WP Forms on websites with AMP.
Konrad says
Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?
WPBeginner Support says
If we find one we would recommend we will be sure to share!
Admin
Adrian says
This article is a game-changer for anyone seeking to optimize their WordPress site for mobile performance with Accelerated Mobile Pages (AMP). The clear and concise explanation of how AMP impacts WordPress forms, and the subsequent guidance on creating AMP-friendly forms using WPForms, is incredibly valuable.
WPBeginner Support says
Glad you found it helpful!
Admin
Shafqat Khan says
Great tutorial! AMP forms are crucial for mobile performance, and your guide simplifies the process with WPForms. I appreciate the clear steps, especially for adding Google reCAPTCHA, which is essential for security. Your articles are always a valuable resource!
WPBeginner Support says
Glad you’ve found our content helpful!
Admin
Ralph says
Seems like it is good idea to do this if my site can be faster for mobile. I personally don’t like using my smartphone for reading websites, but from Google Analytcis i see my website went from 55-60% mobile users montly to 73-75% mobile users montly. Sometimes it is lower but it is inevitable trend that all bloggers should respect and adapt.
WPBeginner Support says
Glad you liked our recommendation
Admin
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Admin
faizan says
I learned information from WP Beginner and collected many things that can help me for creating best website
WPBeginner Support says
Glad to hear our guides have been helpful
Admin
Mikolaj says
Great article! It’s super helpful for anyone who wants to keep their WordPress site AMP-friendly while still having forms. WPForms looks like the way to go. Thanks for sharing!
WPBeginner Support says
Glad you found the post helpful!
Admin
Czarek says
This article is a valuable resource for anyone looking to optimize their WordPress site for mobile users while still maintaining the functionality of forms. It’s important to acknowledge that while Accelerated Mobile Pages (AMP) can significantly boost website speed, it often comes at the cost of removing certain features, including forms. The fact that this article addresses this issue by providing a solution is highly beneficial.
The recommendation to use WPForms for creating AMP-friendly forms is particularly noteworthy as it offers an easy and efficient method for ensuring your website remains user-friendly on mobile devices. This approach can help website owners strike a balance between speed and functionality, ensuring a positive user experience.
My question is: Are there any specific considerations or best practices to keep in mind when implementing AMP forms on a WordPress site using WPForms, especially in terms of form design, user experience, and potential impacts on SEO?
WPBeginner Support says
For AMP forms the main thing to keep in mind is ensuring that your users can use the form and there are not strange formatting issues when viewed.
Admin
Ronald says
What about user-submitted content forms (for posts or custom post types)? How about user registration/login forms? I know WP Forms has those features at premium costs, but do they still work with AMP?
WPBeginner Support says
Currently the AMP support is valid only for the basic contact form feature.
Admin
Irene says
This is nice. I’m so adding AMP and reCaptcha to my site as I’m already using wpforms lite. But I hope it doesn’t take up much resources.
Thanks WPbeginners. Following you has been one of the best decisions I made this year. God bless the day I found you.
WPBeginner Support says
Glad our guide could be helpful
Admin