Comment créer un formulaire de contact dans WordPress avec Elementor

Introduction

Créer un formulaire de contact sur votre site web est essentiel pour que les visiteurs puissent vous contacter sans avoir à fouiller dans les adresses e-mail ni à coder. Ce n’est pas sorcier, mais Elementor peut parfois être un peu capricieux, surtout si vous débutez. Voici donc une méthode simple pour créer un formulaire de contact performant sur votre site WordPress avec Elementor. Le principe est principalement du glisser-déposer, mais ne soyez pas surpris si les choses bougent parfois : WordPress et Elementor sont difficiles à appréhender.

Avant de vous lancer, assurez-vous d’avoir :

• Un site Web WordPress avec un hébergement qui fonctionne réellement.
• Le plugin Elementor est installé et activé (Elementor Pro est presque indispensable pour utiliser le widget de formulaire).Si vous utilisez toujours l’offre gratuite, vous devrez passer à la version Pro ou trouver une solution de contournement.

Étape 1 : Installer Elementor

Si Elementor n’est pas encore installé (ou s’il agit bizarrement), voici un bref aperçu :

1. Connectez-vous à votre tableau de bord d’administration WordPress.
2. Allez dans Plugins > Ajouter un nouveau.
3. Recherchez Elementor. Lorsqu’il apparaît, cliquez sur « Installer maintenant » puis sur « Activer ».
4. Si vous souhaitez bénéficier de toutes les fonctionnalités, rendez-vous sur le site web d’Elementor. Choisissez un forfait, achetez une licence, puis suivez les instructions d’installation. Les licences peuvent parfois être un peu instables ; ne soyez donc pas surpris si l’activation nécessite plusieurs essais.

Étape 2 : Créez une nouvelle page pour votre formulaire de contact

Il vous faut une page blanche pour votre formulaire de contact. Voici un bref aperçu :

1. Tableau de bord > Pages > Ajouter un nouveau.
2. Nommez-le quelque chose comme « Contactez-nous ». Honnêtement, restez simple.
3. Cliquez sur « Créer un brouillon », puis sur « Modifier avec Elementor ». Cela ouvre la partie amusante.

Étape 3 : Ajouter une nouvelle section

À l’intérieur de l’éditeur Elementor :

1. Cliquez sur l’ icône plus (+) pour ajouter une section.
2. Choisissez une mise en page à une seule colonne si vous souhaitez que le formulaire soit bien centré.

Étape 4 : Ajouter un widget de formulaire de contact

C’est là que les choses peuvent devenir un peu frustrantes si vous utilisez la version gratuite, car le widget Formulaire est réservé à la version Pro. Si vous utilisez la version Pro, procédez comme suit :

1. Dans le panneau Elementor, recherchez le widget Formulaire (il se trouve dans Elementor Pro).
2. Faites-le glisser et déposez-le dans votre nouvelle section : facile, n’est-ce pas ?

Si vous n’avez pas Pro, vous aurez besoin d’un plugin de formulaire tiers ou essayez d’intégrer un formulaire de contact à partir d’un autre service (comme WPForms ou Contact Form 7), mais c’est une autre histoire.

Étape 5 : Personnalisez vos champs de formulaire

Le formulaire par défaut devrait contenir un nom, une adresse e-mail et un message, soit les informations de base. Vous pouvez les modifier :

1. Cliquez sur chaque champ pour modifier les étiquettes, indiquer si elles sont obligatoires ou ajouter un texte d’espace réservé.
2. Vous avez d’autres idées ? Ajoutez des champs comme le numéro de téléphone, l’objet ou un menu déroulant. Il vous suffit de faire glisser les nouveaux champs selon vos besoins.

Étape 6 : Configurer les paramètres du formulaire

Voici la partie importante : configurer le fonctionnement réel du formulaire une fois que les utilisateurs ont cliqué sur « Envoyer » :

• Sous Actions après la soumission, vous devez vous assurer que l’option E-mail est sélectionnée pour pouvoir recevoir des alertes.
• Cliquez sur l’icône en forme de roue dentée pour ouvrir les paramètres, puis saisissez l’adresse e-mail à laquelle vous souhaitez recevoir les soumissions. Attention : les fautes de frappe peuvent entraîner des messages manqués. Par exemple, utilisez [email protected].
• Si la situation devient étrange, vérifiez la configuration de votre messagerie (l’hébergement peut parfois la rendre inopérante).Sur certains hébergeurs, la messagerie WordPress peut être instable, sauf si vous configurez les paramètres SMTP. Recherchez une extension comme WP Mail SMTP si nécessaire.
• Vous pouvez également ajouter un message de confirmation ou rediriger les visiteurs vers une page de remerciement après l’envoi de leur message. Sur un hébergement mutualisé, cette étape peut parfois échouer silencieusement ; testez-la donc minutieusement.

Étape 7 : stylisez votre formulaire de contact

Faites en sorte que cela ait l’air décent sans en faire trop :

• Ajustez les couleurs, les polices, les bordures, tout ce qui correspond à votre site, sous l’ onglet Style.
• Honnêtement, la réactivité mobile peut parfois être incertaine. Utilisez les modes d’affichage réactifs d’Elementor ( Mode réactif dans le panneau inférieur) pour optimiser l’apparence sur téléphones et tablettes.

Étape 8 : Assurez-vous que le rendu est correct sur les téléphones

En parlant de mobile, vérifiez que votre formulaire n’est pas trop écrasé ou illisible :

1. Basculez entre les vues de bureau, de tablette et de mobile dans Elementor.
2. Ajustez l’espacement, la taille des polices ou des boutons si nécessaire. Parfois, cela fonctionne immédiatement, parfois moins bien, car WordPress rend la tâche plus complexe que nécessaire.

Conseils supplémentaires et problèmes courants

Voici quelques éléments qui m’ont parfois fait trébucher :

• Si le formulaire n’envoie pas d’e-mails, essayez d’installer un plugin SMTP comme WP Mail SMTP. Sur certains hébergements, PHP mail() n’est pas fiable ; cette étape est donc souvent cruciale.
• Vous utilisez des objets d’e-mail dynamiques incluant le nom du visiteur ? Il vous suffit de modifier le modèle d’e-mail ou d’ajouter un champ personnalisé. Je ne sais pas pourquoi cela fonctionne, mais cela permet d’organiser les e-mails.
• Testez toujours après la publication : rien n’est plus frustrant que de penser que cela fonctionne, puis de réaliser que ce n’est pas le cas.

Conclusion

Si vous êtes arrivé jusqu’ici, félicitations ! Vous disposez désormais d’un formulaire de contact fonctionnel, esthétique et qui envoie des notifications. Elementor peut parfois poser problème, notamment en cas de problèmes d’hébergement ou de conflits de plugins, mais quelques ajustements suffisent généralement. N’oubliez pas : si quelque chose ne fonctionne pas, vérifiez vos paramètres de messagerie, les conflits de plugins ou les limitations d’hébergement.

Questions fréquemment posées

Puis-je utiliser la version gratuite d’Elementor pour créer un formulaire de contact ?

Pas vraiment. La version gratuite n’inclut pas le widget Formulaire ; il faudrait donc utiliser des plugins externes ou du code intégré. C’est une toute autre histoire.

Comment puis-je m’assurer d’être averti lorsque quelqu’un soumet un formulaire ?

Vérifiez que votre adresse e-mail est correcte dans les paramètres du formulaire et que l’action e-mail est activée. Si cela ne fonctionne toujours pas, envisagez de configurer le protocole SMTP (comme avec WP Mail SMTP), car l’hébergement de messagerie peut être peu fiable.

Que faire si mon formulaire de contact n’envoie tout simplement pas d’e-mails ?

La plupart du temps, il s’agit de problèmes de serveur ou de configuration de messagerie. L’installation d’un plugin SMTP peut s’avérer utile. Assurez-vous également que l’adresse e-mail du destinataire n’est pas dans les spams ou bloquée.