Comment créer des formulaires AMP dans WordPress

Afin d'accélérer le chargement des sites Web sur les appareils mobiles, Google a lancé un projet appelé Accelerated Mobile Pages, ou AMP. Et, bien qu'il offre une excellente expérience de navigation mobile en accélérant le chargement de vos pages Web, il désactive également de nombreuses fonctionnalités utiles sur votre site Web. Les formulaires de contact sont l'une de ces fonctionnalités qui peuvent être considérées comme une grande perte. Étant donné que AMP utilise un ensemble limité de HTML et de JavaScript, il ne peut pas charger correctement vos formulaires WordPress sur les pages AMP. Heureusement, il existe une solution simple. WPForms est un plugin de formulaire WordPress plutôt convivial pour les débutants qui vous aide à créer des formulaires WordPress prêts pour AMP. Ainsi, dans l'article suivant, nous expliquerons en détail comment créer des formulaires AMP dans WordPress à l'aide de WPForms .

Apprenez à créer des formulaires AMP dans WordPress

Ainsi, AMP est plutôt utile pour rendre votre site Web adapté aux mobiles. Et, l'installation et l'activation du plugin AMP officiel pour WordPress est une condition préalable à l'utilisation d'AMP avec WordPress. Une fois que vous l'avez 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 à AMP > Général depuis votre tableau de bord. Lorsque vous êtes sur la page des paramètres AMP, vous pouvez activer ou désactiver AMP sur votre site Web, mais également choisir un mode de site Web pour AMP et choisir des modèles pris en charge. Après avoir configuré AMP, vous devrez créer un formulaire de contact compatible AMP sur votre site WordPress.

Créer un formulaire WordPress avec WPForms

Pour lancer le processus, vous devrez installer et activer le plugin WPForms Lite sur votre site. Il s'agit de la version allégée du plugin WPForms Pro. Les versions pro et lite de WPForms vous permettent de créer un formulaire de contact de base prêt pour AMP. Ici, nous parlerons de la version gratuite. Après avoir installé et activé le plugin, vous devrez vous diriger vers WPForms > Ajouter une nouvelle page pour créer un nouveau formulaire WordPress. Lorsque vous serez sur l'écran de configuration du formulaire, vous pourrez choisir un modèle de formulaire pour démarrer rapidement.

Si vous souhaitez repartir de zéro, nous vous suggérons d'opter pour le formulaire vierge. Il ouvrira ensuite la page du générateur de formulaires. À partir de là, vous pouvez ajouter ou supprimer des champs de formulaire. Pour ajouter un nouveau champ à votre formulaire, cliquez simplement sur un champ de formulaire dans le panneau de gauche, et il apparaîtra dans le panneau de création de formulaire sur votre droite. Une fois que vous avez terminé, vous pouvez configurer les options de champ. Pour ce faire, cliquez sur un champ, puis les options de champ apparaîtront. De la même manière, vous pouvez personnaliser tous les autres champs.

Après cela, cliquez sur l'onglet Paramètres pour configurer les paramètres de votre formulaire. Grâce aux paramètres généraux, vous pouvez modifier le nom de votre formulaire, soumettre le texte du bouton, soumettre le texte de traitement du bouton, activer le Honeypot anti-spam, etc. Accédez à l'onglet Notifications pour configurer des notifications par e-mail qui vous permettront de savoir quand un utilisateur remplit le formulaire. L'onglet Confirmations vous aidera à configurer un message de confirmation à afficher lorsqu'un utilisateur soumet le formulaire. Une fois la configuration terminée, assurez-vous d'enregistrer votre formulaire.

Ajouter un formulaire AMP à une page

Une fois que votre formulaire WordPress est prêt, vous pouvez l'ajouter à une page. Vous devrez d'abord créer une nouvelle page ou en ouvrir une existante sur laquelle vous souhaitez ajouter le formulaire. Ouvrez l'écran d'édition de votre page, cliquez sur l'icône Ajouter un nouveau bloc et sélectionnez le bloc WPForms. Ce faisant, vous pourrez voir le widget WPForms ajouté à l'écran d'édition de votre page. Il vous suffit de sélectionner le formulaire que vous avez créé précédemment, et le widget le chargera immédiatement dans l'éditeur de pages. Vous pouvez également publier ou mettre à jour votre page. Et c'est tout. Vous n'avez rien à configurer d'autre. Le plug-in WPForms Lite ajoutera désormais une prise en charge AMP complète à votre formulaire. Si vous êtes intéressé par son apparence, vous pouvez ouvrir la page sur votre téléphone mobile.

Comment ajouter google reCAPTCHA à votre formulaire AMP

WPForms inclut un pot de miel anti-spam pour attraper et bloquer le spam par défaut. De plus, vous pouvez utiliser Google reCAPTCHA pour réduire les soumissions de spam. Afin d'utiliser Google reCAPTCHA avec vos formulaires AMP, vous allez devoir enregistrer votre site pour Google reCAPTCHA v3 et obtenir les clés API Google. Pour ce faire, rendez-vous sur le site Web de Google reCAPTCHA et cliquez sur le bouton "Console d'administration" dans le coin supérieur droit de la page. Vous devrez ensuite vous connecter avec votre compte Google. Ce faisant, vous verrez la page « Enregistrer un nouveau site ». Commencez à le remplir en saisissant le nom de votre site Web dans le champ Libellé. Google AMP ne prend en charge que reCAPTCHA v3, vous devrez donc le choisir parmi les options de type reCAPTCHA.

Une fois que vous avez terminé, entrez votre nom de domaine dans la section Domaines. La section Propriétaires affichera votre adresse e-mail par défaut. Sachez que vous pouvez également ajouter un autre email si vous le souhaitez. Ensuite, vous devrez accepter les conditions d'utilisation de reCAPTCHA pour continuer. N'oubliez pas non plus de cocher la case "Envoyer les modifications aux propriétaires". Cela permettra à Google de vous informer des problèmes tels qu'une mauvaise configuration et un trafic suspect sur votre site. Une fois que vous avez terminé, cliquez sur le bouton Soumettre. Vous verrez alors un message de réussite avec la clé du site et la clé secrète pour ajouter reCAPTCHA sur votre site. Cette clé vous permet d'ajouter reCAPTCHA à vos formulaires.

Ajustements supplémentaires

Cependant, il y a un autre réglage dont vous devez vous occuper. Cela assurera la compatibilité AMP avec le reCAPTCHA. Pour y accéder, cliquez sur le lien "Aller aux paramètres". Cela vous amènera à nouveau aux 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, accédez à la page WPForms > Paramètres > reCAPTCHA dans votre tableau de bord WordPress. Choisissez ensuite l'option reCAPTCHA v3 et collez la clé du site et la clé secrète. Cliquez sur le bouton Enregistrer les paramètres. Maintenant que Google reCAPTCHA est ajouté à WPForms, vous êtes libre de l'activer dans vos formulaires si nécessaire. Accédez à WPForms > Tous les formulaires et sélectionnez le formulaire dans lequel vous souhaitez activer le reCAPTCHA. Lorsque l'écran de configuration du formulaire apparaît, cliquez sur l'onglet Paramètres et sélectionnez la section Paramètres généraux. Vous verrez la case à cocher "Activer Google v3 reCAPTCHA". Cochez cette case et enregistrez votre formulaire. Après cela, revenez sur votre page de contact et voyez le formulaire AMP avec reCAPTCHA en action.

Pas tant que ça

Comme vous pouvez le voir, pour créer des formulaires AMP dans WordPress, vous n'avez pas besoin de beaucoup de problèmes. Surtout quand vous avez ce guide à vos côtés. Nous espérons que nous vous avons aidé et que vous verrez tous les avantages des formulaires AMP après avoir suivi ces quelques étapes simples.