Support prioritaire
Help Center > Themes > Thème Hello biz > Formulaire simplifié

Formulaire simplifié

Dernière mise à jour : septembre 3, 2025

Ce post est une traduction automatique, il peut donc contenir des imprécisions ou des variations stylistiques par rapport au texte source. Nous vous prions de nous excuser pour tout inconvénient que cela pourrait causer. Veuillez nous contacter si vous avez besoin que nous vous apportions des précisions.

Ajouter le widget

Pour accéder et utiliser un widget :

  1. Dans l’éditeur Elementor, cliquez sur +.
    Tous les widgets disponibles sont affichés.

  2. Cliquez ou faites glisser le widget sur le canevas. Pour plus d’informations, consultez Ajouter des éléments à une page.

Qu'est-ce que le widget Formulaire simplifié ?

La collecte d’informations auprès des visiteurs peut être l’une des choses les plus importantes que votre site web puisse faire pour vous.

Le widget Formulaire simplifié vous permet de créer rapidement et efficacement un formulaire qui permet aux visiteurs de soumettre des informations qui vous sont envoyées par e-mail et stockées dans votre zone d’administration WordPress.

Découvrez toutes les options disponibles avec le widget Formulaire simplifié.

Cas d'utilisation courant

Alex souhaite accepter les réservations par e-mail pour son pub sportif. Il place un appel à l’action sur sa page d’accueil qui est lié à un formulaire de réservation. Lorsque les utilisateurs remplissent le formulaire avec une demande de réservation, celle-ci est envoyée à l’adresse e-mail du pub afin qu’Alex puisse réserver une table.

Cas d'utilisation supplémentaires

  • Faites remplir un formulaire aux visiteurs pour s’abonner à votre newsletter.
  • Collectez des candidatures à l’emploi à l’aide d’un formulaire sur votre site.
  • Les visiteurs de votre site peuvent soumettre un formulaire afin que l’un de vos représentants puisse les contacter.

Ajout d'un widget Formulaire simplifié : étape par étape

Dans l’exemple ci-dessous, nous allons créer un formulaire de réservation. Les clients souhaitant réserver une table remplissent le formulaire et lorsqu’ils le soumettent, le propriétaire du pub, Alex, recevra un e-mail. Les informations seront également disponibles dans la zone d’administration WordPress.

Ajouter un formulaire

Pour ajouter un widget Formulaire simplifié :

  1. Ajoutez un widget Formulaire simplifié au canevas.
  2. Sélectionnez l’un des modèles de formulaire prédéfinis.
  3. Ouvrez le champ Texte.
  4. Dans le panneau, dans la zone de texte Titre, saisissez Réservez maintenant !

  5. Dans la zone de texte Description, saisissez Garantissez votre place en nous envoyant une demande de réservation.
    Le widget Formulaire simplifié comporte par défaut des champs pour le nom, l’e-mail et le message. Cependant, nous aimerions également appeler les gens pour confirmer leur réservation, nous allons donc ajouter un champ Téléphone.
  6. Dans le panneau, ouvrez la section Champs du formulaire.
  7. Cliquez sur Ajouter un élément.
  8. Utilisez le menu déroulant Type, sélectionnez Tél.
  9. Dans le champ de texte Étiquette, saisissez Téléphone.
  10. Basculez obligatoire sur Oui.
  11. Faites glisser le nouveau champ pour qu’il se trouve sous le champ E-mail.
    Maintenant, nous allons nous assurer que les soumissions du formulaire vont au bon endroit.
  12. Fermez la section Champs du formulaire.
  13. Ouvrez le champ Actions après soumission.
  14. Dans le champ À, saisissez votre adresse e-mail.
  15. Dans la ligne Objet, saisissez Demande de réservation.

    Lorsque les utilisateurs soumettent leur formulaire en cliquant sur le bouton Envoyer, un e-mail est envoyé à l’adresse que vous avez saisie. La soumission est également stockée dans votre administration WordPress. Pour plus de détails, consultez Gérer les soumissions de formulaires.

Paramètres du widget Formulaire simplifié

Vous pouvez personnaliser vos widgets en utilisant le contenu, le style et d’autres paramètres avancés, vous offrant une grande flexibilité pour les adapter à vos besoins. Cliquez sur les onglets ci-dessous pour voir tous les paramètres disponibles pour le widget Formulaire.

Onglet Contenu

Ajoutez, supprimez et modifiez les champs du formulaire, les étapes, les boutons et les contrôles. Déterminez ce qui se passe après que les visiteurs aient soumis leurs réponses.

Sélectionnez l’un des modèles de formulaire pour commencer votre conception.

  • Titre : Saisissez un titre pour votre formulaire dans la zone de texte. Le titre doit être aussi court que possible, moins de cinq mots.
  • Balise HTML du titre : La balise HTML indique aux moteurs de recherche et aux logiciels d’accessibilité l’importance de l’élément. Nous recommandons de laisser le paramètre par défaut, mais vous pouvez utiliser le menu déroulant pour modifier la balise HTML.
  • Description : Saisissez tous les détails que vous souhaitez donner sur votre formulaire.

Donnez un nom à votre formulaire.

Modifiez et créez des champs pour votre formulaire. Chaque champ représente des données que vous collectez auprès de vos visiteurs, telles que Nom et E-mail.

Il y a deux icônes qui apparaissent à droite du nom du champ :

– Dupliquer cet élément de menu. L’utilisation de la copie aide à maintenir la cohérence dans votre menu.

– Supprimer cet élément de menu.

Lorsque vous cliquez sur un nom de champ, des options supplémentaires apparaissent sous deux onglets – Contenu et Avancé.

Dans l’onglet Contenu, les options suivantes sont disponibles :

  • Type : Définissez le type de champ pour aider à filtrer les données non pertinentes. Par exemple, en définissant le type sur e-mail, les visiteurs doivent soumettre des adresses e-mail valides. Voir Types de champs pour plus de détails.
  • Étiquette : Créez un nom pour le champ, tel que Nom, pour indiquer aux utilisateurs quelles informations saisir.
  • Texte de substitution : Également connu sous le nom de texte fantôme, c’est le texte qui apparaît dans le champ pour donner des informations plus détaillées sur le champ, par exemple, dans un champ appelé Films préférés, le texte fantôme pourrait être « Listez vos trois premiers choix. »
  • Obligatoire : Utilisez le commutateur pour déterminer si les utilisateurs doivent remplir ce champ pour soumettre le formulaire.
  • Largeur de colonne : Définissez l’espace que le champ occupera. Cela peut être utilisé pour les champs où vous attendez des réponses courtes ou si vous voulez que plusieurs champs apparaissent sur une ligne. Par exemple, si vous voulez que deux champs apparaissent sur une ligne, donnez-leur chacun une largeur de 50%.

Créez un champ vide pour votre formulaire.

Utilisez le commutateur pour soit Afficher soit Masquer le nom du champ.

Utilisez le commutateur pour soit Afficher soit Masquer si le champ est obligatoire ou non. La pratique standard est de marquer ces champs pour que les visiteurs sachent qu’ils doivent les remplir.

Largeur de colonne : Définissez la taille de la zone allouée au bouton. Cela affectera le placement du bouton.

Par exemple, si votre taille de colonne est de 100% et que vous alignez le bouton à droite, le bouton sera à droite. Cependant, si vous définissez une largeur de colonne de 50% et alignez le bouton à droite, il apparaîtra au centre du formulaire.

Le bouton Envoyer envoie les informations du formulaire au propriétaire du site web. Il est ajouté à la dernière page du formulaire.

Si vous ne voulez pas étiqueter le bouton Envoyer, utilisez la zone de texte pour saisir une étiquette différente.

Vous pouvez ajouter une petite image au bouton :

  • Pour aucune icône, cliquez sur .
  • Pour télécharger votre propre image .svg à utiliser comme icône, cliquez sur
  • Pour sélectionner une icône dans la bibliothèque, cliquez sur le symbole de l’icône.

Attribuez un ID à votre bouton pour pouvoir l’identifier plus tard. Cela aidera souvent dans le traitement des informations que vous collectez.

Basculez sur Oui si vous voulez montrer aux visiteurs une page différente après qu’ils aient soumis un formulaire. La page pourrait contenir un simple merci ou pourrait inclure des informations supplémentaires telles que : « Nous vous répondrons dans les 48 heures. »

Si vous basculez sur Oui, vous devrez ajouter l’URL de la page.

Lorsqu’un visiteur soumet un formulaire, vous pouvez recevoir les soumissions par e-mail. Utilisez cette section pour définir ces e-mails.

  • À : L’adresse e-mail où les soumissions seront reçues.
  • Objet : La ligne d’objet de l’e-mail qui sera envoyé à l’adresse e-mail dans le paramètre À.
  • Message : Tout texte et information du formulaire qui seront envoyés dans l’e-mail. Le paramètre par défaut est [all-fields], qui inclut toutes les informations du formulaire dans l’e-mail.
  • E-mail de l’expéditeur : Ajoutez l’e-mail à partir duquel l’e-mail sera envoyé.
  • Nom de l’expéditeur : Déterminez sous quel nom l’e-mail sera envoyé. Cela peut vous aider à filtrer ces e-mails plus tard.
  • Répondre à : Modifiez cette adresse e-mail si vous voulez répondre à ces e-mails et que ces réponses soient envoyées à une adresse différente.
  • Cc : Envoyez une copie de ces e-mails à une autre adresse.
  • Cci : Envoyez une copie cachée de ces e-mails à une autre adresse.
  • Métadonnées : Par défaut, les e-mails envoyés par le formulaire incluent des métadonnées telles que l’heure, la date, l’URL de la page, l’agent utilisateur (informations sur le navigateur), l’IP distante (adresse IP de la personne soumettant le formulaire), le crédit (le logiciel qui a créé le formulaire).
  • Envoyer comme : Utilisez le menu déroulant pour déterminer si l’e-mail envoyé par le formulaire est au format HTML ou texte brut.

Pour les utilisateurs d’Elementor Pro uniquement.

Activez On pour activer la fonctionnalité de soumission de formulaires. Cette fonctionnalité vous permet d’accéder aux soumissions de formulaires depuis WP Admin>Elementor>Soumissions.

Le code personnalisé peut parfois nécessiter que vous donniez un ID à votre formulaire.

Assurez-vous que votre ID de formulaire est unique.

En général, les navigateurs ont déjà des messages intégrés pour les soumissions de formulaires indiquant le succès ou les erreurs de formulaire.

Activer Messages personnalisés sur Oui vous permet de créer vos propres messages qui s’afficheront au cas où le navigateur du visiteur ne fournirait pas ces messages ou si les messages ne s’affichaient pas pour une raison quelconque.

Onglet Style

Déterminez l’apparence des éléments de menu et des contrôles.

Déterminez si le titre et la description apparaîtront à droite, à gauche ou au centre du formulaire.

Contrôlez l’apparence du Titre.

Contrôlez l’apparence de la Description.

Contrôlez la mise en page de votre formulaire.

  • Espacement des colonnes : Si votre formulaire a plus d’une colonne, utilisez le curseur pour définir l’espace entre les colonnes. Cela se produit lorsqu’il y a plus d’un champ dans une rangée.
  • Espacement des rangées : Utilisez le curseur pour augmenter ou diminuer l’espace entre les champs.

Contrôlez l’apparence des étiquettes du formulaire.

Cette section détermine l’apparence des champs du formulaire. Cela inclut le texte de l’espace réservé, la bordure du champ et plus encore.

  • Couleur du texte : Définissez la couleur du texte de l’espace réservé. Pour plus de détails, voir Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Typographie : Définissez la taille et le type de police du texte de l’espace réservé. Pour plus de détails, voir Typographie.
  • Couleur de fond : Définissez la couleur de la boîte du champ.
  • Pour plus de détails, voir Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Bordure : Activez sur Oui si vous voulez une bordure autour du champ.
  • Couleur de la bordure : Définissez une couleur pour la bordure du champ. Pour plus de détails, voir Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Largeur de la bordure : Délimitez le champ avec une bordure.
  • Forme : Sélectionnez une forme de bordure dans le menu déroulant :
    • Arrondi : Les boutons apparaissent avec des coins lisses.
    • Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
    • Net : Boutons rectangulaires.

Utilisez le menu déroulant pour sélectionner soit :

  • Bouton : Apparaîtra comme un bouton standard.
  • Lien : Apparaîtra comme du texte.

Définissez la taille et le type de police pour tous les boutons du formulaire.

Vous pouvez faire changer le bouton lorsque les utilisateurs déplacent leur souris :

  • Normal : Comment le bouton apparaît par défaut.
  • Survol : Comment le bouton apparaît lorsque les visiteurs passent leur souris dessus. Le mode survol vous permet de définir une durée de transition. C’est la durée nécessaire pour que le bouton change d’apparence.

Voici les caractéristiques qui peuvent changer :

Ajoutez une bordure à votre bouton. Si vous ajoutez une bordure, vous pouvez également définir :

Choisissez l’une des options suivantes :

  • Arrondi : Les boutons apparaissent avec des coins lisses.
  • Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
  • Net : Boutons rectangulaires.

Déterminez l’espacement entre la bordure du bouton et le texte. Pour plus de détails, consultez Remplissage et marges.

La section Messages contrôle le style des messages affichés aux visiteurs après qu’ils aient soumis un formulaire :

  • Typographie : Déterminez la taille et le type de police utilisés dans le message.
  • Couleur du message de succès : Définissez la couleur du message si le formulaire du visiteur a été envoyé au propriétaire du site web. Pour plus de détails, consultez Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Couleur du message d’erreur : Définissez la couleur du message si le formulaire du visiteur n’a pas été envoyé au propriétaire du site web. Pour plus de détails, consultez Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Couleur du message en ligne : Ceci n’est pertinent que si vous avez choisi d’afficher des messages personnalisés. Certains messages personnalisés apparaissent dans le formulaire lui-même, ce sont des messages en ligne et ce paramètre détermine leur couleur.

Ajoutez un arrière-plan à votre formulaire. Pour plus de détails, consultez Créer un arrière-plan.

Utilisez le curseur pour déterminer la largeur du formulaire.

Créez un espace entre le contenu du formulaire et ses bordures. Pour plus de détails, consultez Remplissage et marges.

Onglet Avancé

Contrôlez le placement de votre widget, insérez des liens, ajoutez du code personnalisé et plus encore.

En savoir plus sur les paramètres de l’onglet Avancé.

Sur cette page

Partager cet article

Hosted with