Création d un formulaire de contact Procédure

Transcription

1 Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension: - Validée le : 18 août 011 Version : 4.5 Version : 1.0 Public : Contributeur TYPO3 Difficulté : Utilisateur Débutant Cette procédure est offerte à la communauté TYPO3 par hemmer.ch SA. Merci de conserver l identité de cette entreprise en cas d utilisation du présent document.

2 Table des matières 1. Ajout d un élément formulaire Ajout d un nouvel élément Remplir l onglet «Général» Assistant de formulaire Les différents types d élément Remplir l onglet «Apparence» Remplir l onglet «Accès» Remplir l onglet «Comportement» Enregistrer le document Vérification... 8

3 1. Ajout d un élément texte-images 1.1 Cliquer sur l icône pour ajouter un nouvel élément. Dans l onglet «Formulaires», cliquez sur «Formulaire de contact». Vous avez alors 4 onglets disponibles : Cet onglet permet d éditer les données du formulaire. Cet onglet permet de modifier l apparence du formulaire. 3. Cet onglet permet de gérer la visibilité du contenu, ses dates de début et de fin de publication et les droits d accès des groupes d utilisateurs. 4. Cet onglet permet de gérer la page de destination du formulaire et l adresse du destinataire. 3

4 1.. Remplir l onglet «Général» Il faut s assurer que «Formulaire» est bien sélectionné dans la liste déroulante.. Indiquer le titre du formulaire Le type permet de définir la taille du titre. - L alignement permet d aligner le titre à gauche, centré ou à droite. - La date permet d afficher une date au-dessus du contenu texte-image. 4. Le lien permet, en cas de besoin, de faire pointer le titre vers une autre page. 5. Le formulaire peut être édité selon une syntaxe spécifique. 6. Cliquer sur «Assistant de formulaire» pour avoir un outil simplifié, qui générera automatiquement le code du formulaire. 4

5 1..1. Assistant de formulaire Après avoir cliqué sur «Assistant de formulaire», on arrive sur cette fenêtre : Pour chaque élément, 4 icônes sont disponibles : déplace l élément vers le haut supprime l élément déplace l élément vers le bas ajoute un nouvel élément après l élément courant. Choix du type de l élément : - Type : Sélectionne le type de l élément. (voir 1... pour une explication détaillée pour chaque type d élément) - Etiquette : Texte qui apparaîtra devant le champ dans le formulaire - Obligatoire : Si coché, le champ devra obligatoirement être rempli 3. Configuration détaillée : Suivant le type d élément sélectionné, des paramètres supplémentaires peuvent être réglés. Pour avoir plus d informations sur ces paramètres, lire Configuration spéciale de courrier électronique : - Etiquette du bouton d envoi : texte dans le bouton envoi - Mode HTML activé : envoi les données au format HTML, si activé - Sujet : sujet du courrier électronique dans lequel sont envoyé les données - du destinataire : adresse à laquelle les données sont envoyées 5

6 1... Les différents types d élément Différents types d élément peuvent être choisi pour envoyer des données par formulaire : Voici une explication de chaque élément et la liste des paramètres éditables pour chaque élément dans la configuration détaillée : Champ texte : Insère un champ texte o Taille : taille du champ o Max : nombre de caractère maximal dans le champ o Valeur : valeur par défaut du champ Zone de texte : Insère une zone de texte, permettant d entrer un texte plus long o Colonnes : nombre de colonnes dans la zone de texte o Lignes : nombre de ligne dans la zone de texte o Pas de retour à la ligne : si coché, retours à la ligne pas pris en compte o Valeur : valeur par défaut de la zone de texte Liste déroulante : Insère une liste déroulante o Taille : Nombre d élément visibles dans la liste o Taille automatique : ajuste automatiquement la taille au nombre maximum d élément dans la liste o Multiple : si coché, le choix multiple est autorisé dans la liste o Liste des options : insérer un élément par ligne Case à cocher : Insère une case à cocher o Sélectionné : si coché, la case est cochée par défaut Boutons radio : Insère des boutons radio à cocher. Le visiteur n aura qu un choix possible parmi la liste des options proposées o Liste des options : insérer un élément par ligne Champ mot de passe : Insère un champ texte crypté o Taille : taille du champ o Max : nombre de caractère maximal dans le champ o Valeur : valeur par défaut du champ Envoi de fichier : Insère un champ permettant à l utilisateur de sélectionner un fichier qui se trouve sur son ordinateur o Taille : taille du champ Champ caché : Insère un champ qui sera caché à l utilisateur o Valeur : valeur par défaut du champ Bouton envoyé : Insère un bouton permettant d envoyer le formulaire o Valeur : texte apparaissant sur le bouton 6

7 Propriété : Insère une propriété o Champ : nom de la propriété o Valeur : valeur de la propriété Etiquette : Insère une étiquette o Valeur : valeur de l étiquette Une fois les données des éléments entrées, cliquer sur Enregistrer et fermer. Une fois le formulaire fermé, cliquer sur Enregistrer pour sauvegarder les données sur la page Remplir l onglet «Apparence» Il est possible de changer la mise en page du contenu dans cet onglet Remplir l onglet «Accès» Possibilité de cacher le contenu. - Possibilité d afficher ou non dans les menus de section. - Si activé, un lien vers le haut de la page est entré en bas du contenu.. - Possibilité d insérer une date de lancement de publication (le contenu sera visible à partir de cette date). - Possibilité d insérer une date d arrêt de publication (le contenu sera visible jusqu à cette date). 3. Possibilité de limiter l accès au document à un certain groupe d utilisateurs. 7

8 1.4. Remplir l onglet «Comportement» 1 1. Page de destination : Page vers laquelle le visiteur est redirigé après avoir envoyé le formulaire.. du destinataire : adresse vers laquelle les données du formulaire sont envoyées Enregistrer le document Pour enregistrer le document, cliquer sur une des icônes ci-après : 1. Enregistrer. Enregistrer et visualiser 3. Enregistrer et fermer 4. Enregistrer et créer nouveau document Vérification.1 Se connecter au site, cliquer sur la nouvelle page puis contrôler si les données sont correctes. 8