Come Creare Moduli AMP in WordPress (Il Modo Semplice)

Abbiamo sentito da molti proprietari di siti WordPress che condividono la stessa frustrazione. I loro moduli hanno un bell'aspetto, ma sulle pagine AMP, o si caricano troppo lentamente o semplicemente non funzionano affatto.

Un proprietario di una piccola impresa ci ha persino raccontato come i clienti continuassero ad abbandonare il loro modulo d'ordine perché ci metteva un'eternità a caricarsi sui dispositivi mobili.

Se hai deciso di utilizzare AMP per velocizzare il tuo sito, hai bisogno di una soluzione per i tuoi moduli. Abbiamo trovato un approccio semplice che chiunque può utilizzare per creare moduli compatibili con AMP senza mal di testa o codifica.

Dopo aver provato molti plugin e metodi, abbiamo scoperto un modo affidabile per creare moduli veloci e ottimizzati per dispositivi mobili che funzionano davvero.

In questa guida, ti illustreremo il modo più semplice per creare moduli AMP per il tuo sito WordPress, passo dopo passo. Sia che tu voglia un modulo di contatto, un sondaggio o un modulo d'ordine che si carichi istantaneamente sui dispositivi mobili.

Perché Creare un Modulo AMP in WordPress?

Accelerated Mobile Pages, o AMP, è un progetto di Google che rende i siti web più veloci sui dispositivi mobili.

Mentre AMP offre un'ottima esperienza di navigazione mobile rendendo le tue pagine web più veloci, disabilita molte funzionalità utili sul tuo sito WordPress.

Una di queste sono i moduli di contatto. Poiché AMP utilizza un set limitato di HTML e JavaScript, i tuoi moduli WordPress non possono caricarsi correttamente sulle pagine AMP.

In alternativa, potresti utilizzare uno dei tanti temi WordPress reattivi che offrono prestazioni eccellenti su desktop e mobile. In questo modo, non dovrai compromettere lo stile del tuo sito web per offrire un'esperienza superiore su mobile.

Tuttavia, se stai utilizzando AMP sul tuo sito WordPress, puoi usare un plugin per mostrare i moduli. Ecco una rapida panoramica di tutti gli argomenti che tratteremo in questa guida:

Iniziamo subito!

Aggiungere moduli AMP in WordPress (Passo dopo passo)

Il modo migliore per creare un modulo AMP è utilizzare WPForms. È il plugin per moduli di contatto WordPress più adatto ai principianti che ti aiuta a creare moduli WordPress pronti per AMP. Il loro team ha collaborato con Google per rendere i moduli AMP facili per WordPress.

Passaggio 1: Installa e attiva il plugin WPForms

Sia la versione Lite che quella Pro di WPForms ti consentono di creare un modulo di contatto di base pronto per AMP. Ma per questo tutorial, utilizzeremo la versione WPForms Pro perché offre più funzionalità, strumenti AI, modelli di moduli, componenti aggiuntivi e opzioni di personalizzazione.

Per iniziare, puoi visitare il sito web di WPForms e creare un account. Quindi, fai clic sul pulsante 'Get WPForms Now', seleziona un piano e completa il processo di registrazione.

Una volta registrato, verrai reindirizzato alla dashboard del tuo account WPForms. Da lì, puoi scaricare il file del plugin e copiare la tua chiave di licenza: avrai bisogno di entrambi nei passaggi successivi.

Ora è il momento di aggiungere WPForms al tuo sito. Dalla tua area di amministrazione di WordPress, vai su Plugin » Aggiungi nuovo plugin.

Nella schermata successiva, cerca "WPForms".

Quando vedi WPForms nei risultati, fai clic su 'Installa ora' e poi su 'Attiva'.

Se hai bisogno di ulteriore aiuto con questo passaggio, consulta la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, vai su WPForms » Impostazioni nella tua dashboard.

Incolla la tua chiave di licenza nel campo 'Chiave di licenza' e fai clic su 'Verifica chiave' per collegare il tuo account.

Una volta fatto, WPForms è installato, attivato e pronto per l'uso sul tuo sito.

Passaggio 2: Aggiungi AMP al tuo sito WordPress

Prima di creare un modulo, è importante che AMP sia configurato sul tuo sito WordPress.

Per utilizzare AMP con WordPress, devi installare e attivare il plugin AMP ufficiale per WordPress dal tuo pannello 'Plugin' all'interno dell'area di amministrazione.

Per i dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Una volta attivato, il plugin aggiungerà automaticamente il supporto Google AMP per il tuo sito WordPress.

Tuttavia, puoi modificare le impostazioni AMP per il tuo sito web andando su AMP » Impostazioni dalla tua dashboard.

Se sei un principiante, ti consigliamo di scegliere la modalità Lettore (a volte chiamata Classica). Questo assicura che il tuo sito desktop principale rimanga esattamente lo stesso, mentre i visitatori da dispositivi mobili ottengono la versione AMP super veloce.

Per maggiori dettagli, consulta la nostra guida su come configurare correttamente Google AMP sul tuo sito WordPress.

Una volta configurato AMP, il passo successivo è creare un modulo di contatto compatibile con AMP sul tuo sito WordPress.

Passaggio 3: Crea un nuovo modulo AMP in WPForms

Vai semplicemente alla pagina WPForms » Aggiungi nuovo per creare un nuovo modulo WordPress.

WPForms è compatibile con AMP per impostazione predefinita, quindi non dovrai attivare alcuna impostazione speciale.

Nella schermata di configurazione del modulo, puoi iniziare dando un nome al tuo modulo.

Quindi, sceglierai come costruire il modulo.

Puoi selezionare Modulo vuoto se vuoi iniziare da zero. Se preferisci l'opzione più semplice e veloce, puoi utilizzare il generatore di moduli AI. Questo ti permetterà di creare il tuo modulo con un semplice prompt.

Oppure, usa un modello predefinito che puoi modificare rapidamente in base alle tue esigenze. WPForms Pro viene fornito con oltre 2.000 modelli predefiniti tra cui scegliere!

Per questo tutorial, sceglieremo il modello 'Modulo di contatto semplice'.

Successivamente, vedrai la pagina del generatore di moduli, dove ci sono diverse opzioni per personalizzare il tuo modello.

Da qui, puoi aggiungere o rimuovere campi del modulo. Per aggiungere un nuovo campo al tuo modulo, puoi semplicemente fare clic su un campo del modulo dal pannello di sinistra e trascinarlo sul modello del modulo.

Dopodiché, puoi configurare le opzioni del campo.

Fai semplicemente clic su un campo, e poi apparirà 'Opzioni campo' sulla sinistra.

Ad esempio, puoi modificare l'etichetta e il formato di un campo, renderlo un campo obbligatorio, impostare la logica condizionale e altro ancora. Allo stesso modo, puoi personalizzare tutti gli altri campi.

Puoi anche aggiungere altri campi ai tuoi moduli. WPForms offre campi di base come dropdown e slider, oltre a quelli più avanzati come selettore di data e interruzione di pagina.

Trascina e rilascia semplicemente i tipi di campo dal pannello di sinistra a quello di destra, o riorganizzali nell'anteprima del modulo trascinandoli su o giù

Dopodiché, puoi fare clic sulla scheda 'Impostazioni' per configurare le impostazioni del tuo modulo.

Le impostazioni 'Generali' ti 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, puoi fare clic sulla scheda 'Notifiche' per impostare le notifiche email per avvisarti quando un utente completa il modulo.

Successivamente, puoi fare clic sulla scheda ‘Conferma’ per impostare un messaggio di conferma da visualizzare quando un utente invia il modulo.

WPForms ti consente di mostrare un messaggio, mostrare una pagina o reindirizzare gli utenti a un URL all'invio del modulo.

Dopo che la configurazione è completa, puoi salvare il tuo modulo.

Passaggio 4: Aggiungi il tuo modulo AMP a una pagina

Ora che il tuo modulo è pronto, puoi aggiungerlo al tuo sito WordPress.

Nell'editor di moduli di WPForms, vedrai un pulsante ‘Incorpora’ in alto. Fai semplicemente clic su di esso per aggiungere il tuo modulo a una nuova pagina o a una esistente.

Successivamente, si aprirà una finestra popup che ti chiederà di creare una nuova pagina o di scegliere una pagina esistente.

Selezioneremo l'opzione ‘Crea nuova pagina’ per questo tutorial.

Successivamente, dovrai inserire un nome per la tua nuova pagina del modulo.

Una volta fatto, fai semplicemente clic sul pulsante ‘Inizia’.

Da qui, vedrai un'anteprima del tuo modulo AMP nell'editor di contenuti.

In alternativa, puoi anche utilizzare il blocco WPForms per aggiungere il modulo nell'editor di contenuti.

Seleziona il tuo modulo AMP dal menu a discesa.

Successivamente, puoi pubblicare o aggiornare la tua pagina.

Tutto qui! Non è necessario configurare nient'altro. Il plugin WPForms aggiungerà ora il supporto AMP completo al tuo modulo.

Se vuoi vedere come appare, puoi aprire la pagina sul tuo telefono cellulare. Se stai usando la Modalità Lettura, puoi aprire la pagina sul tuo browser desktop per testarla aggiungendo /amp/ o /?amp alla fine dell'URL della pagina, in questo modo:

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

Aggiungere Google reCAPTCHA al tuo modulo AMP

Per impostazione predefinita, WPForms include impostazioni anti-spam per catturare e bloccare lo spam. Inoltre, puoi utilizzare Google reCAPTCHA per ridurre le richieste di spam.

Per utilizzare Google reCAPTCHA con i tuoi moduli AMP, devi registrare il tuo sito per Google reCAPTCHA v3 e ottenere le chiavi API di Google.

Innanzitutto, dovrai andare sul sito web Google reCAPTCHA e fare clic sul pulsante ‘v3 Admin Console’ nell'angolo in alto a destra della pagina.

Successivamente, devi accedere con il tuo account Google. Una volta fatto, vedrai la pagina ‘Registra un nuovo sito’.

Successivamente, devi inserire il nome del tuo sito web nel campo Etichetta. Le pagine Google AMP non possono gestire la casella di controllo standard “Non sono un robot” (v2). Pertanto, devi utilizzare reCAPTCHA v3, che funziona in modo invisibile in background.

Successivamente, inserisci il tuo nome di dominio (senza https://www.) nel campo Domini.

Successivamente, fai clic sul pulsante ‘Invia’.

Successivamente, vedrai un messaggio di successo insieme alla chiave del sito e alla chiave segreta per aggiungere reCAPTCHA al tuo sito.

Copia semplicemente queste chiavi.

Ora hai le chiavi API di Google per aggiungere reCAPTCHA ai tuoi moduli. Tuttavia, è necessaria un'altra impostazione per garantire la compatibilità AMP con reCAPTCHA.

Innanzitutto, dovrai fare clic sul link ‘Vai alle impostazioni’.

Successivamente, vedrai nuovamente le impostazioni di reCAPTCHA con la casella di controllo ‘Consenti a questa chiave di funzionare con le pagine AMP’. Seleziona semplicemente la casella e fai clic sul pulsante ‘Salva’ sottostante.

Ora che hai le chiavi API di Google per aggiungere reCAPTCHA ai moduli AMP, devi inserirle in WPForms.

Puoi aprire la pagina WPForms » Impostazioni » CAPTCHA nella tua bacheca di WordPress.

Successivamente, puoi scorrere verso il basso e scegliere l'opzione ‘reCAPTCHA v3’.

Successivamente, incolla semplicemente la chiave del sito e la chiave segreta. Al termine, fai clic sul pulsante ‘Salva impostazioni’.

Ora che Google reCAPTCHA è stato aggiunto a WPForms, puoi abilitarlo nei tuoi moduli dove necessario.

Vai su WPForms » Tutti i moduli e seleziona il modulo in cui desideri abilitare reCAPTCHA. Fai semplicemente clic sul pulsante ‘Modifica’ sotto il nome del modulo.

Una volta visualizzata la schermata di configurazione del modulo, fai clic sulla scheda ‘Impostazioni’ e seleziona la scheda ‘Protezione antispam e sicurezza’.

Da qui, abilita semplicemente l'opzione Google v3 reCAPTCHA.

Una volta fatto, salva il tuo modulo facendo clic sul pulsante ‘Salva’ nell'angolo in alto a destra.

Dopo di che, puoi rivisitare la tua pagina dei contatti e vedere il modulo AMP con reCAPTCHA in azione.

Suggerimento bonus: Rendi il tuo sito WordPress ottimizzato per i dispositivi mobili

Creare moduli AMP è un ottimo inizio, ma rendere l'intero sito ottimizzato per i dispositivi mobili migliorerà ulteriormente la tua esperienza utente. Ecco alcuni rapidi consigli:

• Utilizza un menu di navigazione mobile-responsive: Rendi facile per i visitatori navigare nel tuo sito e trovare ciò di cui hanno bisogno, anche su schermi piccoli.
• Regola il posizionamento e le dimensioni dei tuoi pulsanti CTA: Assicurati che i tuoi pulsanti di invito all'azione siano facili da toccare e visibili senza dover scorrere troppo.
• Dai priorità alla velocità del tuo sito web: Comprimi le immagini e utilizza plugin di caching per ridurre i tempi di caricamento.

Un sito ottimizzato per i dispositivi mobili mantiene i visitatori coinvolti e ti aiuta a ottenere più conversioni dai tuoi moduli!

Per maggiori dettagli, puoi consultare la nostra guida su come creare un sito WordPress ottimizzato per dispositivi mobili.

FAQ: Creare moduli AMP in WordPress

Prima di concludere, ecco risposte rapide ad alcune domande comuni su AMP e sul suo utilizzo con i moduli WordPress.

Cos'è AMP in WordPress?

AMP (Accelerated Mobile Pages) è un framework che aiuta le tue pagine a caricarsi più velocemente sui dispositivi mobili utilizzando una versione semplificata di HTML e JavaScript. In WordPress, AMP di solito significa creare una versione leggera delle tue pagine ottimizzata per la velocità su telefoni e tablet.

AMP è ancora rilevante?

Per la maggior parte dei siti web, AMP non è più necessario. Google ora dà priorità alle Core Web Vitals, che puoi migliorare utilizzando un tema veloce e reattivo e un buon plugin di caching. Tuttavia, gli editori di notizie e i grandi siti multimediali potrebbero ancora trarre vantaggio da AMP.

Come creare pagine AMP in WordPress?

Il modo più semplice è utilizzare un plugin AMP. Può generare automaticamente versioni AMP delle tue pagine e dei tuoi post. Dopo averne installato uno, puoi scegliere quali contenuti dovrebbero avere una versione AMP e regolare le impostazioni di base dalla tua dashboard di WordPress.

Quali sono gli svantaggi di AMP?

Hai meno controllo sul design, alcuni plugin e script non funzioneranno e le funzionalità avanzate (come determinate animazioni, strumenti di tracciamento o JavaScript personalizzato) potrebbero essere limitate. Questo può far sentire il tuo sito più limitato rispetto a una normale pagina WordPress.

Altre guide all'uso dei moduli WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente moduli AMP in WordPress. Successivamente, potresti anche voler consultare le nostre guide su:

• Come personalizzare e stilizzare i tuoi moduli WordPress
• Come usare i moduli di contatto per far crescere la tua lista email in WordPress
• Come creare moduli conformi al GDPR in WordPress
• Guida definitiva all'uso dei moduli WordPress
• I migliori creatori di moduli online (scelte degli esperti)

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.