Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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).

How to create AMP forms in wordpress

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.

Select AMP template mode

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.

Select simple form template

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.

Customize your AMP form

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.

Edit form fields in AMP form

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.

General form settings for AMP form

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.

AMP form notification settings

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.

AMP form confirmation settings

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.

Save and embed your form

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”.

Embed a form in page

Successivamente, è necessario inserire un nome per la pagina del nuovo modulo.

Una volta fatto ciò, è sufficiente fare clic sul pulsante “Let’s Go”.

Enter a name for new AMP page

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.

Add the WPForms block

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.

View captcha admin console

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)”.

Select v3 captcha version

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

Quindi, fare clic sul pulsante “Invia”.

Enter domain for captcha

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.

Copy site and secret key

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”.

Enable option for keys to work with AMP

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.

Go to WPForms captcha settings

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”.

Enter captcha keys and type

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.

Edit your contact form settings

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.

Enable google v3 option in WPForms

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

22 commentiLascia una risposta

  1. Syed Balkhi

    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!

  2. Jiří Vaněk

    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.

  3. Konrad

    Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?

    • WPBeginner Support

      If we find one we would recommend we will be sure to share!

      Admin

  4. Adrian

    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

      Glad you found it helpful!

      Admin

  5. Shafqat Khan

    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

      Glad you’ve found our content helpful!

      Admin

  6. Ralph

    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

      Glad you liked our recommendation :)

      Admin

  7. Aman

    Thanks WP Begginer, Helpful for my website and works completely well.

    • WPBeginner Support

      Glad to hear our guide could help!

      Admin

  8. faizan

    I learned information from WP Beginner and collected many things that can help me for creating best website

    • WPBeginner Support

      Glad to hear our guides have been helpful :)

      Admin

  9. Mikolaj

    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

      Glad you found the post helpful! :)

      Admin

  10. Czarek

    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

      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

  11. Ronald

    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

      Currently the AMP support is valid only for the basic contact form feature.

      Admin

  12. Irene

    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

      Glad our guide could be helpful :)

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.