Hur man skapar AMP-formulär i WordPress (det enkla sättet)

Vill du skapa AMP-kompatibla formulär på din WordPress-webbplats?

Accelerated Mobile Pages, eller AMP, är ett projekt av Google för att hjälpa webbsidor att laddas snabbare på mobila enheter.

Medan AMP ger en fantastisk mobil surfupplevelse genom att dina webbsidor laddas snabbare, inaktiverar den många användbara funktioner på din webbplats.

En av dem är kontaktformuläret. Eftersom AMP använder en begränsad uppsättning HTML och JavaScript, kanske du inte kan ladda dina WordPress-formulär korrekt på AMP-sidor.

Men som tur är finns det nu en enkel lösning. WPForms, det mest nybörjarvänliga WordPress-formulärplugin som finns tillgängligt idag hjälper dig att skapa AMP-förberedda WordPress-formulär. Hans team arbetade nyligen med Google för att underlätta AMP-formulär för WordPress.

I den här artikeln kommer vi att visa dig hur du skapar AMP-formulär i WordPress med WPForms (det enkla sättet).

Skapa AMP-formulär i WordPress (steg för steg)

För att använda AMP med WordPress måste du installera och aktivera den officiella AMP för WordPress-plugin. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

När det har aktiverats kommer plugin-programmet automatiskt att lägga till Google AMP-stöd till din WordPress-webbplats.

Du kan dock ändra AMP-inställningarna för din webbplats genom att gå till AMP » Allmänt från din instrumentpanel.

På sidan för AMP-inställningar kan du aktivera eller inaktivera AMP på din webbplats, välja ett platsläge för AMP och välja mallar som stöds.

När du har konfigurerat AMP är nästa steg att skapa ett AMP-kompatibelt kontaktformulär på din WordPress-webbplats.

Han klarade 1. Skapa ett WordPress-formulär med WPForms

För att komma igång, installera och aktivera WPForms Lite-plugin på din webbplats. Detta är en avskalad version av WPForms Pro-plugin.

Både de avskalade och professionella versionerna av WPForms låter dig skapa ett AMP-färdigt grundläggande kontaktformulär. I vår artikel kommer vi att använda gratisversionen för skärmdumpar.

När plugin-programmet är installerat och aktiverat bör du besöka WPForms »Lägg till ny sida för att skapa ett nytt WordPress-formulär.

På skärmen för formulärinställningar kan du välja en formulärmall för att snabbt komma igång. Du kan välja en tom mall om du vill börja från början.

Därefter öppnas formulärbyggarsidan.

Härifrån kan du lägga till eller ta bort formulärfält. För att lägga till ett nytt fält i ditt formulär, klicka helt enkelt på formulärfältet från den vänstra rutan och det kommer att visas i formulärbyggarpanelen till höger.

Du kan sedan konfigurera fältalternativen. Klicka bara på ett fält och sedan visas Fältalternativ.

På samma sätt kan du anpassa alla andra fält.

Du kan sedan klicka på fliken Inställningar för att konfigurera dina formulärinställningar.

Allmänna inställningar låter dig ändra namnet på ditt formulär, skicka knapptext, skicka knapphanterartext, aktivera Honeypot-spamskydd och mer.

Du kan sedan klicka på fliken Meddelanden för att skapa ett e-postmeddelande som meddelar dig när en användare fyller i ett formulär.

Du kan sedan klicka på fliken Bekräftelse för att ställa in ett bekräftelsemeddelande som ska visas när användaren skickar formuläret.

När du har konfigurerat det kan du spara ditt formulär.

Han klarade 2. Lägg till din AMP-mall på en sida

Nu när ditt WordPress-formulär är klart kan du lägga till det på en sida.

Du måste först skapa en ny sida eller öppna en befintlig sida där du vill lägga till formuläret.

Klicka på ikonen Lägg till nytt block på din sidredigeringsskärm och välj WPForms-blocket.

Du kan sedan se WPForms-widgeten läggas till på din sidas redigeringsskärm. Du behöver bara välja formuläret du skapade tidigare och widgeten kommer omedelbart att ladda den i sidredigeraren.

Du kan sedan publicera eller uppdatera din sida.

Det är allt! Du behöver inte konfigurera något annat. WPForms Lite-plugin kommer att lägga till fullt AMP-stöd till dina formulär nu.

Om du vill se hur det ser ut kan du öppna sidan på din mobiltelefon.

Eller så kan du öppna sidan i din stationära webbläsare genom att lägga till /amp/ eller /? Amps till slutet av din webbadress. Exempel: https://www.example.com/contact/?amp.

Lägg till Google reCAPTCHA i ditt AMP-formulär

Som standard inkluderar WPForms en anti-spam honeypot för att fånga och blockera spam. Alternativt kan du använda Google reCAPTCHA för att minska spam.

För att använda Google reCAPTCHA med dina AMP-formulär måste du registrera din webbplats för Google reCAPTCHA v3 och skaffa Google API-nycklar.

Besök Google reCAPTCHA-webbplatsen och klicka på knappen “Admin Panel” i det övre högra hörnet på sidan.

Då måste du logga in med ditt Google-konto. När detta är gjort kommer du att se sidan “Registrera en ny webbplats”.

Först måste du ange namnet på din webbplats i fältet Etikett. Google AMP stöder bara reCAPTCHA v3, så du måste välja det från alternativen för reCAPTCHA-typ.

Ange sedan ditt domännamn i avsnittet Domäner.

Avsnittet Ägare visar deras e-postadress som standard. Du kan också lägga till ytterligare en e-post om du vill.

Du måste sedan godkänna reCAPTCHAs användarvillkor för att fortsätta. Markera också kryssrutan “Skicka meddelande om ägare”, vilket gör att Google kan meddela dig om problem som felaktiga inställningar och misstänkt trafik på din webbplats.

När du är klar klickar du på knappen Skicka.

Du kommer då att se ett framgångsmeddelande tillsammans med webbplatsnyckeln och den hemliga nyckeln för att lägga till reCAPTCHA på din webbplats.

Du har nu Google API-nycklarna för att lägga till reCAPTCHA i ditt formulär. Det krävs dock ytterligare en justering för att säkerställa AMP-kompatibilitet med reCATCHA. Klicka på länken “Gå till inställningar” där.

Du kommer då att se reCAPTCHA-inställningen igen med kryssrutan “Tillåt den här nyckeln att fungera med AMP-sidor”. Markera bara rutan och klicka på knappen Spara nedan.

Nu när du har Google API-nycklarna för att lägga till reCAPTCHA i AMP-formulär bör du öppna WPForms » Konfiguration » reCAPTCHA sida i din WordPress-instrumentpanel.

På den här skärmen måste du välja alternativet reCAPTCHA v3 och klistra in webbplatsnyckeln och den hemliga nyckeln. Klicka sedan på knappen Spara inställningar.

Nu när Google reCAPTCHA har lagts till i WPForms kan du aktivera det på dina formulär efter behov. Att gå WPForms »Alla formulär och välj formuläret som du vill aktivera reCAPTCHA för.

När skärmen för formulärinställningar visas klickar du på fliken Inställningar och väljer avsnittet Allmänt. Längst ner kan du se kryssrutan Aktivera Google v3 reCAPTCHA.

Markera rutan och spara sedan ditt formulär genom att klicka på knappen Spara i det övre högra hörnet.

Du kan sedan besöka deras kontaktsida igen och se AMP-formuläret med reCAPTCHA i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar AMP-formulär i WordPress. Du kan också kolla in vår guide om hur du skapar GDPR-kompatibla formulär i WordPress.

Om du gillade den här artikeln, prenumerera på vår YouTube-kanal för WordPress-videohandledning. Du hittar oss även på Twitter och Facebook