Vill du skapa ett AMP-kompatibelt kontaktformulär? AMP eller Accelerated Mobile Pages är en Google-teknik som laddar dina webbsidor snabbt på mobila enheter.
I den här artikeln visar vi dig hur du skapar ett kontaktformulär som laddas på dina AMP-sidor utan problem. Vi kommer också att förklara hur du lägger till reCAPTCHA i ditt AMP-kontaktformulär för att skydda det från spammare.
Skapa ett AMP-kompatibelt kontaktformulär i WordPress
AMP (Accelerated Mobile Pages) ger den bästa upplevelsen för personer med en långsam Internetanslutning. Det laddar sidor snabbare på mobila enheter och hjälper dig därför att förbättra trafiken till din webbplats.
AMP innebär dock ett antal utmaningar för webbplatsägare.
En av dem är att det tillåter begränsad användning av resurser för att ladda sidor snabbare. Därför kommer vissa funktioner inte att fungera på dina AMP-sidor som de normalt skulle göra.
Så vad kommer att hända med kontaktformuläret på din webbplats? Kommer det att fungera korrekt?
Om du använder plugin-programmet WPForms kommer det automatiskt att upptäcka om formuläret laddas på en AMP-sida eller inte. Och sedan visar den länken till den icke-AMP-versionen av sidan för att ladda formuläret korrekt.
Du kan dock också lägga till ett formulär på din AMP-sida istället för att visa meddelandet ovan.
För att göra det måste du använda plugin-programmet WPForms Lite och sedan skapa ett formulär som är helt AMP-kompatibelt.
Så, utan vidare, låt oss ta en titt på steg-för-steg-processen för att skapa ett AMP-kompatibelt kontaktformulär för din WordPress-webbplats.
Steg 1 – Installera AMP-plugin
Det första du behöver göra är att installera och aktivera den officiella Google AMP-plugin för WordPress. Detta gratis plugin är viktigt för att lägga till AMP-stöd till din webbplats.
Du kan kolla in steg-för-steg-guiden om hur du installerar ett WordPress-plugin för detaljerade instruktioner.
När det har aktiverats lägger detta plugin automatiskt till AMP-stöd till din webbplats. Du kan dock fortfarande göra ändringar i inställningarna genom att besöka inställningar » AMP sida.
För mer information kan du följa guiden om hur du korrekt konfigurerar Google AMP på din WordPress-webbplats.
Steg 2 – Skapa ett WordPress-formulär
Det är dags att skapa ett kontaktformulär med hjälp av WPForms Lite-plugin.
För att komma igång måste du installera och aktivera WPForms Lite-plugin. Efter aktivering måste du gå till WPForms » Lägg till ny för att skapa ett nytt formulär.
Om honom Miljö sida hittar du några standardformulärmallar. Dessa mallar låter dig påskynda processen för att skapa formulär. Du kan också använda den tomma formulärmallen för att skapa ett formulär från början.
Eftersom vi vill skapa ett kontaktformulär, gå vidare och klicka på Enkelt kontaktformulär mall.
Detta tar dig till sidan Form Builder, där du enkelt kan lägga till eller ta bort ett fält. Om du till exempel vill lägga till ett ämnesfält, dra och släpp helt enkelt En rad text från den vänstra panelen till ditt formulär.
Och för att ändra fältnamnet måste du klicka på fältet i den högra panelen och sedan göra ändringar i etiketten i den vänstra panelen.
Det bästa är att du kommer att kunna se förändringarna live. Bra, inte sant?
På samma sätt kan du redigera de andra fälten i formuläret som du vill. Du kan också följa vår steg-för-steg-handledning om hur du skapar ett enkelt kontaktformulär i WordPress.
När du är klar med anpassningsdelen kan du gå till formuläret inställningar formulärbyggarens vänstra sidofältssida. Här kan du ändra aviserings- och bekräftelseinställningar.
Slutligen måste du spara ändringarna genom att klicka på Spara som finns i det övre högra hörnet av skärmen.
Det är allt! Du behöver inte konfigurera något annat. WPForms Lite-plugin kommer automatiskt att lägga till fullt AMP-stöd till ditt formulär nu.
Dessutom kan du lägga till reCAPTCHA-stöd till ditt AMP-kontaktformulär för att skydda det från spammare.
Vi visar dig hur du gör i nästa steg.
Steg 3: Registrera din webbplats för att få reCAPTCHA-nycklar
För att stoppa kontaktformulärspam stöder WPForms 3 olika typer av CAPTCHA för dina formulär:
I den här handledningen kommer vi att fokusera på reCAPTCHA, en skräppostfiltreringstjänst från Google. Det hjälper dig att skydda din webbplats från spammare och automatiserade bots.
För att använda den på din webbplats måste du registrera din webbplats på Googles reCAPTCHA-webbplats för att få webbplatsnyckeln och hemliga nyckeln till din webbplats.
Och sedan kan du använda dem för att lägga till reCAPTCHA-stöd till ditt AMP-kompatibla kontaktformulär.
Så gå över till Google reCaptcha-webbplatsen och klicka sedan på Administrationskonsol som finns i det övre högra hörnet av skärmen.
Google kommer nu att be dig logga in på ditt konto. Efter det kommer du att omdirigeras till reCAPTCHA-panelen.
Om du tidigare har skapat en reCAPTCHA med det här kontot, måste du klicka på plusikonen (+) för att registrera din nya webbplats.
Men om du använder det här kontot för första gången kommer du automatiskt att se sidan “Registrera en ny webbplats” efter att du loggat in på ditt konto.
När du är på den sidan måste du skriva valfritt namn i rutan Märka fält för framtida referens.
Därefter måste du välja vilken typ av reCAPTCHA du vill använda.
Det är viktigt att notera att reCAPTCHA V2 inte är kompatibel med AMP. Därför måste du välja “reCAPTCHA V3” för att lägga till reCAPTCHA-stöd till ditt AMP-kompatibla kontaktformulär.
I det Domän måste du ange domännamnet (utan http:// eller www) på din webbplats där du vill lägga till reCAPTCHA-stöd. Du kan också lägga till flera domäner eller underdomäner genom att klicka på plusikonen (+).
Så långt som Ägare motsvarande fält kommer din e-postadress att finnas där som standard. Du kan dock lägga till en annan e-postadress om du vill.
Slutligen, markera kryssrutan “Acceptera reCAPTCHA användarvillkor” och scrolla sedan ner till botten av sidan för att klicka på Skicka knapp.
Nu kommer du att se ett framgångsmeddelande tillsammans med webbplatsnyckeln och den hemliga nyckeln för din webbplats. Du bör kopiera dessa nycklar eftersom du kommer att behöva använda dem på din WordPress-webbplats.
Men innan dess är det en sista sak du behöver göra.
Först måste du klicka på Gå till Inställningar Länk. Scrolla sedan ner till botten av sidan och markera sedan kryssrutan “Tillåt den här nyckeln att fungera med AMP-sidor”.
Detta krävs för att reCAPTCHA v3 ska fungera på AMP-sidor. När detta är gjort måste du klicka på Spara knappen för att spara ändringarna.
Steg 4 – Lägg till reCAPTCHA i ditt kontaktformulär
För att komma igång måste du lägga till webbplatsnyckeln och den hemliga nyckeln på din webbplats.
Så gå över till din WordPress-webbplats och gå till WPForms » inställningar vänster sidofältssida på din WordPress-adminpanel.
Därefter måste du klicka på reCAPTCHA fliken för att ändra inställningarna.
Här måste du välja “reCAPTCHA v3” som typ och sedan klistra in webbplatsen och hemliga nycklar i respektive fält.
När du är klar måste du scrolla ner och klicka på Spara inställningar knappen för att spara ändringarna.
Det är dags att lägga till reCAPTCHA i det AMP-kompatibla kontaktformuläret.
För att göra det måste du gå till WPForms » alla former och klicka sedan på din formulärrubrik för att öppna den.
Gå sedan till inställningar » Allmän och markera sedan alternativet “Aktivera Google v3 reCAPTCHA”. Och glöm inte att klicka på Spara knappen för att spara ändringarna.
Slutgiltiga tankar
Grattis! Du har skapat ett AMP-kompatibelt kontaktformulär för din WordPress-webbplats. Du har också lagt till reCAPTCHA i det här formuläret för att skydda det från spammare.
Om du gillade den här artikeln kanske du också vill kolla in vår steg-för-steg-handledning om hur du skapar ett enkelt enkätformulär i WordPress.
Följ oss också på Facebook och Twitter för att få uppdateringar från vår blogg.
