Remarque : Remarque : les instructions de ce guide font référence à l’éditeur classique. Si vous utilisez l’éditeur de blocs WordPress, consultez ce guide.
Cette méthode n’est pas sécurisée pour collecter des informations privées, telles que des numéros de carte de crédit, des numéros de compte bancaire, des identifiants, des mots de passe, etc. Pour collecter des paiements, veuillez utiliser PayPal ou un service de traitement des paiements similaire qui gère les transactions financières en toute sécurité.
Didacticiel vidéo
Ajout du formulaire de contact
Modification du formulaire de contact
Affichage de vos coordonnées automatiquement renseignées dans le formulaire
Ajout d’un formulaire de contact avec des codes courts
Regardez la vidéo pour profiter d’un bref aperçu de son fonctionnement. Vous trouverez ci-après de plus amples exemples et réglages.
- Accédez à Pages ou Articles dans la colonne latérale gauche du tableau de bord de votre site.
- Sélectionnez la page ou l’article auquel vous souhaitez ajouter le formulaire ou ajoutez un nouvel article/une nouvelle page.
- Au-dessus de la barre d’outils, cliquez sur Ajouter un formulaire de contact.
Le formulaire de contact intègre quatre champs prédéfinis : Nom, Adresse e-mail, Site Web et Commentaire.
Vous êtes libre de modifier, supprimer ou ajouter d’autres champs à votre formulaire. Notez que c’est vous qui décidez si un champ est obligatoire ou facultatif.
Sélectionnez le bouton Modifier en haut pour modifier les réglages du formulaire.
Préférences de notification
- Par défaut, lorsqu’un visiteur envoie votre formulaire de contact, il reçoit un e-mail de l’auteur de l’article ou de la page à partir de l’adresse e-mail renseignée dans le compte WordPress.com de ce dernier.
- La ligne d’objet correspond au titre de l’article si aucun texte personnalisé n’a été ajouté.
- Vous pouvez modifier le destinataire et l’objet de l’e-mail dans les options en haut de la zone de modification du formulaire.
- Pour envoyer l’e-mail à plusieurs destinataires, séparez l’adresse e-mail de ces derniers avec une virgule.
- Vous pouvez également modifier l’adresse e-mail et l’objet à l’aide d’un code court comme indiqué ci-après.
Champs du formulaire de contact
Chaque champ requiert une étiquette et un type. Les types de champs suivants sont disponibles :
- Case à cocher : permet à l’utilisateur de cocher une case pour faire un choix
- Liste déroulante : crée une liste déroulante proposant plusieurs options
- Adresse e-mail : requiert un format d’adresse e-mail
- Nom : champ de texte
- Bouton radio : similaire au type case à cocher
- Texte : une seule ligne de texte
- Zone de texte : plusieurs lignes de texte
- Adresse Web : requiert un format URL
- Après avoir ajouté les champs souhaités, cliquez sur le bouton Mettre à jour le formulaire pour enregistrer les modifications et ajouter le formulaire à votre article ou page.
Une fois que vous avez terminé d’ajouter des champs et de définir les préférences de notification, sélectionnez le bouton Insérer pour ajouter le formulaire à l’article ou à la page.
Une fois le formulaire de contact ajouté, vous pouvez ajouter ou modifier les champs et accéder à l’onglet Réglages en cliquant sur le formulaire et en sélectionnant l’icône Crayon. Apportez les modifications souhaitées, puis sélectionnez Mettre à jour.
Si vous visualisez votre formulaire de contact en direct, vous pouvez voir que vos coordonnées sont préremplies. Vous êtes le seul à voir ces informations car vous visualisez votre site tout en étant connecté à votre compte WordPress.com.
- Les visiteurs de votre site connectés à WordPress.com verront que leurs propres coordonnées sont renseignées automatiquement dans les formulaires de contact.
- Aucune information ne sera automatiquement renseignée pour les visiteurs non connectés.
- Pour vous en rendre compte, vous pouvez vous déconnecter de WordPress.com et afficher les formulaires de contact. Vous verrez qu’ils sont vides.
- Cette fonctionnalité ne s’applique pas aux sites auto-hébergés à l’aide de Jetpack.
Vous pouvez ajouter un formulaire de contact de base à l’aide d’un code WordPress spécifique appelé code court. Découvrez-en plus sur les codes courts ici.
Pour ajouter un formulaire de contact avec un code court, copiez et collez le texte ci-après dans n’importe quel article, page ou widget de texte :
[contact-form]
[contact-field label="Nom" type="name" required="true" /]
[contact-field label="E-mail" type="email" placeholder="Votre adresse e-mail" required="true" /]
[contact-field label="Site Web" type="url" /]
[contact-field label="Commentaire" type="textarea" required="true" /]
[/contact-form]
- Chaque code court de formulaire de contact doit commencer par
- Dans les codes [contact-form]], chaque champ individuel est entouré d’une balise [contact-field /]
- Vous pouvez ajouter ou retirer manuellement les champs du code court. Par exemple, si vous souhaitez supprimer la zone de texte du site Web, vous devez supprimer la ligne correspondante comme ceci :
[[contact-form]
[contact-field label="Nom" type="name" required="true" /]
[contact-field label="E-mail" type="email" placeholder="Votre adresse e-mail" required="true" /]
[contact-field label="Commentaire" type="textarea" required="true" /]
[/contact-form]
Attributs de champ de code court disponibles
Les attributs de champ disponibles sont les suivants :
label : octroie au champ une étiquette descriptive.
type : détermine le type de champ à ajouter. Options disponibles :
text: affiche une zone de texte standard ne contenant qu’une seule lignetextarea: affiche une zone de texte contenant plusieurs lignesradio: affiche des options radiocheckbox: affiche une seule case à cocherselect: affiche une liste déroulante contenant plusieurs optionsemail: affiche une zone de texte ne contenant qu’une seule lignename: affiche une zone de texte ne contenant qu’une seule ligneurl: affiche une zone de texte ne contenant qu’une seule ligne
options : les champs select et radio proposent une quatrième option appelée « options ». Cette liste séparée par des virgules regroupe toutes les options disponibles dans le champ dropdown ou radio. Exemple :
[contact-field label="Do you have a blog?" type="radio" options="Yes,No" /]
Vous pouvez également modifier les préférences de notification d’un formulaire de contact intégré en ajoutant les paramètres suivants à la balise d’ouverture contact-form :
to='email address': adresse e-mail à laquelle les notifications du formulaire envoyé seront transmises.subject='email subject': texte apparaissant dans la ligne d’objet des notifications par e-mail.
Par exemple :
[contact-form to='email@yourgroovydomain.com' subject='Form Submitted']
Ce code enverra une notification par e-mail avec pour objet « Formulaire envoyé » à l’adresse e-mail email@yourgroovydomain.com.
Modification du texte du bouton d’envoi
submit_button_text : vous permet de modifier le texte du bouton du formulaire de contact en remplaçant « Envoyer » par le texte de votre choix. Dans l’exemple ci-après, le bouton devient « Contactez-moi ! » :
[contact-form submit_button_text='Contact me!'][contact-field label='Name' type='name'/][/contact-form]
placeholder : insère un texte indicatif ou descriptif dans un champ de saisie avant que ce dernier ne soit renseigné. Ce texte disparaît lorsque vous commencez à renseigner le champ. Cette option n’est pas disponible avec les champs radio, select et checkbox.
required : Si vous souhaitez rendre le champ obligatoire, ajoutez required="true" ou required ="1" au code court. Sinon, ignorez simplement.
Assistance WordPress.com 