L'essentiel de Muse CC 2015

Créer un formulaire de contact simple

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez découvrir comment créer et paramétrer un formulaire de contact simple grâce au widget Formulaire.

Transcription

Toujours sur cette page contact, passons maintenant à l'un des widgets les plus populaires de Muse, à savoir le formulaire de contact. Je suis ici sur ma page de contact donc, et je vais me rendre dans ma bibliothèque de widgets pour vous montrer la catégorie de widgets qui s'appelle Formulaire. Alors dans ce dossier ici on me propose 2 déclinaisons du formulaire de contact, un contact détaillé et un contact simple. alors ça c'est comme pour les diaporamas, il s'agit en fait deux fois du même widget, mais avec des options par défaut différentes. Alors je vais commencer par le contact simple, le glisser sur ma page, comme ceci, puis je vais aller refermer ma bibliothèque de widgets, placer correctement mon formulaire sur ma page avec mes guides, voila quelque chose comme ça, et puis bien évidemment comme pour tous les widgets vous avez cette fameuse petite flèche bleue que vous connaissez bien maintenant et qui vous donne accès aux options de ce widget. Alors pour le formulaire de contact vous pouvez choisir un nom, par exemple : Nous écrire, ce nom sera utilisé dans les emails que vous recevrez quand les internautes vont soumettre des données via ce formulaire. Alors justement on parlait d'email et bien le 2nd paramètre c'est l'adresse email vers laquelle vous voulez envoyer les données collectées par ce formulaire, je vais choisir par exemple info@cheminvert.be par exemple, que faire après l'envoi des données, vous pouvez rester sur la page actuelle, ou bien vous pouvez rediriger les internautes vers une autre page du site, on va rester sur la page actuelle ici. Et puis vous pouvez surtout choisir les champs que vous voulez insérer dans votre formulaire, donc vous voyez que le champ courrier électronique le champ Nom sont des champs qui sont activés par défaut, même chose pour le message bien sûr et le bouton Envoyer qui lui ne peut pas être supprimé. Vous pouvez si vous le désirez Ajouter des champs supplémentaires par exemple Numéro de téléphone domicile, le champ Société etc, etc, alors moi je ne vais pas ajouter ces champs là mais je pourrais le faire et donc maintenant je vais vous montrer comment je peux mettre en forme les différents éléments de ce formulaire. Alors je vais cliquer une fois sur le formulaire, et là vous le savez c'est le formulaire dans son ensemble qui est sélectionné, et donc vous avez ici le mot Formulaire dans le coin supérieur gauche de votre écran. Si je clique une 2ème fois sur le champ Nom par ici et bien là j'ai sélectionné non plus le formulaire complet, mais le champ de formulaire. Alors attention, petite particularité de ce widget, vous avez de nouveau cette petite flèche qui apparaît ici mais maintenant qu'un champ de formulaire est sélectionné, cette flèche ne me donne plus accès aux options globales de l'ensemble du formulaire, mais aux options particulières de ce champ. Et là je peux choisir si ce champ est une saisie obligatoire ou pas, si je veux afficher le texte de l'invite, si le champ est vide c'est à dire l’expression Entrer un nom ici que vous voyez en gris, je peux la décocher comme ceci, je peux choisir les sous-composants que je veux voir, par exemple est-ce que je veux voir ou pas une étiquette est-ce que je veux ou pas afficher un message, par exemple le message obligatoire qui apparaît ici. Voila je vais garder ici les options par défaut. Alors pour ce qui est de la mise en forme, je sélectionne ici mon formulaire dans les options je vais vous montrer une petite chose supplémentaire c'est l'option modifier ensemble qu'il y a ici dans le fond, vous la connaissez celle là, c'est comme le menu qu'on a utilisé tout à l'heure, et bien quand cette case est cochée, quand vous allez modifier l'un des champs du formulaire la modification se propagera à l'ensemble des champs du formulaire. Donc allons-y, je vais sélectionner le premier champ, au sein de ce champ je vais cliquer sur l'étiquette pour sélectionner l'étiquette regardez c'est le mot étiquette qui est maintenant écrit ici en haut à gauche, c'est la que je vais par exemple pouvoir changer la police de caractères de mon texte, je vais prendre celle-ci, voila et vous voyez que j'ai changé la police de caractères des étiquettes des 3 champs puisque l'option modifier ensemble est cochée. Alors je vais sélectionner également ici ma zone de saisie, c'est bien Saisie de texte qui est écrit ici en haut à gauche, toujours bien vérifier ceci et je vais également changer la police de caractères de ce texte, voila, je vais changer par exemple la couleur du contour, de cet élément, je vais prendre dans ma bibliothèque cc, là je vais faire un clic droit sur le rouge, Définir la couleur du contour, voila, augmenter l'épaisseur de ce contour comme ceci, et puis mettre des coins arrondis comme ceci, et puis je vais peut-être modifier un petit peu la couleur du fond, voila, ça me parait pas trop mal, Donc voila comment ça fonctionne, vous montrer également que pour chacun de ces éléments, alors je vais revenir par exemple ici sur ma saisie de texte, et bien qu'il y a plusieurs états possible donc l'état vide, l'état non vide, l'état de survol, l'état de zone de saisie active, et l'état d'erreur dans ce cas-ci. Voyez qu'il y a plein plein de chose à vérifier et à mettre en forme dans ce cas-ci. Au niveau du bouton et bien c'est pareil bien évidemment, vous pouvez sélectionner ce bouton et accéder aux différents états de ce bouton et les remettre en forme comme ça également. Autre petite chose que je vais vous montrer c'est le rectangle qui parait vide qui est ici sur le côté, cela s'appelle Message de formulaire, et là aussi vous avez plusieurs états possible, l'état normal, ce champ est vide en fait, vous avez l'état Soumission en cours, vous voyez qu'on enverra un message à l'utilisateur pour dire Envoi du formulaire. Succès de l'envoi, Formulaire reçu, vous voyez, Erreur d'envoi, et vous avez alors à cet endroit là un petit message d'erreur qui est affiché, donc vous pouvez évidemment personnaliser tous ces éléments, changer les textes de ces messages, changer l'apparence de tout ces éléments-là. Voila donc pour l'utilisation de base du formulaire de contact, vous constatez que c'est un widget un peu plus sophistiqué que les autres, il est constitué d'un grand nombre d'éléments imbriqués les uns dans les autres, surveillez donc bien la zone en haut et à gauche de votre écran pour savoir lequel de ces éléments est sélectionné, et puis n'oubliez pas que la plupart de ces éléments sont interactifs et sont donc composés de plusieurs états.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !