EXTENSION WORDPRESS. Contact Form 7. Proposé par :

Transcription

1 Contact Form 7 Proposé par :

2 Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel ) Espace de travail ) Téléchargez les extensions nécessaires ) Configuration du Formulaire ) Cadre Formulaire ) Cadre « » ) Intégration du formulaire dans une page II. Fonction Supplémentaire ) L auto-réponse ) Configuration SO Web 2014 Support de formation Page 2 sur 15

3 Présentation Contact Form 7 est une extension proposant à ces utilisateurs de générer un formulaire de contact facilement, un formulaire à intégrer par la suite sur une page, un widget ou un article. Cette extension nécessite cependant une installation supplémentaire, celle de l extension Really Simple Captcha, celle-ci pour l utilisation des codes captcha. I. Le Tutoriel 1) Espace de travail Vous devrez disposer d un navigateur (Google Chrome de préférence) pour ce tutoriel, toutes les manipulations s effectuerons directement sur le site internet via l interface d administration WordPress. 2) Téléchargez les extensions nécessaires Rendez-vous sur l espace d administration de votre site internet : Glissez votre souris sur l onglet «Extensions» : SO Web 2014 Support de formation Page 3 sur 15

4 Sélectionnez «ajouter», vous serez rediriger vers cette page : Via le champ de recherche, saisissez «Contact Form 7», cliquez sur «Chercher parmi les extensions», installer la première extension développer par Takayuki Miyoshi : SO Web 2014 Support de formation Page 4 sur 15

5 Une fois télécharger, rendez-vous de nouveau sur «Ajouter» dans la rubrique «Extensions», recherchez l extension «Really Simple Captcha», installer l extension développer par Takayuki Miyoshi : SO Web 2014 Support de formation Page 5 sur 15

6 Une fois installer, rendez-vous sur «Extensions installées» dans l onglet «Extensions», activez les extensions que vous venez de télécharger «Really Simple Captcha» et «Contact Form 7». SO Web 2014 Support de formation Page 6 sur 15

7 3) Configuration du Formulaire Après avoir installé et activé vos extensions, vous pouvez remarquer que l onglet «Contact» c est ajoutée à votre barre de menu gauche : Cliquez sur cet onglet, cela vous mènera vers votre interface de création de formulaire : SO Web 2014 Support de formation Page 7 sur 15

8 On peut trouver un modèle de formulaire de contact déjà créer, vous pouvez le supprimer, nous allons procéder à la création d un nouveau formulaire de contact, celui-ci sera disposer sur une page «Contact». Cliquez sur le bouton «Créer un formulaire» en haut de votre page, vous serez dirigé vers cette interface : Vous disposé d un bouton bleu «Créer un formulaire» pour créer un formulaire en langue française, ou sélectionnez une autre langue que la langue française puis cliquez sur le bouton Blanc «Créer un formulaire». Dans ce tutoriel, nous allons choisir la langue française, nous allons donc cliquez sur le bouton bleu, peu importe le bouton, cette action vous mènera vers cette page : SO Web 2014 Support de formation Page 8 sur 15

9 Une fois sur cette page, saisissez un titre qui vous permettra de reconnaître ce formulaire parmi la liste de formulaires que vous allez créer. Nous allons voir la composition du formulaire de contact, celui-ci se compose en 2 blocs (CF : image ci-après.), nous allons observer leurs utilité et leurs fonctionnement. NB : la création de ce formulaire ce base sur un code générer automatiquement par l extension lors de la création de champs tel que des champs «titre» ou de champs «mail», ce code se répartis dans 2 emplacement différents, l un composant la structure du formulaire tel qu il sera perçu par les visiteurs de votre site internet, l autre composera le mail que vous recevrez par mail. Cadre «Formulaire». SO Web 2014 Support de formation Page 9 sur 15

10 1) Cadre Formulaire Lorsque vous générez un champ (sauf Captcha, Acceptation et Bouton de soumission), 2 codes vous sont fournis, le premier à placer sur la case de gauche, le 2nd à intégrer dans le mail qui sera envoyer à l administrateur (Cf: 2.). Lorsque vous programmerez le formulaire, chaque champs doit débuter par la balise <p> et se terminer par la balise </p> (elles déterminent le début et la fin d un paragraphe), pour le retour à la ligne utiliser la balise <br />. SO Web 2014 Support de formation Page 10 sur 15

11 2) Cadre « » Vous l aurez compris, chacun des champs doit être saisi à la fois dans le cadre «formulaire» (1) et dans l emplacement «corps de message» du 2nd cadre (2). Voici un exemple vidéo de cette composition : SO Web 2014 Support de formation Page 11 sur 15

12 4) Intégration du formulaire dans une page Votre formulaire est prêt à être utiliser, vous pouvez maintenant intégrer ce formulaire à une page, mais vous pouvez aussi l intégrer à un widget ou à un article, le code du formulaire de contact s installe aussi bien dans les pages que dans les articles et/ou widgets de votre site (ou de votre blog). Sélectionnez et copiez le code dans l encadrer rouge ci-dessous, puis collez-le sur une page de contact par exemple: SO Web 2014 Support de formation Page 12 sur 15

13 NB : Attention, si vous coller ce code dans une page ou dans un article assurez-vous d être en mode «Texte» et non pas «Visuel» : Enregistrer votre page, article ou widget, voilà, votre site internet est équipé d un formulaire de contact! En cas de problème quelconque avec le tutoriel, pour une assistance gratuite ou pour signaler une erreur, n hésitez pas à contacter le site internet SO Web en cliquant ici. SO Web 2014 Support de formation Page 13 sur 15

14 II. Fonction Supplémentaire 1) L auto-réponse Vous pouvez activer ou désactiver une option de réponse automatique, celle-ci va permettre par exemple de notifier la personne qui vous à contacter que vous procédez au traitement de son courrier. Pour activer cette option, rendez-vous sur la page de configuration du formulaire, puis cocher la case « 2». Une fois la case cocher, un nouveau cadre est à votre disposition, celui-ci propose une interface identique au précédent cadre (cadre mail), cependant, il sera configurer différemment, car au lieu d envoyer le message qui y sera composer au destinataire du formulaire (l administrateur par exemple), il pourra être envoyer à un autre destinataire, dans mon cas je vais l utiliser comme formulaire «d auto-réponse», en d autre terme, le message qui sera écrit dans ce cadre sera envoyer à l émetteur du message du formulaire. 1) Configuration Pour le configurer rien de bien compliquer, vous allez saisir le message dans le cadre «corps du message», il peut également contenir des composant du formulaire (comme le nom de l émetteur du message), ainsi que du texte, une fois encore, ce texte peut être en format HTML à la condition de cocher la case «Envoyer cet au format HTML» en bas du cadre. Voici un exemple de configuration en image : SO Web 2014 Support de formation Page 14 sur 15

15 Une fois votre configuration créée, vous n avez plus qu à enregistrer votre formulaire de contact, il est désormais équipé de la fonctionnalité de réponse automatique. La présentation de l extension «Contact Form 7» est Proposé par : SO Web. Une propriété de Soufian Ait Tirite. Accessible via l espace de formation sur le site SO Web. Pour toute réutilisation/modification, merci de contacter le propriétaire de ce document en cliquant ici (mail) ou ici (site internet). SO Web 2014 Support de formation Page 15 sur 15