Volete creare moduli AMP-friendly sul vostro sito WordPress?
Le pagine mobili accelerate (AMP) aiutano a velocizzare i siti web. Tuttavia, AMP elimina i moduli di WordPress per migliorare le prestazioni del sito.
In questo articolo vi mostreremo come creare moduli AMP in WordPress utilizzando WPForms (in modo semplice).
Perché creare un modulo AMP in WordPress?
Accelerated Mobile Pages o AMP è un progetto di Google che rende più veloce il caricamento dei siti web sui dispositivi mobili.
Se da un lato AMP offre un’ottima esperienza di navigazione mobile rendendo più veloce il caricamento delle pagine web, dall’altro disabilita molte utili funzionalità del vostro sito WordPress.
Uno di questi è il modulo di contatto. Poiché AMP utilizza un insieme limitato di HTML e JavaScript, non è in grado di caricare correttamente i moduli di WordPress sulle pagine AMP.
In alternativa, potete utilizzare uno dei tanti temi WordPress responsive che offrono prestazioni eccellenti su desktop e mobile. In questo modo, non dovrete compromettere lo stile del vostro sito web per offrire un’esperienza superiore su mobile.
Tuttavia, se utilizzate AMP sul vostro sito WordPress, potete utilizzare un plugin per mostrare i moduli. Vediamo come aggiungere un modulo AMP al vostro sito.
Aggiunta di moduli AMP in WordPress (passo dopo passo)
Il modo migliore per creare un modulo AMP è utilizzare WPForms. È il plugin per moduli WordPress più facile da usare per i principianti, che aiuta a creare moduli WordPress pronti per AMP.
Il loro team ha recentemente collaborato con Google per semplificare i moduli AMP per WordPress.
Passo 1: Installare e attivare il plugin WPForms
Per questo tutorial utilizzeremo la versione Pro di WPForms perché offre più funzioni, modelli di moduli, addon e opzioni di personalizzazione. Esiste anche una versione Lite di WPForms che si può utilizzare gratuitamente per iniziare.
Sia la versione lite che quella pro di WPForms consentono di creare un modulo di contatto di base pronto per AMP.
Per prima cosa, è necessario installare e attivare il plugin WPForms. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.
Fase 2: Aggiungere AMP al sito WordPress
Prima di creare un modulo, è importante che abbiate impostato AMP sul vostro sito WordPress.
Per utilizzare AMP con WordPress, è necessario installare e attivare il plugin AMP ufficiale per WordPress. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin per WordPress.
Una volta attivato, il plugin aggiungerà automaticamente il supporto di Google AMP al vostro sito WordPress.
Tuttavia, è possibile modificare le impostazioni di AMP per il proprio sito web andando su AMP ” Impostazioni dalla propria dashboard.
Dalla pagina delle impostazioni di AMP, è possibile attivare o disattivare AMP sul proprio sito web, scegliere una modalità del sito web per AMP e scegliere i modelli supportati.
Per maggiori dettagli, consultate la nostra guida su come impostare correttamente Google AMP sul vostro sito WordPress.
Una volta configurato AMP, il passo successivo è creare un modulo di contatto compatibile con AMP sul vostro sito WordPress.
Passo 3: Creare un nuovo modulo AMP in WPForms
Basta andare alla pagina WPForms ” Aggiungi nuovo per creare un nuovo modulo WordPress. WPForms è compatibile con AMP per impostazione predefinita, quindi non è necessario attivare alcuna impostazione speciale.
Nella schermata di impostazione del modulo, è possibile scegliere un modello di modulo e inserire un nome nella parte superiore. È possibile selezionare il modulo vuoto se si desidera partire da zero o utilizzare un modello precostituito per modificarlo rapidamente in base alle proprie esigenze.
Per questa esercitazione, sceglieremo il modello“Modulo di contatto semplice“.
Successivamente, verrà visualizzata la pagina del costruttore di moduli, dove sono presenti diverse opzioni per personalizzare il modello.
Da qui è possibile aggiungere o rimuovere i campi del modulo. Per aggiungere un nuovo campo al modulo, è sufficiente fare clic su un campo del modulo dal pannello di sinistra e trascinarlo sul modello del modulo.
Nota: i campi Dropdown in stile moderno e Number Slider non sono compatibili con Google AMP. È invece necessario utilizzare i campi Number e Classic Style Dropdown.
Successivamente, è possibile configurare le opzioni del campo. È sufficiente fare clic su un campo e le Opzioni di campo appariranno sulla sinistra.
Ad esempio, è possibile modificare l’etichetta e il formato di un campo, renderlo obbligatorio, impostare una logica condizionale e altro ancora. Allo stesso modo, è possibile personalizzare tutti gli altri campi.
Successivamente, è possibile fare clic sulla scheda “Impostazioni” per configurare le impostazioni del modulo.
Le impostazioni “Generali” consentono di modificare il nome del modulo, il testo del pulsante di invio, il testo di elaborazione del pulsante di invio e altro ancora.
Successivamente, è possibile fare clic sulla scheda “Notifiche” per impostare le notifiche via e-mail per avvisare quando un utente completa il modulo.
Successivamente, si può fare clic sulla scheda “Conferma” per impostare un messaggio di conferma da visualizzare quando l’utente invia il modulo.
WPForms consente di mostrare un messaggio, una pagina o di reindirizzare gli utenti a un URL all’invio del modulo.
Una volta completata la configurazione, è possibile salvare il modulo.
Passo 4: Aggiungere il modulo AMP a una pagina
Ora che il vostro modulo WordPress è pronto, potete aggiungerlo a una pagina.
Nel costruttore di moduli di WPForms, vedrete un pulsante “Incorpora” in alto. Basta fare clic su di esso per aggiungere il modulo a una nuova pagina o a una pagina esistente.
Si aprirà quindi una finestra popup che chiederà di creare una nuova pagina o di scegliere una pagina esistente.
Per questa esercitazione selezioneremo l’opzione “Crea nuova pagina”.
Successivamente, è necessario inserire un nome per la pagina del nuovo modulo.
Una volta fatto ciò, è sufficiente fare clic sul pulsante “Let’s Go”.
Da qui, si vedrà un’anteprima del modulo AMP nell’editor dei contenuti.
In alternativa, è possibile utilizzare il blocco WPForms per aggiungere il modulo nell’editor dei contenuti. È sufficiente selezionare il modulo AMP dal menu a discesa.
Successivamente, è possibile pubblicare o aggiornare la pagina.
Tutto qui! Non è necessario configurare nient’altro. Il plugin WPForms aggiungerà il pieno supporto AMP al vostro modulo.
Se volete vedere come appare, potete aprire la pagina sul vostro cellulare. Oppure potete aprire la pagina sul vostro browser desktop aggiungendo /amp/ o /?amp alla fine dell’URL della vostra pagina, in questo modo:
https://www.example.com/contact/?amp
Aggiunta di Google reCAPTCHA al modulo AMP
Per impostazione predefinita, WPForms include impostazioni anti-spam per catturare e bloccare lo spam. Inoltre, è possibile utilizzare Google reCAPTCHA per ridurre gli invii di spam.
Per utilizzare Google reCAPTCHA con i moduli AMP, è necessario registrare il sito per Google reCAPTCHA v3 e ottenere le chiavi API di Google.
Per prima cosa, è necessario andare sul sito web di Google reCAPTCHA e fare clic sul pulsante “v3 Admin Console” nell’angolo in alto a destra della pagina.
Dopodiché, è necessario accedere con il proprio account Google. Una volta fatto, verrà visualizzata la pagina “Registra un nuovo sito”.
Successivamente, è necessario inserire il nome del sito web nel campo Etichetta. Google AMP supporta solo i reCAPTCHA v3, pertanto è necessario scegliere l’opzione del tipo reCAPTCHA “Score based (v3)”.
Successivamente, inserite il vostro nome di dominio (senza https://www.) nel campo Domini.
Quindi, fare clic sul pulsante “Invia”.
Successivamente, verrà visualizzato un messaggio di successo insieme alla chiave del sito e alla chiave segreta per aggiungere reCAPTCHA al sito.
È sufficiente copiare questi tasti.
Ora si dispone delle chiavi API di Google per aggiungere reCAPTCHA ai moduli. Tuttavia, è necessaria un’ulteriore impostazione per garantire la compatibilità di AMP con il reCATCHA.
Per prima cosa, è necessario fare clic sul link “Vai alle impostazioni”.
Successivamente, verranno visualizzate nuovamente le impostazioni di reCAPTCHA con la casella di controllo “Consenti a questa chiave di funzionare con le pagine AMP”. Selezionate semplicemente la casella e fate clic sul pulsante “Salva”.
Ora che si dispone delle chiavi API di Google per aggiungere reCAPTCHA ai moduli AMP, è necessario inserirle in WPForms.
Potete aprire la pagina WPForms ” Impostazioni ” CAPTCHA nella vostra dashboard di WordPress.
Successivamente, è possibile scorrere verso il basso e scegliere l’opzione “reCAPTCHA v3”.
Dopodiché, è sufficiente incollare la chiave del sito e la chiave segreta. Al termine, fare clic sul pulsante “Salva impostazioni”.
Ora che Google reCAPTCHA è stato aggiunto a WPForms, è possibile abilitarlo nei moduli dove necessario.
Andare su WPForms ” Tutti i moduli e selezionare il modulo in cui si desidera abilitare il reCAPTCHA. Fare semplicemente clic sul pulsante “Modifica” sotto il nome del modulo.
Una volta visualizzata la schermata di impostazione del modulo, fare clic sulla scheda “Impostazioni” e selezionare la scheda “Protezione antispam e sicurezza”.
Da qui, è sufficiente attivare l’opzione Google v3 reCAPTCHA.
Una volta terminato, salvare il modulo facendo clic sul pulsante “Salva” nell’angolo in alto a destra.
Dopodiché, è possibile rivisitare la pagina dei contatti e vedere il modulo AMP con reCAPTCHA in azione.
Speriamo che questo articolo vi abbia aiutato a capire come creare facilmente moduli AMP in WordPress. Potreste anche voler consultare la nostra guida su come creare moduli conformi al GDPR in WordPress e il miglior page builder drag-and-drop per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e 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!
Admin
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!
Admin
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!
Admin
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
Admin
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Admin
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
Admin
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!
Admin
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.
Admin
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.
Admin
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
Admin