Comment créer des formulaires AMP dans WordPress (la manière facile)

Nous avons entendu de nombreux propriétaires de sites WordPress qui partagent la même frustration. Leurs formulaires sont corrects, mais sur les pages AMP, ils se chargent trop lentement ou ne fonctionnent tout simplement pas.

Un propriétaire de petite entreprise nous a même raconté comment ses clients abandonnaient leur formulaire de commande car il mettait une éternité à se charger sur mobile.

Des histoires comme celles-ci nous ont inspirés à trouver une solution simple. Une approche que tout le monde peut utiliser pour créer des formulaires compatibles AMP sans maux de tête ni codage.

Après avoir essayé de nombreux plugins et méthodes, nous avons découvert un moyen fiable de créer des formulaires rapides et adaptés aux mobiles qui fonctionnent réellement.

Dans ce guide, nous vous expliquerons la manière la plus simple de créer des formulaires AMP pour votre site WordPress, étape par étape. Que vous souhaitiez un formulaire de contact, un sondage ou un formulaire de commande qui se charge instantanément sur mobile.

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'une d'entre elles est les formulaires de contact. Étant donné que l'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 pouvez utiliser l'un des nombreux thèmes WordPress réactifs qui offrent d'excellentes performances sur ordinateur et mobile. De cette façon, vous n'avez pas à faire de compromis sur le style de votre site Web pour offrir une expérience supérieure sur mobile.

Cependant, si vous utilisez AMP sur votre site WordPress, vous pouvez utiliser un plugin pour afficher les formulaires. Voici un bref aperçu de tous les sujets que nous aborderons dans ce guide :

• Ajout de formulaires AMP dans WordPress (étape par étape)
• Ajout de Google reCAPTCHA à votre formulaire AMP
• Astuce bonus : Rendez votre site WordPress adapté aux mobiles

Allons-y !

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 le plugin de formulaire de contact WordPress le plus convivial pour les débutants qui vous aide à créer des formulaires WordPress prêts pour l'AMP. Leur équipe a travaillé avec Google pour faciliter la création de formulaires AMP pour WordPress.

Étape 1 : Installer et activer le plugin WPForms

Pour ce tutoriel, nous utiliserons la version Pro de WPForms car elle offre plus de fonctionnalités, des outils d'IA, des modèles de formulaires, des extensions et des options de personnalisation. Il existe également une version WPForms Lite que vous pouvez utiliser pour commencer gratuitement.

Les versions Lite et 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 le plugin WPForms. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Étape 2 : Ajouter AMP à votre site WordPress

Avant de créer un formulaire, il est important que vous ayez configuré AMP sur votre site WordPress.

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 comment 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 » Paramètres 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.

Pour plus de détails, consultez notre guide sur comment 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.

Étape 3 : Créer un nouveau formulaire AMP dans WPForms

Rendez-vous simplement sur la page WPForms » Ajouter 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 paramètres spéciaux.

Sur l'écran de configuration du formulaire, vous pouvez commencer par nommer votre formulaire.

Ensuite, vous choisirez comment vous allez construire le formulaire.

Vous pouvez sélectionner le formulaire vierge si vous souhaitez commencer à partir de zéro. Si vous préférez l'option plus facile et plus rapide, vous pouvez utiliser le générateur de formulaires IA. Cela vous permettra de créer votre formulaire avec une simple invite.

Ou, utilisez un modèle prédéfini que vous pouvez modifier rapidement selon vos besoins. WPForms Pro est livré avec plus de 2 000 modèles pré-faits parmi lesquels vous pouvez choisir !

Pour ce tutoriel, nous choisirons le modèle 'Formulaire de contact simple'.

Ensuite, vous verrez la page du constructeur de formulaires, où il existe différentes options pour personnaliser votre modèle.

À partir d'ici, 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 du panneau de gauche et le faire glisser sur le modèle de formulaire.

Après cela, vous pourrez configurer les options des champs.

Cliquez simplement sur un champ, puis « Options du champ » apparaîtra sur la gauche.

Par exemple, vous pouvez modifier l'étiquette et le format d'un champ, en faire un champ obligatoire, configurer la logique conditionnelle, et plus encore. De même, vous pouvez personnaliser tous les autres champs.

Vous pouvez également ajouter d'autres champs à vos formulaires. WPForms propose des champs de base comme le menu déroulant et le curseur, ainsi que des champs plus avancés comme le sélecteur de date et la séparation de page.

Faites simplement glisser et déposez les types de champs du panneau de gauche vers la droite, ou réorganisez-les dans l'aperçu du formulaire en les faisant glisser vers le haut ou vers le bas.

Après cela, vous pouvez cliquer sur l'onglet « Paramètres » pour configurer les paramètres de votre formulaire.

Les paramètres « Général » vous permettent de modifier le nom de votre formulaire, le texte du bouton de soumission, le texte de traitement du bouton de soumission, et plus encore.

Ensuite, vous pouvez cliquer sur l'onglet « Notifications » pour configurer les notifications par e-mail pour vous informer lorsqu'un utilisateur complète le formulaire.

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

WPForms vous permet d'afficher un message, d'afficher une page ou de rediriger les utilisateurs vers une URL lors de la soumission du formulaire.

Une fois la configuration terminée, vous pouvez enregistrer votre formulaire.

Étape 4 : Ajoutez votre formulaire AMP à une page

Maintenant que votre formulaire est prêt, vous pouvez l'ajouter à votre site WordPress.

Dans le constructeur de formulaires WPForms, vous verrez un bouton « Intégrer » en haut. Cliquez simplement dessus pour ajouter votre formulaire à une nouvelle page ou à une page existante.

Ensuite, une fenêtre contextuelle s'ouvrira, 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.

Ensuite, vous devrez entrer un nom pour votre nouvelle page de formulaire.

Une fois que c'est fait, cliquez simplement sur le bouton ‘Allons-y’ (Let’s Go).

À partir d'ici, vous verrez un aperçu de votre formulaire AMP dans l'éditeur de contenu.

Alternativement, vous pouvez également utiliser le bloc WPForms pour ajouter le formulaire dans l'éditeur de contenu.

Sélectionnez votre formulaire AMP dans le menu déroulant.

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

C'est tout ! Vous n'avez rien d'autre à configurer. Le plugin WPForms ajoutera désormais un support AMP complet à votre formulaire.

Si vous souhaitez voir à quoi cela ressemble, vous pouvez ouvrir la page sur votre téléphone portable. Ou vous pouvez 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 de Google reCAPTCHA à votre formulaire AMP

Par défaut, WPForms inclut des paramètres anti-spam pour détecter 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.

Tout d'abord, vous devrez vous rendre sur le site web Google reCAPTCHA et cliquer sur le bouton « v3 Admin Console » en haut à droite de la page.

Après cela, vous devrez vous connecter avec votre compte Google. Une fois terminé, vous verrez la page « Enregistrer un nouveau site ».

Ensuite, vous devrez entrer le nom de votre site web dans le champ Libellé. Google AMP ne prend en charge que reCAPTCHA v3, vous devez donc choisir l'option de type reCAPTCHA « Basé sur le score (v3) ».

Après cela, entrez votre nom de domaine (sans https://www.) dans le champ Domaines.

Ensuite, cliquez sur le bouton « Soumettre ».

Ensuite, vous verrez un message de succès ainsi que la clé de site et la clé secrète pour ajouter reCAPTCHA à votre site.

Copiez simplement ces clés.

Maintenant, vous avez les clés API Google pour ajouter reCAPTCHA à vos formulaires. Cependant, un autre réglage est nécessaire pour assurer la compatibilité AMP avec reCAPTCHA.

Tout d'abord, vous devrez cliquer sur le lien « Accéder 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 avez les clés API Google pour ajouter reCAPTCHA aux formulaires AMP, vous devez les saisir dans WPForms.

Vous pouvez ouvrir la page WPForms » Paramètres » CAPTCHA dans votre tableau de bord WordPress.

Ensuite, vous pouvez faire défiler vers le bas et choisir l'option « reCAPTCHA v3 ».

Après cela, collez simplement la clé de site et la clé secrète. Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer les paramètres ».

Maintenant que Google reCAPTCHA est ajouté à WPForms, vous pouvez l'activer dans vos formulaires si nécessaire.

Accédez à WPForms » Tous les formulaires et sélectionnez le formulaire où vous souhaitez activer reCAPTCHA. Cliquez simplement sur le bouton « Modifier » sous le nom du formulaire.

Une fois l'écran de configuration du formulaire apparu, cliquez sur l'onglet « Paramètres » et sélectionnez l'onglet « Protection contre le spam et sécurité ».

À partir de là, activez simplement l'option Google v3 reCAPTCHA.

Une fois cela 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.

Astuce bonus : Rendez votre site WordPress adapté aux mobiles

Créer des formulaires AMP est un excellent début, mais rendre l'ensemble de votre site adapté aux mobiles améliorera encore votre expérience utilisateur. Voici quelques conseils rapides :

• Utilisez un menu de navigation adapté aux mobiles : Facilitez la navigation sur votre site et aidez les visiteurs à trouver ce dont ils ont besoin, même sur les petits écrans.
• Ajustez l'emplacement et la taille de vos boutons d'appel à l'action : Assurez-vous que vos boutons d'appel à l'action sont faciles à toucher et visibles sans avoir à faire défiler trop loin.
• Priorisez la vitesse de votre site web : Compressez les images et utilisez des plugins de mise en cache pour réduire les temps de chargement.

Un site optimisé pour mobile maintient l'engagement des visiteurs et vous aide à obtenir plus de conversions de vos formulaires !

Pour plus de détails, vous pouvez consulter notre guide sur comment créer un site WordPress adapté aux mobiles.

Nous espérons que cet article vous a aidé à apprendre comment créer facilement des formulaires AMP dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer des formulaires conformes au RGPD dans WordPress et nos sélections d'experts des meilleurs constructeurs de formulaires en ligne.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.