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.
Note : Fälten Modern Style Dropdown och Number Slider är inte kompatibla med Google AMP. Istället måste du använda fälten Number och Classic Style Dropdown.
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.
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!
Administratör
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!
Administratör
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!
Administratör
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
Administratör
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Administratör
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
Administratör
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!
Administratör
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.
Administratör
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.
Administratör
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
Administratör