So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

So erstellen Sie AMP-Formulare in WordPress (auf einfache Weise)

So erstellen Sie AMP-Formulare in WordPress (auf einfache Weise)

Möchten Sie AMP-kompatible Formulare auf Ihrer WordPress-Site erstellen?

Accelerated Mobile Pages (AMP) ist ein Google-Projekt, mit dem Websites auf Mobilgeräten schneller geladen werden.

AMP bietet ein großartiges mobiles Surferlebnis, indem Ihre Webseiten schneller geladen werden. Es deaktiviert jedoch viele nützliche Funktionen auf Ihrer Website.

Eines davon sind die Kontaktformulare. Da AMP einen begrenzten Satz von HTML und JavaScript verwendet, können Sie Ihre WordPress-Formulare nicht korrekt auf AMP-Seiten laden.

Zum Glück gibt es jetzt eine einfache Lösung. WPForms, das anfängerfreundlichste WordPress-Formular-Plugin, hilft Ihnen jetzt beim Erstellen von AMP-fähigen WordPress-Formularen. Sein Team hat kürzlich mit Google zusammengearbeitet, um AMP-Formulare für WordPress zu ermöglichen.

In diesem Artikel zeigen wir Ihnen, wie Sie AMP-Formulare in WordPress mit WPForms erstellen (auf einfache Weise).

Erstellen Sie AMP-Formulare in WordPress (auf einfache Weise)

Erstellen Sie AMP-Formulare in WordPress (Schritt für Schritt)

Um AMP mit WordPress verwenden zu können, müssen Sie das offizielle AMP-Plugin für WordPress installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum 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 jedoch die AMP-Einstellungen für Ihre Website ändern, indem Sie auf gehen AMP »Allgemein von Ihrem Dashboard.

AMP für WordPress-Einstellungen

Auf der Seite mit den AMP-Einstellungen können Sie AMP auf Ihrer Website aktivieren oder deaktivieren, einen Website-Modus für AMP auswählen und die unterstützten Vorlagen auswählen.

Nachdem Sie AMP eingerichtet haben, müssen Sie im nächsten Schritt ein AMP-kompatibles Kontaktformular auf Ihrer WordPress-Site erstellen.

Schritt 1. Erstellen Sie ein WordPress-Formular mit WPForms

Installieren und aktivieren Sie zunächst das WPForms Lite-Plugin auf Ihrer Site. Es ist die Lite-Version des WPForms Pro-Plugins.

Sowohl in der Lite- als auch in der Professional-Version von WPForms können Sie ein AMP-fähiges Basis-Kontaktformular erstellen. In unserem Artikel verwenden wir die kostenlose Version für Screenshots.

Sobald das Plugin installiert und aktiviert ist, sollten Sie zu gehen WPForms »Neu hinzufügen Seite, um ein neues WordPress-Formular zu erstellen.

Auf dem Bildschirm mit den Formulareinstellungen können Sie eine Formularvorlage auswählen, um schnell loszulegen. Sie können das leere Formular auswählen, wenn Sie von vorne beginnen möchten.

WPForms-Formularvorlagen

Als Nächstes wird die Formularerstellungsseite geöffnet.

Ziehen Sie den WPForms Form Builder per Drag & Drop

Von hier aus können Sie Formularfelder hinzufügen oder entfernen. Um Ihrem Formular ein neues Feld hinzuzufügen, klicken Sie einfach im linken Bereich auf ein Formularfeld. Es wird im Formularerstellungsfenster rechts angezeigt.

Danach können Sie die Feldoptionen konfigurieren. Klicken Sie einfach auf ein Feld und die Feldoptionen werden angezeigt.

Festlegen von Feldoptionen im WPForms-Plugin

Ebenso können Sie alle anderen Felder anpassen.

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

Allgemeine WPForms-Einstellungen

Mit den allgemeinen Einstellungen können Sie den Namen Ihres Formulars ändern, den Schaltflächentext senden, den Schaltflächenverarbeitungstext senden, Honeypot-Anti-Spam aktivieren und vieles mehr.

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.

WPForms-Benachrichtigungseinstellungen

Sie können dann auf die Registerkarte Bestätigung klicken, um eine Bestätigungsmeldung einzurichten, die angezeigt wird, wenn ein Benutzer das Formular sendet.

Einstellungen für WPForms-Bestätigungsnachrichten

Sobald die Einrichtung abgeschlossen ist, können Sie Ihr Formular speichern.

Schritt 2. Fügen Sie Ihr AMP-Formular einer Seite hinzu

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

Zunächst müssen Sie eine neue Seite erstellen oder eine vorhandene öffnen, auf der Sie das Formular hinzufügen möchten.

Klicken Sie im Bearbeitungsbildschirm Ihrer Seite auf das Symbol Neuen Block hinzufügen und wählen Sie den WPForms-Block aus.

Fügen Sie dem WordPress-Seiteneditor den WPForms-Block hinzu

Danach sehen Sie das WPForms-Widget, das dem Bearbeitungsbildschirm Ihrer Seite hinzugefügt wurde. Sie müssen nur das zuvor erstellte Formular auswählen, und das Widget lädt es sofort in den Seiteneditor.

Kontaktformular zur WordPress-Seite mit WPForms hinzufügen

Sie können Ihre Seite dann veröffentlichen oder aktualisieren.

Das ist alles! Sie müssen nichts anderes konfigurieren. Das WPForms Lite-Plugin erweitert Ihr Formular jetzt um die vollständige AMP-Unterstützung.

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 / hinzufügen? Amp bis zum Ende Ihrer Seiten-URL. Zum Beispiel https://www.example.com/contact/?amp.

Fügen Sie Google reCAPTCHA zu Ihrem AMP-Formular hinzu

Standardmäßig enthält WPForms einen Anti-Spam-Honeypot zum Abfangen und Blockieren von Spam. Darüber hinaus können Sie Google reCAPTCHA verwenden, um Spam-Übermittlungen 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.

Gehen Sie zur Google reCAPTCHA-Website und klicken Sie oben rechts auf der Seite auf die Schaltfläche “Administrationskonsole”.

Besuchen Sie die Google-Website reCAPTCHA

Danach müssen Sie sich mit Ihrem Google-Konto anmelden. Sobald dies erledigt ist, sehen Sie die Seite “Neue Site registrieren”.

Registrieren Sie eine neue Website für Google reCAPTCHA

Zunächst müssen Sie den Namen Ihrer Website in das Feld Beschriftung eingeben. Google AMP unterstützt nur reCAPTCHA v3. Sie müssen es daher aus den Optionen für den reCAPTCHA-Typ auswählen.

Geben Sie danach Ihren Domainnamen in den Bereich Domains ein.

Fügen Sie den Domainnamen und den Eigentümer für Google reCAPTCHA hinzu

Im Abschnitt Eigentümer wird standardmäßig die E-Mail-Adresse angezeigt. Sie können auch eine weitere E-Mail hinzufügen, wenn Sie möchten.

Sie müssen dann den reCAPTCHA-Nutzungsbedingungen zustimmen, um fortzufahren. Aktivieren Sie außerdem das Kontrollkästchen “Benachrichtigungen an Eigentümer senden”, mit dem Google Sie über Probleme wie falsche Einstellungen und verdächtigen Datenverkehr auf Ihrer Website informieren kann.

Akzeptieren Sie die Nutzungsbedingungen von Google reCAPTCHA

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Senden.

Sie sehen dann eine Erfolgsmeldung zusammen mit dem Site-Schlüssel und dem geheimen Schlüssel, um reCAPTCHA auf Ihrer Site hinzuzufügen.

ReCAPTCHA-Schlüssel

Sie haben jetzt die Google API-Schlüssel, um Ihren Formularen reCAPTCHA hinzuzufügen. Es ist jedoch eine weitere Anpassung erforderlich, um die AMP-Kompatibilität mit reCATCHA sicherzustellen. Klicken Sie dort auf den Link “Gehe zu Einstellungen”.

Sie sehen dann die reCAPTCHA-Einstellungen erneut mit dem Kontrollkästchen “Dieser Schlüssel darf mit AMP-Seiten arbeiten”. Aktivieren Sie einfach das Kontrollkästchen und klicken Sie unten auf die Schaltfläche Speichern.

Lassen Sie reCAPTCHA auf AMP-Seiten arbeiten

Nachdem Sie über Google API-Schlüssel verfügen, um reCAPTCHA in AMP-Formularen hinzuzufügen, sollten Sie es öffnen WPForms »Konfiguration» reCAPTCHA Seite in Ihrem WordPress-Dashboard.

WPForms reCAPTCHA WordPress-Konfiguration

Auf diesem Bildschirm müssen Sie die Option reCAPTCHA v3 auswählen und den Site-Schlüssel und den geheimen Schlüssel einfügen. Klicken Sie anschließend auf die Schaltfläche Einstellungen speichern.

Nachdem Google reCAPTCHA zu WPForms hinzugefügt wurde, können Sie es bei Bedarf in Ihren Formularen aktivieren. Gehen WPForms »Alle Formulare und wählen Sie das Formular aus, in dem Sie reCAPTCHA aktivieren möchten.

Bearbeiten Sie ein mit WPForms erstelltes Formular

Sobald der Bildschirm mit den Formulareinstellungen angezeigt wird, klicken Sie auf die Registerkarte Einstellungen und wählen Sie den Abschnitt Allgemeine Einstellungen. Unten sehen Sie das Kontrollkästchen “Google v3 reCAPTCHA aktivieren”.

Aktivieren Sie Google v3 reCAPTCHA in WPForms

Aktivieren Sie das Kontrollkästchen und speichern Sie Ihr Formular, indem Sie oben rechts auf die Schaltfläche Speichern klicken.

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

Wir hoffen, dieser Artikel hat Ihnen dabei geholfen, das einfache Erstellen von AMP-Formularen in WordPress zu erlernen. Sie können auch unseren Leitfaden zum Erstellen von GDPR-kompatiblen Formularen in WordPress lesen.

Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook