Så här skapar du AMP-formulär i WordPress (det enkla sättet)

Vill du skapa AMP-vänliga formulär på din WordPress site?

Accelerated Mobile Pages (AMP) hjälper till att snabba upp websites. AMP tar dock bort WordPress-formulär för att förbättra prestandan på din webbplats.

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

Varför skapa ett AMP-formulär i WordPress?

Accelerated Mobile Pages eller AMP är ett Google-projekt som gör att webbplatser laddas snabbare på mobila enheter.

AMP ger en fantastisk mobil browsing-upplevelse genom att göra att dina pages laddas snabbare, men inaktiverar många utvalda funktioner på din WordPress website.

En av dem är Contact Form. Eftersom AMP använder en begränsad uppsättning HTML och JavaScript, kan den inte hämta din WordPress formulär korrekt på AMP pages.

Alternativt kan du använda ett av de många responsiva WordPress themes som erbjuder utmärkt prestanda på dator och mobil. På så sätt behöver du inte kompromissa med din website styling för att leverera en överlägsen upplevelse på mobilen.

Men om du använder AMP på din WordPress site, då kan du använda ett plugin för att visa formulär. Låt oss se hur du lägger till ett AMP-formulär på din site.

Lägga till AMP-formulär i WordPress (Step-by-Step)

Det bästa sättet att skapa ett AMP-formulär är att använda WPForms. Det är det mest nybörjarvänliga WordPress form plugin som hjälper dig att skapa AMP-färdiga WordPress formulär.

Deras team arbetade senast med Google för att göra AMP-formulär enkla för WordPress.

Step 1: Installera och aktivera WPForms plugin

För denna tutorial kommer vi att använda WPForms Pro-versionen eftersom den erbjuder fler funktioner, formulärmallar, addons och alternativ för customize. Det finns också en WPForms Lite-version som du kan använda för att komma igång gratis.

Både lite- och pro-versionen av WPForms tillåter dig att skapa ett grundläggande AMP-klart kontaktformulär.

Först måste du installera och aktivera WPForms plugin. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

Step-by-Step 2: Add AMP till din WordPress site

Innan vi skapar ett formulär är det viktigt att du har AMP installerat på din WordPress site.

För att kunna använda AMP med WordPress måste du installera och aktivera det officiella AMP-pluginet för WordPress. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

När det är aktiverat kommer pluginet automatiskt att add to Google AMP support för din WordPress webbplats.

Du kan dock ändra AMP-inställningarna för din website genom att gå till AMP ” Settings från din dashboard.

Från AMP-inställningssidan kan du aktivera eller inaktivera AMP på din webbplats, välja ett webbplatsläge för AMP och välja templates som stöds.

För mer detaljer, vänligen se vår guide om hur du korrekt ställer in Google AMP på din WordPress site.

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

Step-by-Step 3: Skapa ett nytt AMP-formulär i WPForms

Det är bara att heada till WPForms ” Add New page för att skapa ett nytt WordPress-formulär. WPForms är kompatibelt med AMP som standard, så du behöver inte aktivera några speciella inställningar.

På formulärinställningsvyn kan du välja en template och högst upp enter ett namn. You can select the Blank Form if you want to start from scratch or use a prebuilt template to quickly edit it according to your needs.

För denna tutorial väljer vi templaten”Simple Contact Form”.

Därefter ser du sidan form builder, där det finns olika alternativ för att customize din template.

Härifrån kan du lägga till eller ta bort formulärfält. För att add new ett fält i ditt formulär kan du klicka på ett fält i den vänstra panelen och dra det till formulärets template.

Efter det kan du konfigurera alternativen för fältet. Klicka bara på ett fält, så visas Field Options till vänster.

You can for example edit the label and format of a field, make it a required field, set up conditional logic, and more. På samma sätt kan du customize alla andra fält.

Därefter kan du klicka på tabben ”Settings” för att konfigurera dina formulärinställningar.

The ”General” settings allow you to change your form name, submit button text, submit button processing text, and more.

Därefter kan du clicka på tabben ”Notifications” för att ställa in email-meddelanden som meddelar you när en användare completed formuläret.

Därefter kan du klicka på tabben ”Confirmation” för att ställa in ett bekräftelsemeddelande som ska visas när en användare skickar in formuläret.

WPForms låter dig visa ett message, visa en page eller redirecta användare till en URL vid formulärinlämning.

När du har konfigurerat formuläret completed kan du save your form.

Step-by-Step 4: Add your AMP-formulär till en page

Nu när ditt WordPress-formulär är klart kan du add to en page.

I WPForms form builder kommer du att se en ”Embed” knapp högst upp. Klicka bara på den för att lägga till ditt formulär på en ny page eller en befintlig.

Därefter öppnas ett popup-fönster där du ombeds skapa en new page eller välja en befintlig page.

Vi kommer att välja alternativet ”Create New Page” för denna tutorial.

Därefter måste du enter ett namn för din new form page.

När det är gjort klickar du bara på knappen ”Let’s Go”.

Härifrån kommer du att se en preview av ditt AMP-formulär i content editor.

Alternativt kan du också använda WPForms-blocket för att add formuläret i content editor. Välj helt enkelt ditt AMP-formulär från dropdown-menyn.

Därefter kan du publicera eller updating din page.

That’s all! Du behöver inte konfigurera något annat. WPForms plugin kommer att add to fullt AMP-stöd till ditt formulär nu.

Om du vill se hur det ser ut kan du öppna page på din mobiltelefon. Eller så kan du öppna sidan i din stationära webbläsare genom att lägga till /amp/ eller /?amp i slutet av din page URL, gillar detta:

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

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

Som standard innehåller WPForms anti-spam-inställningar för att fånga och blockera skräppost. Dessutom kan du använda Google reCAPTCHA för att minska skräppost.

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

Först måste du gå till Googles reCAPTCHA-webbplats och klicka på knappen ”v3 Admin Console” högst upp till höger på sidan.

Efter det måste du logga in med ditt Google-konto. När du har gjort det kommer du att se sidan ”Register a new site”.

Därefter måste du enter namnet på din website i fältet Label. Google AMP stöder endast reCAPTCHA v3, så du måste välja alternativet ”Poängbaserad (v3)” reCAPTCHA-typ.

Därefter enter your domain name (utan https://www.) i fältet Domains.

Klicka sedan på knappen ”Submit”.

Därefter kommer du att se ett success message tillsammans med site key och secret key för att add reCAPTCHA till din site.

Kopiera helt enkelt dessa nycklar.

Nu har du Google API keys för att add reCAPTCHA till dina formulär. Det finns dock ytterligare en obligatorisk inställning för att säkerställa AMP-kompatibilitet med reCATCHA.

Först måste du klicka på länken ”Go to Settings”.

Därefter kommer du att se reCAPTCHA-inställningarna igen med kryssrutan ”Allow this key to work with AMP pages”. Kontrollera bara boxen och klicka på knappen ”Save” under.

Nu när du har Google API keys för att lägga till Google reCAPTCHA på AMP-formulär måste du enter dem i WPForms.

Du kan öppna WPForms ” Settings ” CAPTCHA page i din WordPress dashboard.

Därefter kan du rulla ner och välja alternativet ”reCAPTCHA v3”.

Efter det klistrar du bara in site key och secret key. När du är klar klickar du bara på knappen ”Save Settings”.

Nu när Google reCAPTCHA har addats till WPForms kan du aktivera det i dina formulär där det behövs.

Gå till WPForms ” All Forms och välj det formulär där du vill aktivera reCAPTCHA. Klicka på knappen ”Edit” under formulärets namn.

När skärmen för formulärinställning visas klickar du på fliken ”Settings” och väljer tabben ”Spam Protection and Security”.

Härifrån aktiverar du helt enkelt alternativet Google v3 reCAPTCHA.

När det är gjort, save your form genom att click på ”Save” knappen högst upp i högra hörnet.

Efter det kan du besöka din contact page och se AMP-formuläret med reCAPTCHA i action.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar AMP-formulär i WordPress. Du kanske också vill läsa vår guide om hur du skapar GDPR-kompatibla formulär i WordPress och The best drag & drop WordPress form builder.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.