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.

Storie come queste ci hanno ispirato a trovare una soluzione semplice. Un approccio 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:

• Aggiungere moduli AMP in WordPress (Passo dopo passo)
• Aggiungere Google reCAPTCHA al tuo modulo AMP
• Suggerimento bonus: Rendi il tuo sito WordPress ottimizzato per i dispositivi mobili

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

Per questo tutorial, utilizzeremo la versione Pro di WPForms perché offre più funzionalità, strumenti AI, modelli di moduli, add-on e opzioni di personalizzazione. Esiste anche una versione WPForms Lite che puoi utilizzare per iniziare gratuitamente.

Sia la versione Lite che la versione Pro di WPForms ti consentono di creare un modulo di contatto di base pronto per AMP.

Innanzitutto, dovrai installare e attivare il plugin WPForms. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

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 ufficiale AMP per WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin 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.

Dalla pagina delle impostazioni AMP, puoi abilitare o disabilitare AMP sul tuo sito web, scegliere una modalità del sito web per AMP e scegliere i modelli supportati.

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. Oppure puoi aprire la pagina sul tuo browser desktop aggiungendo /amp/ o /?amp alla fine dell'URL della tua pagina, così:

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. Google AMP supporta solo reCAPTCHA v3, quindi devi scegliere l'opzione di tipo reCAPTCHA ‘Basato su punteggio (v3)’.

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.

Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente moduli AMP in WordPress. Potresti anche voler consultare la nostra guida su come creare moduli conformi al GDPR in WordPress e le nostre scelte esperte dei migliori costruttori di moduli online.

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