Come creare moduli AMP in WordPress (in modo semplice)

Avete mai sentito parlare di Accelerated Mobile Pages (AMP)? Le pagine mobili accelerate (AMP) di Google possono contribuire a velocizzare il sito web e a offrire un’esperienza utente veloce sui dispositivi mobili.

Tuttavia, AMP rimuove diversi elementi dal sito web per migliorare le prestazioni. Tra questi, i moduli di WordPress.

Un modo semplice per ovviare a questo problema è creare moduli supportati da AMP. In base alla nostra esperienza, il modo più semplice per farlo è utilizzare WPForms.

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 set limitato di HTML e JavaScript, i moduli di WordPress non possono essere caricati correttamente 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 è usare WPForms. È il plugin per moduli di contatto 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.

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 la nostra scelta dei migliori plugin per sondaggi 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.