Formulaires avec Contact Form 7

Transcription

1 Formulaires avec Contact Form 7 pour votre site WordPress sur l infrastructure du Centre informatique de l UNIL Version mai 2016 En bref Contact Form 7 (CF7) permet d ajouter facilement un formulaire à votre site WordPress. Ses fonctionnalités : répond aussi bien à des cas simples ou complexes utilise une syntaxe claire et logique permet d envoyer une réponse automatique à l utilisateur Par l utilisation d un plugin supplémentaire : permet d exporter les données recueillies (Excel, CSV) 2

2 Activer Contact Form 7 Contact Form 7 est disponible dans vos extensions (plugins) : La présence de «Contact» dans le menu indique que CF7 est activé Il faut sinon l activer. 3 Etapes pour la création d un formulaire La création d un formulaire simple s effectue en 3 étapes : 1. Editer les champs du formulaire, i.e. quelles informations seront demandées à l utilisateur? 2. Configurer les données de contact, i.e. à qui seront envoyées les informations remplies par l utilisateur? 3. Insérer le formulaire sur une page, i.e. sur quelle page apparaîtra le formulaire? 4

3 Les champs du formulaire (1) 2. Donner un titre au formulaire 1. Créer un nouveau formulaire 4. Ne pas oublier de sauvegarder régulièrement! 3. Se placer sur l éditeur de formulaire 5 Les champs du formulaire (2) 1. L éditeur permet de modifier les champs du formulaire. Par ex. supprimer le champ «Sujet» du formulaire 6

4 Les champs du formulaire (3) Syntaxe de l éditeur de formulaire : début paragraphe : <p> fin paragraphe : </p> saut de ligne : <br /> champ non obligatoire : [type nomduchamp] champ obligatoire : [type* nomduchamp] <p>votre nom (obligatoire)<br /> [text* your-name] </p> Ce code donnera le résultat suivant 7 Les champs du formulaire (4) 2. Un clic permet d insérer un nouveau un champ à l emplacement du curseur, par ex. «texte» 1. CF7 gère plusieurs types de champ 3. Modifier les paramètres du champ 4. Confirmer les paramètres et insérer le champ dans le formulaire 8

5 Les champs du formulaire (5) Certains champs créent des contraintes sur les données rentrées par l utilisateur. Utilisez-les à bon escient, par exemple : doit être une adresse valide URL : doit être une adresse web valide tel. : doit être un numéro de téléphone valide nombre : doit être un nombre date : doit être une date valide D autres permettent de générer des champs à choix multiple, par exemple : menu déroulant, cases à cocher, boutons radio. Enfin, un champ particulier: soumettre : le bouton permettant l envoi du formulaire 9 Données de contact (1) 1. Se placer sur l onglet pour éditer les paramètres d envoi 2. CF7 permet de configurer l envoi de deux s, en général pour le destinataire et (2) pour une confirmation d envoi à l expéditeur. 3. CF7 permet de ré-utiliser les informations récoltées dans le formulaire en introduisant l identifiant du champ. Par ex. [you-name] dans le corps du message correspond au nom recueilli dans le formulaire. [your-name] sera remplacé par cette valeur. 4. les paramètres pour configurer l envoyé 10

6 Données de contact (2) correspond au message qui vous sera envoyé. Il doit vous permettre de récolter les informations rentrées par l utilisateur : Pour : votre adresse De : indiquez les identifiants des champs correspondant au nom et prénom de l expéditeur. Utilisez <[email protected]> pour éviter que l ne soit considéré comme indésirable. Sujet : le sujet de l envoi. Recommandation : utilisez un sujet générique qui vous permettra de filtrer automatiquement les messages dans votre client de messagerie En-têtes additionnelles : obligatoire pour l en-tête Reply-To avec l adresse de l expéditeur. Cette en-tête spécifie à qui la réponse doit être adressée. Corps du message : à formater avec les identifiants des champs pour récupérer les données entrées dans le formulaire par l utilisateur 11 Données de contact (3) (2) peut être utilisé pour l envoi d un message de confirmation à l expéditeur. Nous vous recommandons d utiliser cette option. Veillez à bien à ce que «Utiliser (2)» soit bien coché! Pour : l identifiant de champ correspondant à l de l expéditeur De : votre prénom et nom ou celui de l institut avec l adresse [email protected], par exemple «Luc Jung <[email protected]>» Sujet : un titre explicite en rapport avec le formulaire En-têtes additionnelles : indiquez votre adresse de contact, par exemple «Reply-To: [email protected]». Corps du message : le message de confirmation 12

7 Intégrer le formulaire dans une page 1. Sélectionner et copier le shortcode en vue de le coller sur une page si le shortcode n est pas visible, c est que le formulaire n a encore jamais été sauvegardé! 2. Modifier ou créer une page ou un article pour y intégrer le formulaire. Coller ensuite le shortcode dans la page ou l article, puis sauvegarder ou mettre à jour. Voilà! Le formulaire est désormais disponible pour les utilisateurs. 13 Modifier un formulaire 1. Vous pouvez à tout moment modifier un formulaire en y accédant via le menu «Formulaires de contact» 2. Sélectionnez le formulaire que vous désirez modifier pour retrouver l éditeur. Toute modification sauvegardée sera directement répercutée sur le formulaire. 14

8 Documentation Aide et documentation sur le site de Contact Form 7 :