Comment créer un formulaire de contact Elementor gratuit (la méthode facile)

Voulez-vous créer un formulaire de contact Elementor gratuit ?

Un formulaire de contact est essentiel pour tous les types de sites web. En incluant les champs appropriés dans votre formulaire, vous pouvez collecter les informations exactes dont vous avez besoin de la part de vos prospects, garantissant ainsi une communication efficace.

Dans ce tutoriel, je vais vous montrer la meilleure façon d'ajouter un formulaire de contact à votre page Elementor gratuitement. Cette option fonctionne très bien avec toutes les versions d'Elementor, et elle est complètement « sans code » !

Comment créer un formulaire de contact Elementor gratuit

Elementor facilite la conception d'une page de contact, mais il ne vous fournira pas de formulaire de contact fonctionnel gratuitement par lui-même. Vous le combinerez avec un plugin de formulaire gratuit pour gérer le formulaire lui-même, et l'ensemble de la configuration prend environ cinq minutes du début à la fin.

La raison pour laquelle vous avez besoin d'un second plugin est une question de coût. Le widget de formulaire intégré d'Elementor est verrouillé derrière Elementor Pro, la version payante, et Elementor gratuit n'inclut pas du tout de formulaire de contact.

Ainsi, au lieu de mettre à niveau juste pour collecter des messages, vous en ajouterez un gratuitement avec WPForms, qui fonctionne avec toutes les versions d'Elementor. Si vous souhaitez une analyse complète, voici comment Elementor Forms se compare à WPForms.

Étape 1 : Installer et activer WPForms

Pour ajouter un formulaire de contact à Elementor gratuitement, vous le combinerez avec un plugin de formulaire, et WPForms est celui que j'utilise à chaque fois.

C'est le constructeur de formulaires le plus convivial pour les débutants sur WordPress, et le constructeur par glisser-déposer a du sens dès que vous l'ouvrez.

Ce que j'aime le plus, c'est que la version gratuite WPForms Lite est plus que suffisante pour un formulaire de contact. L'intégration WPForms Elementor vous permet ensuite de déposer n'importe quel formulaire que vous créez directement sur une page Elementor.

La première chose que vous voudrez faire est d'installer le plugin WPForms. Pour ce faire, ouvrez votre tableau de bord WordPress et accédez à Plugins » Ajouter.

Maintenant, recherchez WPForms et cliquez sur Installer lorsque vous le trouvez. L'installation ne prendra que quelques secondes.

Une fois cela fait, le bouton Installer indiquera maintenant Activer. Appuyez sur Activer pour terminer la configuration de WPForms sur votre site. C'est aussi simple que ça !

Super ! WPForms est maintenant prêt à être utilisé sur votre site. Avant de créer votre premier formulaire, installons Elementor.

Essayez WPForms gratuitement

Étape 2 : Obtenir le plugin WordPress Elementor

Vous pouvez installer Elementor en suivant exactement les mêmes étapes que celles décrites ci-dessus. Allez simplement dans Plugins » Ajouter, recherchez Elementor et installez-le.

Une fois les installations terminées, vous pouvez maintenant créer votre formulaire de contact, comme nous le montrons à l'étape suivante.

Étape 3 : Créer votre formulaire de contact Elementor

Vous pouvez commencer immédiatement à créer votre formulaire de contact en accédant à WPForms » Ajouter.

Cela chargera l'éditeur WPForm en quelques secondes. Commencez par nommer votre formulaire afin de pouvoir l'identifier facilement si vous devez y apporter des modifications plus tard.

Faites défiler un peu vers le bas, et vous verrez les modèles de formulaire. Si vous utilisez WPForms Lite, vous aurez des dizaines de modèles gratuits parmi lesquels choisir.

Plus tard, vous pourrez passer à la version Pro pour accéder à plus de 2 100 modèles de formulaires WordPress pour le service client, le marketing et diverses autres catégories.

Puisque nous avons besoin d'un formulaire de contact, le modèle gratuit Simple Contact Form Template est idéal pour nos besoins dans cet article.

Vous pouvez rechercher ce modèle dans la boîte de recherche et cliquer sur le bouton Utiliser le modèle lorsqu'il apparaît à l'écran.

Après avoir choisi un modèle, l'éditeur WPForms s'ouvrira. L'interface utilisateur de WPForms est conçue pour être très facile à utiliser par n'importe qui.

Sur la gauche, vous pouvez voir tous les champs disponibles à ajouter à votre formulaire de contact. Sur la droite, vous pouvez voir un aperçu en direct de votre formulaire.

Si vous souhaitez personnaliser le modèle, faites simplement glisser n'importe quel champ du panneau de gauche vers le formulaire de droite.

Vous pouvez ajouter des listes déroulantes et des questions à choix multiples, et également faire glisser des champs de haut en bas pour les déplacer sur votre formulaire.

Si vous souhaitez ouvrir les paramètres du champ, cliquez une fois sur le champ dans le constructeur. Les paramètres apparaîtront à côté de l'aperçu du formulaire dans le panneau de gauche.

Cliquez sur chaque champ pour le configurer comme vous le souhaitez. Lorsque vous avez terminé, cliquez sur Enregistrer en haut.

Vous créez plutôt un formulaire d'inscription ? Nous avons un tutoriel séparé pour créer un formulaire d'inscription Elementor personnalisé.

Il existe toutes sortes de commodités dont vous pouvez profiter avec WPForms. Par exemple, vous pouvez même l'utiliser comme passerelle pour connecter Elementor Forms à Google Sheets !

Étape 4 : Configurer l'e-mail et le message de confirmation du formulaire

Vérifions maintenant les messages qui seront envoyés lorsque le formulaire sera soumis. Dans le constructeur de formulaire, cliquez sur Paramètres, puis sur l'élément de menu Notifications à gauche.

Sur la droite, vous pouvez voir l'e-mail de notification qui vous sera envoyé lorsque votre formulaire sera soumis. Vous pouvez personnaliser l'e-mail ici si vous le souhaitez.

Avez-vous remarqué que l'e-mail sera envoyé à {admin_email} ? C'est un espace réservé pour l'adresse e-mail de l'administrateur dans WordPress.

Vous pouvez supprimer {admin_email} et taper votre adresse e-mail professionnelle ici, ou modifier l'adresse e-mail de l'administrateur dans WordPress si elle est incorrecte.

Ensuite, cliquez sur Confirmations. Sur cet écran, nous pouvons personnaliser le message qui s'affiche sur le front-end lorsque le formulaire est soumis.

Ceci est facultatif, vous pouvez donc simplement laisser le message par défaut si vous en êtes satisfait.

Et voilà ! Il est temps de cliquer sur le bouton Enregistrer en haut. Vous pouvez fermer le constructeur de formulaire en cliquant sur le X en haut à droite de la fenêtre du constructeur de formulaire.

Excellent travail ! Votre formulaire Elementor est prêt, et nous devons juste le publier pour le rendre actif et commencer à collecter des informations.

Étape 5 : Créez votre page Contactez-nous Elementor

Dans cette étape, nous allons créer une page de contact personnalisée en utilisant Elementor. Depuis le tableau de bord WordPress, cliquez sur Pages, puis sur le bouton Ajouter.

Allez-y et tapez le titre de votre page en haut. Après cela, cliquez sur le bouton bleu Modifier avec Elementor.

Cela lancera l'interface du constructeur de pages Elementor, où vous pourrez ajouter un formulaire de contact et personnaliser d'autres éléments de la page.

Attendez quelques secondes que Elementor se charge dans votre navigateur. Sur la gauche, vous verrez différents éléments que vous pouvez ajouter à votre page.

Regardez sous la section Basique pour trouver le bloc WPForms, que vous pouvez utiliser pour ajouter le formulaire que vous avez créé précédemment.

Allez-y et faites glisser le bloc WPForms sur votre page, puis cliquez sur la liste déroulante pour sélectionner le formulaire que vous venez de créer.

Dès que vous sélectionnez le formulaire, il apparaîtra sur la page. Excellent travail ! Et nous avons terminé avec le constructeur de formulaire. Tout ce que nous avons à faire maintenant est de publier la page de contact.

Étape 6 : Stylisez et publiez votre page Contactez-nous Elementor

La publication de la page de contact est un jeu d'enfant avec Elementor. Mais saviez-vous que vous pouvez également styliser votre formulaire en utilisant les options du bloc WPForms d'Elementor ?

Pour ce faire, cliquez sur la zone autour du formulaire intégré sur votre page pour ouvrir les options de bloc dans le volet de gauche. Cliquez ensuite sur l'onglet Style.

Sous cet onglet, vous verrez les nombreux Thèmes proposés qui contiennent l'image d'arrière-plan, les couleurs et d'autres options de style prêtes à l'emploi.

Ou, vous pouvez utiliser les options ci-dessous pour modifier manuellement les styles de votre champ, de votre étiquette ou de votre bouton.

Par exemple, nous avons utilisé les paramètres Styles de bouton pour augmenter la taille, le rayon du bord et la couleur du bouton en quelques clics seulement.

Vous pouvez accéder à des options encore plus avancées en cliquant sur l'onglet Avancé. Cela inclut les paramètres de mise en page du formulaire, les effets de mouvement, les arrière-plans de page, et plus encore.

Une fois que vous avez terminé de personnaliser les styles du formulaire, il est temps de publier votre formulaire. Cliquez simplement sur le bouton Publier dans la barre d'outils inférieure.

Enfin, cliquez sur Jeter un œil pour voir votre formulaire de contact sur votre site Web. Et voilà ! Votre page de contact Elementor est en ligne et prête à recevoir des réponses.

Créez votre formulaire de contact Elementor gratuit

Rendez votre formulaire de contact Elementor à l'épreuve du spam

Un formulaire de contact public attirera le spam tôt ou tard, donc le sécuriser avant que les robots ne le trouvent vous évitera un nettoyage plus tard. La bonne nouvelle est que chaque formulaire WPForms est livré avec une protection anti-spam intégrée activée par défaut.

Cela inclut un pot de miel anti-spam caché qui attrape les robots de base sans obliger vos visiteurs à résoudre un puzzle ennuyeux. Si votre formulaire commence à recevoir plus de spam que la protection par défaut ne peut en gérer, vous pouvez ajouter une autre couche.

WPForms prend également en charge un jeton anti-spam moderne, reCAPTCHA, hCaptcha et Cloudflare Turnstile dans ses plans payants, vous pouvez donc choisir la méthode qui convient à votre public.

Cette protection dès le premier jour est une excellente raison de choisir WPForms ici. Un formulaire de contact est l'une des cibles les plus faciles sur votre site pour les robots, et le pot de miel s'en occupe silencieusement de la plupart en arrière-plan.

Spécifiquement pour les utilisateurs d'Elementor, voici comment bloquer le spam sur vos formulaires Elementor avec Akismet.

FAQ sur la création d'un formulaire de contact Elementor

Les formulaires de contact Elementor reviennent souvent dans nos commentaires et demandes de support. Voici les réponses aux questions les plus fréquemment posées par les lecteurs.

Elementor a-t-il un formulaire de contact ?

Oui, mais uniquement dans la version payante. Le bloc de formulaire d'Elementor fait partie d'Elementor Pro, donc le plugin gratuit seul ne vous permettra pas de créer un formulaire de contact.

La bonne nouvelle est que vous pouvez en ajouter un gratuitement en utilisant le bloc WPForms à la place. Vous devrez avoir WPForms et Elementor installés pour accéder au bloc WPForms lors de la modification de votre page dans Elementor.

Comment ajouter un formulaire de contact dans Elementor gratuitement ?

Pour ajouter un formulaire de contact en utilisant la version gratuite d'Elementor, vous intégrez un plugin comme WPForms. D'abord, installez et activez le plugin WPForms depuis votre tableau de bord WordPress. Une fois activé, créez un formulaire en utilisant le constructeur WPForms, puis faites glisser le bloc WPForms sur votre page Elementor et sélectionnez votre formulaire.

Comment créer un formulaire dans Elementor ?

La création d'un formulaire dans Elementor peut être facilement réalisée avec le plugin WPForms. Installez WPForms depuis votre section de plugins WordPress et activez-le. Ensuite, utilisez l'interface glisser-déposer de WPForms pour construire votre formulaire avant de l'ajouter à n'importe quelle page Elementor.

Comment créer un formulaire de contact personnalisé dans Elementor ?

WPForms est une excellente option pour créer un formulaire de contact personnalisé dans Elementor en raison de sa flexibilité et de sa facilité d'utilisation. Après avoir installé et activé WPForms, ouvrez le plugin et sélectionnez Ajouter nouveau pour créer votre formulaire personnalisé.

Personnalisez votre formulaire en ajoutant ou en supprimant des champs selon vos besoins. Une fois que vous avez terminé, enregistrez le formulaire. Dans Elementor, ajoutez le bloc WPForms sur la page où vous souhaitez le formulaire, sélectionnez votre formulaire et publiez la page.

Corriger les e-mails de notification du formulaire de contact Elementor

Vous avez des problèmes pour recevoir les soumissions de formulaire de contact Elementor par e-mail ? Il est facile de résoudre ce problème afin que vous receviez toujours vos notifications par e-mail. Consultez ce guide pour corriger les formulaires de contact Elementor qui n'envoient pas d'e-mail.

Et si vous souhaitez en savoir plus sur d'autres constructeurs de formulaires pour Elementor, consultez cet article sur les plugins de formulaire de contact qui fonctionnent bien avec Elementor pour améliorer l'engagement des utilisateurs sur les formulaires et, à terme, votre génération de prospects.

Obtenir WPForms gratuitement

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.