Vous souhaitez créer des formulaires adaptés à l’AMP sur votre site WordPress ?
Les pages mobiles accélérées (AMP) aident à accélérer les sites web. Cependant, AMP retire les formulaires WordPress pour améliorer les performances de votre site.
Dans cet article, nous allons vous afficher comment créer des formulaires AMP dans WordPress en utilisant WPForms (la manière simple).
Pourquoi créer un formulaire AMP dans WordPress ?
Accelerated Mobile Pages ou AMP est un projet de Google qui permet aux sites web de se charger plus rapidement sur les appareils mobiles.
Bien que l’AMP offre une excellente expérience de navigation mobile en accélérant le chargement de vos pages web, il désactive de nombreuses fonctionnalités utiles sur votre site WordPress.
L’un d’entre eux est le formulaire de contact. Comme AMP utilise un ensemble limité de HTML et de JavaScript, il ne peut pas charger vos formulaires WordPress correctement sur les pages AMP.
Alternativement, vous pourriez utiliser l’un des nombreux thèmes WordPress responsive qui offrent d’excellentes performances sur ordinateur et sur mobile. Ainsi, vous n’avez pas à faire de compromis sur le style de votre site pour offrir une expérience supérieure sur mobile.
Cependant, si vous utilisez AMP sur votre site WordPress, alors vous pouvez utiliser une extension pour afficher les formulaires. Voyons comment ajouter un formulaire AMP à votre site.
Ajout de formulaires AMP dans WordPress (étape par étape)
La meilleure façon de créer un formulaire AMP est d’utiliser WPForms. C’est l’extension de formulaire WordPress la plus conviviale pour les débutants qui vous aide à créer des formulaires WordPress prêts pour AMP.
Leur équipe a récemment collaboré avec Google pour faciliter l’utilisation des formulaires AMP pour WordPress.
Étape par étape : Installer et activer l’extension WPForms
Pour ce tutoriel, nous utiliserons la version WPForms Pro car elle offre plus de fonctionnalités, de modèles de formulaires, de modules complémentaires et d’options de personnalisation. Il existe également une version WPForms Lite que vous pouvez utiliser pour commencer gratuitement.
La version lite et la version pro de WPForms vous permettent de créer un formulaire de contact de base prêt pour l’AMP.
Tout d’abord, vous devrez installer et activer l’extension WPForms. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.
Étape par étape : Ajouter AMP à votre site WordPress
Avant de créer un formulaire, il est important que vous ayez configuré AMP sur votre site WordPress.
Afin de commander AMP avec WordPress, vous devez installer et activer l’extension AMP officielle pour WordPress. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.
Une fois activée, l’extension ajoutera automatiquement le support de Google AMP pour votre site WordPress.
Cependant, vous pouvez modifier les paramètres AMP pour votre site en allant dans AMP » Réglages depuis votre tableau de bord.
À partir de la page des réglages AMP, vous pouvez activer ou désactiver AMP sur votre site web, choisir un mode de site pour AMP et choisir des modèles supportés.
Pour plus de détails, veuillez consulter notre guide sur la façon de configurer correctement Google AMP sur votre site WordPress.
Une fois que vous avez configuré AMP, l’étape suivante consiste à créer un formulaire de contact compatible AMP sur votre site WordPress.
Etape par 3 : Créer un nouveau formulaire AMP dans WPForms
Il suffit de se rendre sur la page WPForms » Ajouter un nouveau pour créer un nouveau formulaire WordPress. WPForms est compatible avec AMP par défaut, vous n’aurez donc pas besoin d’activer de réglages particuliers.
Dans l’écran de configuration du formulaire, vous pouvez choisir un modèle de formulaire et saisir un nom dans la partie supérieure. Vous pouvez sélectionner le formulaire vierge si vous souhaitez partir de zéro ou utiliser un modèle préconstruit pour le modifier rapidement en fonction de vos besoins.
Pour ce tutoriel, nous choisirons le Modèle« Formulaire de contact simple« .
Ensuite, vous verrez la page du constructeur de formulaires, où il y a différentes options pour personnaliser votre modèle.
À partir de là, vous pouvez ajouter ou retirer des champs de formulaire. Pour ajouter un nouveau champ à votre formulaire, il vous suffit de cliquer sur un champ de formulaire dans le panneau de gauche et de le faire glisser sur le modèle de formulaire.
Note : Les champs Modern Style Dropdown et Number Diaporama ne sont pas compatibles avec Google AMP. À la place, vous devrez utiliser les champs Number et Classic Style Dropdown.
Ensuite, vous pouvez configurer les options du champ. Il suffit de cliquer sur un champ, puis les options de champ apparaissent à gauche.
Par exemple, vous pouvez modifier le libellé et le format d’un champ, en faire un champ obligatoire, définir une logique conditionnelle, etc. De même, vous pouvez personnaliser tous les autres champs.
Ensuite, vous pouvez cliquer sur l’onglet « Réglages » pour définir les paramètres de votre formulaire.
Les Réglages généraux vous permettent de modifier le nom du formulaire, le texte du bouton d’envoi, le texte de traitement du bouton d’envoi, et bien d’autres choses encore.
Ensuite, vous pouvez cliquer sur l’onglet « Notifications » pour configurer des notifications par e-mail qui vous préviendront lorsqu’un utilisateur aura terminé le formulaire.
Ensuite, vous pouvez cliquer sur l’onglet « Confirmation » pour configurer un message de confirmation à afficher lorsque l’utilisateur envoie le formulaire.
WPForms vous permet d’afficher un message, une page ou de rediriger les utilisateurs/utilisatrices vers une URL lors de l’entrée du formulaire.
Une fois la configuration terminée, vous pouvez enregistrer votre formulaire.
Étape par étape : Ajouter votre formulaire AMP à une page
Maintenant que votre formulaire WordPress est prêt, vous pouvez l’ajouter à une page.
Dans le Constructeur de formulaires WPForms, vous verrez un bouton « Contenu embarqué » en haut. Cliquez simplement dessus pour ajouter votre formulaire à une nouvelle page ou à une page existante.
Ensuite, une fenêtre surgissante s’ouvre, vous demandant de créer une nouvelle page ou de choisir une page existante.
Nous sélectionnerons l’option « Créer une nouvelle page » pour ce tutoriel.
Vous devez ensuite saisir un nom pour votre nouvelle page de formulaire.
Une fois que c’est fait, il suffit de cliquer sur le bouton « Let’s Go ».
À partir de cette page, vous verrez une prévisualisation de votre formulaire AMP dans l’éditeur/éditrices de contenu.
Vous pouvez également utiliser le bloc WPForms pour ajouter le formulaire dans l’éditeur de contenu. Il vous suffit de sélectionner votre formulaire AMP dans le menu déroulant.
Ensuite, vous pouvez publier ou mettre à jour votre page.
C’est tout ! Vous n’avez pas besoin de configurer quoi que ce soit d’autre. L’extension WPForms ajoutera un support AMP complet à votre formulaire dès maintenant.
Si vous voulez voir ce que cela donne, vous pouvez ouvrir la page sur votre téléphone mobile. Vous pouvez également ouvrir la page sur votre navigateur de bureau en ajoutant /amp/ ou /?amp à la fin de l’URL de votre page, comme ceci :
https://www.example.com/contact/?amp
Ajouté Google reCAPTCHA à votre formulaire AMP
Par défaut, WPForms définit des Réglages anti-spam pour attraper et bloquer les indésirables. En outre, vous pouvez utiliser Google reCAPTCHA pour réduire les entrées indésirables.
Pour utiliser Google reCAPTCHA avec vos formulaires AMP, vous devez inscrire votre site à Google reCAPTCHA v3 et obtenir les clés API de Google.
Tout d’abord, vous devez vous rendre sur le site de Google reCAPTCHA et cliquer sur le bouton « v3 Admin Console » en haut à droite de la page.
Ensuite, vous devez vous connecter avec votre compte Google. Une fois cette étape franchie, la page « Inscrire un nouveau site » s’affiche.
Ensuite, vous devez saisir le nom de votre site dans le champ Libellé. Google AMP prend uniquement en charge le reCAPTCHA v3, vous devez donc choisir l’option de type de reCAPTCHA » Basé sur le score (v3) « .
Saisissez ensuite votre nom de domaine (sans https://www.) dans le champ Domaines.
Cliquez ensuite sur le bouton « Envoyer ».
Ensuite, vous verrez un message de réussite accompagné de la clé du site et de la clé secrète pour ajouter reCAPTCHA à votre site.
Il suffit de copier ces clés.
Vous disposez désormais des clés API de Google pour ajouter le reCAPTCHA à vos formulaires. Cependant, un autre réglage est nécessaire pour assurer la compatibilité AMP avec le reCATCHA.
Tout d’abord, vous devez cliquer sur le lien « Accéder aux Réglages ».
Ensuite, vous verrez à nouveau les réglages reCAPTCHA avec la case à cocher » Permettre à cette clé de fonctionner avec les pages AMP « . Il vous suffit de cocher la case et de cliquer sur le bouton « Enregistrer » ci-dessous.
Maintenant que vous disposez des clés API de Google pour ajouter reCAPTCHA sur les formulaires AMP, vous devez les saisir dans WPForms.
Vous pouvez ouvrir la page WPForms » Réglages » CAPTCHA dans votre Tableau de bord WordPress.
Ensuite, vous pouvez défiler vers le bas et choisir l’option « reCAPTCHA v3 ».
Ensuite, il vous suffit de coller la clé du site et la clé secrète. Lorsque vous avez terminé, cliquez sur le bouton « Enregistrer les Réglages ».
Maintenant que Google reCAPTCHA est ajouté à WPForms, vous pouvez l’activer dans vos formulaires là où c’est nécessaire.
Allez dans WPForms » Tous les formulaires et sélectionnez le formulaire dans lequel vous souhaitez activer le reCAPTCHA. Cliquez simplement sur le bouton « Modifier » sous le nom du formulaire.
Une fois que l’écran de configuration du formulaire apparaît, cliquez sur l’onglet « Réglages » et sélectionnez l’onglet « Protection contre les indésirables et sécurité ».
À partir de là, il suffit d’activer l’option Google reCAPTCHA v3.
Une fois que c’est fait, enregistrez votre formulaire en cliquant sur le bouton « Enregistrer » dans le coin supérieur droit.
Après cela, vous pouvez revisiter votre page de contact et voir le formulaire AMP avec reCAPTCHA en action.
Nous espérons que cet article vous a aidé à apprendre comment créer facilement des formulaires AMP sur WordPress. Vous pouvez également consulter notre guide sur la création de formulaires conformes au RGPD sur WordPress et le meilleur constructeur de pages glisser-déposer sur WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and 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!
Administrateur
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!
Administrateur
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!
Administrateur
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
Administrateur
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Administrateur
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
Administrateur
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!
Administrateur
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.
Administrateur
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.
Administrateur
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
Administrateur