Créer un formulaire sur son site internet avec ELEMENTOR - TUTO complet et détaillé
Dans ce tutoriel, Frede explique comment créer un formulaire de contact sur un site WordPress en utilisant Elementor Pro. Ce tuto clic par clic couvre tout : de l’installation des plugins nécessaires à la personnalisation avancée des champs du formulaire jusqu’à la phase detest pour vérifier que tout fonctionne.
Voici la vidéo complète que vous retrouverez également sur la chaîne YouTube Paf Pastèque :
Étapes pour créer un formulaire sur son site
Installation des Plugins
- Vérification des plugins : Assurez-vous que Elementor et Elementor Pro sont installés et activés sur votre site WordPress.
- Elementor : Plugin gratuit pour créer des pages avec un éditeur visuel.
- Elementor Pro : Version payante avec des fonctionnalités avancées, dont les formulaires. En savoir +
Création et Modification de Page
- Accéder à l’administration de WordPress :
- Créez une nouvelle page ou modifiez une page existante.
- Utilisez l’option « Modifier avec Elementor » pour ouvrir l’éditeur visuel.
Ajout du Widget Formulaire
- Ajouter le formulaire :
- Dans le panneau de gauche d’Elementor, cherchez le widget « Formulaire ».
- Glissez-déposez le widget dans la colonne souhaitée de votre page.
- Par défaut, le formulaire inclut les champs Nom, Email, Message et un bouton Envoyer.
Personnalisation des Champs
- Modifier les champs :
- Libellés : Cachez les libellés au-dessus des champs pour une apparence plus épurée.
- Champs supplémentaires : Ajoutez des champs comme Prénom, Téléphone, etc.
- Disposition : Ajustez la largeur des champs pour les afficher côte à côte (ex. Nom et Prénom).
- Ajout de nouvelles options :
- Boutons radio : Ajoutez des options de sélection multiples.
- Cases à cocher : Permettent de sélectionner plusieurs options.
- Listes déroulantes : Utilisez-les pour des choix multiples dans un menu déroulant.
Configuration Avancée
- Configurer le reCAPTCHA :
- Ajoutez un reCAPTCHA pour éviter le spam.
- Assurez-vous que le reCAPTCHA est correctement configuré et visible sur le formulaire.
Paramètres d’envoi d’email
- Configurer l’envoi des emails :
- Définissez l’adresse email de réception et le sujet du message.
- Spécifiez l’adresse email de l’expéditeur et configurez le champ de réponse.
Test et Finalisation
- Tester le formulaire :
- Sauvegardez les modifications et testez le formulaire pour vérifier son bon fonctionnement.
- Assurez-vous que toutes les informations sont correctement envoyées et reçues.
Conclusion
Et voilà, tout est prêt pour engager votre audience et récolter le fruit de vos efforts pour attirer du trafic sur votre site internet ! Pour aller plus loin, nous vous invitons à découvrir la formation « Je crée ma présence digitale en 21 jours » pour apprendre à créer un site internet complet.
FAQs
Q : Qu’est-ce que Elementor et Elementor Pro ?
Elementor est un plugin gratuit pour WordPress qui permet de créer des pages web avec un éditeur visuel. Elementor Pro est la version payante qui offre des fonctionnalités avancées, y compris la possibilité de créer des formulaires.
Q: Comment installer Elementor et Elementor Pro sur mon site WordPress ?
Accédez à votre tableau de bord WordPress, allez dans « Extensions » > « Ajouter », recherchez « Elementor » et « Elementor Pro », puis installez et activez les deux plugins. Elementor Pro nécessite une licence payante que vous pouvez acheter sur le site officiel d’Elementor.
Q : Puis-je créer un formulaire sans Elementor Pro ?
Non, la création de formulaires personnalisés nécessite Elementor Pro. La version gratuite d’Elementor ne supporte pas cette fonctionnalité. Si vous souhaitez passer par un autre plugin pour créer un formulaire, c’est tout a fait possible également. Mais cela va alourdir un peu plus la performance de votre site.
Q : Comment ajouter un formulaire à ma page avec Elementor ?
Après avoir installé et activé Elementor Pro, ouvrez l’éditeur Elementor, recherchez le widget « Formulaire » dans le panneau de gauche, et glissez-déposez-le dans la section souhaitée de votre page.
Q : Quels types de champs puis-je ajouter à mon formulaire ?
Vous pouvez ajouter divers types de champs tels que le texte, l’email, le téléphone, les boutons radio, les cases à cocher, les listes déroulantes, et plus encore.
Q : Comment configurer un reCAPTCHA dans mon formulaire ?
Ajoutez le widget reCAPTCHA à votre formulaire depuis l’éditeur Elementor et suivez les instructions pour configurer vos clés de site et secrètes via Google reCAPTCHA.
Q : Comment puis-je m’assurer que les emails sont envoyés correctement depuis mon formulaire ?
Vérifiez les paramètres d’envoi d’emails dans le widget formulaire. Assurez-vous que l’adresse email de réception est correcte et que les champs nécessaires sont configurés pour envoyer les données appropriées. N’hésitez pas à verifier également que les champs SPF, DKIM et DMARC sont configurés dans votre zone DNS de nom de domaine.
Q : Que faire si je ne reçois pas les emails de formulaire ?
Vérifiez les paramètres SMTP de votre site WordPress. Vous pouvez utiliser un plugin comme WP Mail SMTP pour configurer correctement l’envoi d’emails.
Q : Est-ce que je peux personnaliser l’apparence des champs de mon formulaire ?
Oui, vous pouvez personnaliser l’apparence des champs en utilisant les options de style dans l’éditeur Elementor pour ajuster les couleurs, les polices, les marges, et plus encore.
Q : Comment tester mon formulaire pour vérifier qu’il fonctionne correctement ?
Remplissez le formulaire comme le ferait un utilisateur et envoyez-le pour vérifier que vous recevez bien les informations à l’adresse email configurée. Testez également les validations de champ et les messages d’erreur.
Q : Où puis-je trouver des ressources supplémentaires pour apprendre à utiliser Elementor ?
Vous pouvez trouver des ressources supplémentaires sur le site officiel d’Elementor, y compris des tutoriels vidéo, des articles de blog, et une communauté active pour poser vos questions.
