Comment créer des formulaires AMP dans WordPress (la méthode la plus simple)

Avez-vous entendu parler des pages mobiles accélérées (AMP) ? Accelerated Mobile Pages (AMP) de Google peut aider à accélérer votre site et à offrir une expérience utilisateur rapide sur les appareils mobiles.

Cependant, AMP retire différents éléments de votre site pour en améliorer les performances. Il s’agit notamment des formulaires WordPress.

Un moyen simple de contourner ce problème est de créer des formulaires qui sont supportés par AMP. D’après notre expérience, la façon la plus simple de le faire est d’utiliser WPForms.

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, vos formulaires WordPress ne peuvent pas se charger 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 de contact 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.

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 notre choix d’experts des meilleurs plugins d’enquête pour WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.