Vous souhaitez créer des formulaires compatibles AMP sur votre site WordPress ?
Accelerated Mobile Pages ou AMP est un projet Google qui accélère le chargement des sites Web sur les appareils mobiles.
Bien qu’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 Web.
L’un d’eux est le formulaire de contact. Étant donné qu’AMP utilise un ensemble limité de HTML et de JavaScript, il ne peut pas charger correctement vos formulaires WordPress sur les pages AMP.
Mais heureusement, il existe maintenant une solution simple disponible. WPForms, le plugin de formulaire WordPress le plus convivial pour les débutants vous aide désormais à créer des formulaires WordPress prêts pour AMP. Leur équipe a récemment travaillé avec Google pour rendre les formulaires AMP faciles pour WordPress.
Dans cet article, nous allons vous montrer comment créer des formulaires AMP dans WordPress à l’aide de WPForms (le moyen le plus simple).
Création de formulaires AMP dans WordPress (étape par étape)
Pour utiliser AMP avec WordPress, vous devez installer et activer le plugin AMP officiel pour WordPress. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Une fois activé, le plugin ajoutera automatiquement le support Google AMP pour votre site WordPress.
Cependant, vous pouvez modifier les paramètres AMP de votre site Web en accédant à CHA » Général depuis votre tableau de bord.
À partir de la page des paramètres AMP, vous pouvez activer ou désactiver AMP sur votre site Web, choisir un mode de site Web pour AMP et choisir les modèles pris en charge.
Une fois que vous avez configuré AMP, l’étape suivante consiste à créer un formulaire de contact compatible AMP sur votre site WordPress.
Étape 1. Créez un formulaire WordPress avec WPForms
Pour commencer, installez et activez le WPForms Lite plugin sur votre site. C’est la version allégée du WPForms Pro brancher.
Les versions allégée et pro de WPForms vous permettent de créer un formulaire de contact de base prêt pour l’AMP. Dans notre article, nous utiliserons la version gratuite pour les captures d’écran.
Une fois le plugin installé et activé, vous devez vous rendre sur WPForms » Ajouter un nouveau page pour créer un nouveau formulaire WordPress.
Sur l’écran de configuration du formulaire, vous pouvez choisir un modèle de formulaire pour démarrer rapidement. Vous pouvez sélectionner le formulaire vierge si vous souhaitez repartir de zéro.
Ensuite, il ouvrira la page du générateur de formulaire.
À partir de là, vous pouvez ajouter ou supprimer des champs de formulaire. Pour ajouter un nouveau champ à votre formulaire, vous pouvez simplement cliquer sur un champ de formulaire dans le panneau de gauche, et il apparaîtra dans le panneau de création de formulaire sur la droite.
Après cela, vous pouvez configurer les options de champ. Cliquez simplement sur un champ, puis les options de champ apparaîtront.
De même, vous pouvez personnaliser tous les autres champs.
Après cela, vous pouvez cliquer sur l’onglet Paramètres pour configurer les paramètres de votre formulaire.
Les paramètres généraux vous permettent de modifier le nom de votre formulaire, de soumettre le texte du bouton, de soumettre le texte du traitement du bouton, d’activer le pot de miel anti-spam, etc.
Ensuite, vous pouvez cliquer sur l’onglet Notifications pour configurer des notifications par e-mail afin de vous avertir lorsqu’un utilisateur remplit le formulaire.
Ensuite, vous pouvez cliquer sur l’onglet Confirmation pour configurer un message de confirmation à afficher lorsqu’un utilisateur soumet le formulaire.
Une fois la configuration terminée, vous pouvez enregistrer votre formulaire.
Étape 2. Ajoutez votre formulaire AMP à une page
Maintenant que votre formulaire WordPress est prêt, vous pouvez l’ajouter à une page.
Tout d’abord, vous devez créer une nouvelle page ou ouvrir une page existante sur laquelle vous souhaitez ajouter le formulaire.
Sur l’écran d’édition de votre page, cliquez sur l’icône Ajouter un nouveau bloc et sélectionnez le bloc WPForms.
Après cela, vous pouvez voir le widget WPForms ajouté à votre écran d’édition de page. Il vous suffit de sélectionner le formulaire que vous avez créé précédemment et le widget le chargera instantanément dans l’éditeur de page.
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. Le plugin WPForms Lite ajoutera maintenant un support AMP complet à votre formulaire.
Si vous voulez voir à quoi cela ressemble, vous pouvez ouvrir la page sur votre téléphone mobile.
Ou vous pouvez ouvrir la page sur votre navigateur de bureau en ajoutant /amp/ ou /?amp à la fin de l’URL de votre page. Par exemple, https://www.example.com/contact/?amp.
Ajout de Google reCAPTCHA à votre formulaire AMP
Par défaut, WPForms inclut un pot de miel anti-spam pour attraper et bloquer le spam. De plus, vous pouvez utiliser Google reCAPTCHA pour réduire les soumissions de spam.
Pour utiliser Google reCAPTCHA avec vos formulaires AMP, vous devez enregistrer votre site pour Google reCAPTCHA v3 et obtenir les clés API Google.
Allez au Site Web Google reCAPTCHA et cliquez sur le bouton ‘Admin Console’ dans le coin supérieur droit de la page.
Après cela, vous devez vous connecter avec votre compte Google. Une fois cela fait, vous verrez la page ‘Enregistrer un nouveau site’.
Tout d’abord, vous devez entrer le nom de votre site Web dans le champ Étiquette. Google AMP ne prend en charge que reCAPTCHA v3, vous devez donc le choisir parmi les options de type reCAPTCHA.
Après cela, entrez votre nom de domaine dans la section Domaines.
La section Propriétaires affiche votre adresse e-mail par défaut. Vous pouvez également ajouter un autre e-mail si vous le souhaitez.
Ensuite, vous devez accepter les conditions d’utilisation de reCAPTCHA pour continuer. Cochez également la case « Envoyer des alertes aux propriétaires », qui permettra à Google de vous informer des problèmes tels qu’une mauvaise configuration et un trafic suspect sur votre site.
Une fois terminé, cliquez sur le bouton Soumettre.
Ensuite, vous verrez un message de réussite avec la clé du site et la clé secrète pour ajouter reCAPTCHA sur votre site.
Vous disposez maintenant des clés API Google pour ajouter reCAPTCHA à vos formulaires. Cependant, un ajustement supplémentaire est nécessaire pour assurer la compatibilité AMP avec le reCATCHA. Cliquez sur le lien « Aller aux paramètres ».
Ensuite, vous verrez à nouveau les paramètres reCAPTCHA avec la case à cocher « Autoriser cette clé à fonctionner avec les pages AMP ». Cochez simplement la case et cliquez sur le bouton Enregistrer ci-dessous.
Maintenant que vous disposez des clés API Google pour ajouter reCAPTCHA sur les formulaires AMP, vous devez ouvrir WPForms » Paramètres » reCAPTCHA page dans votre tableau de bord WordPress.
Sur cet écran, vous devez choisir l’option reCAPTCHA v3 et coller la clé du site et la clé secrète. Après cela, cliquez sur le bouton Enregistrer les paramètres.
Maintenant que Google reCAPTCHA est ajouté à WPForms, vous pouvez l’activer dans vos formulaires si nécessaire. Aller à WPForms » Tous les formulaires et sélectionnez le formulaire où vous souhaitez activer le reCAPTCHA.
Une fois que l’écran de configuration du formulaire apparaît, cliquez sur l’onglet Paramètres et sélectionnez la section Paramètres généraux. En bas, vous pouvez voir la case à cocher « Activer Google v3 reCAPTCHA ».
Cochez la case puis enregistrez votre formulaire en cliquant sur le bouton Enregistrer en haut à droite.
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 à créer facilement des formulaires AMP dans WordPress. Vous pouvez également consulter notre guide sur la création de formulaires conformes au RGPD dans WordPress.
