Vous souhaitez créer des formulaires compatibles AMP sur votre site WordPress ?

Accelerated Mobile Pages ou AMP est un projet de Google qui accélère le chargement des sites Web sur les appareils mobiles.

Bien que 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 les formulaires de contact. É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.

Mais heureusement, il existe maintenant une solution simple. 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 faciliter les formulaires AMP pour WordPress.

Dans cet article, nous allons vous montrer comment créer des formulaires AMP dans WordPress en utilisant WPForms (le moyen le plus simple).

Création de formulaires AMP dans WordPress (en toute simplicité)

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 la prise en charge de 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.

Paramètres AMP pour WordPress

À 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 des 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éer un formulaire WordPress avec WPForms

Pour commencer, installez et activez le WPForms Lite plug-in 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 AMP. Dans notre article, nous utiliserons la version gratuite pour les captures d'écran.

Une fois le plugin installé et activé, vous devez vous diriger vers 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.

Modèles de formulaires WPForms

Ensuite, il ouvrira la page du générateur de formulaires.

Glisser-déposer Générateur de formulaires WPForms

À 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 à droite.

Après cela, vous pouvez configurer les options de champ. Cliquez simplement sur un champ, puis les options de champ apparaîtront.

Configuration des options de champ dans le plugin WPForms

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.

Paramètres généraux de WPForms

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 de traitement du bouton, d'activer l'anti-spam Honeypot, etc.

Ensuite, vous pouvez cliquer sur l'onglet Notifications pour configurer des notifications par e-mail pour vous avertir lorsqu'un utilisateur remplit le formulaire.

Paramètres de notification WPForms

Ensuite, vous pouvez cliquer sur l'onglet Confirmation pour configurer un message de confirmation à afficher lorsqu'un utilisateur soumet le formulaire.

Paramètres des messages de confirmation WPForms

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 en ouvrir une 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.

Ajouter le bloc WPForms à l'éditeur de page WordPress

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.

Ajouter un formulaire de contact à la page WordPress avec WPForms

Ensuite, vous pouvez publier ou mettre à jour votre page.

C'est tout! Vous n'avez rien d'autre à configurer. Le plug-in WPForms Lite ajoutera désormais une prise en charge AMP complète à 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.

Ajouter 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 à la Site Google reCAPTCHA et cliquez sur le bouton “Console d'administration” dans le coin supérieur droit de la page.

Visitez le site Web de Google reCAPTCHA

Après cela, vous devez vous connecter avec votre compte Google. Une fois cela fait, vous verrez la page ‘Enregistrer un nouveau site'.

Enregistrer un nouveau site pour Google reCAPTCHA

Tout d'abord, vous devez entrer le nom de votre site Web dans le champ Libellé. 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.

Ajouter un nom de domaine et un propriétaire pour Google reCAPTCHA

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”, ce qui permettra à Google de vous informer des problèmes tels qu'une mauvaise configuration et un trafic suspect sur votre site.

Accepter les conditions d'utilisation de Google reCAPTCHA

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.

Clés reCAPTCHA

Vous avez maintenant les clés de l'API Google pour ajouter reCAPTCHA à vos formulaires. Cependant, un ajustement supplémentaire est nécessaire pour assurer la compatibilité de l'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.

Autoriser reCAPTCHA à fonctionner sur les pages AMP

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.

WPForms reCAPTCHA Paramètres 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.

Modifier un formulaire créé avec WPForms

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

Activer Google v3 reCAPTCHA dans WPForms

Cochez la case puis enregistrez votre formulaire en cliquant sur le bouton Enregistrer dans le coin supérieur droit.

Après cela, vous pouvez revoir 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.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook