Commit 4f5125a2 authored by spf's avatar spf
Browse files

Merge branch 'maj' into 'main'

[Mise à jour des captures (et du contenu)

See merge request !1
parents f6cdcaa7 dd24419f
Pipeline #418626 passed with stage
in 33 seconds
......@@ -70,51 +70,75 @@ Un message à laisser ?: Je serais probablement en retard !
## Je souhaite envoyer des mails en fonction des réponses
Je veux envoyer un mail à une adresse différente en fonction du ou des comités séléctioné :
Exemple : envoyer un mail à une adresse différente en fonction du ou des comités sélectionné. Pour ce faire, vous devez :
* je vais dans l'onglet **Courriels**
* je sélectionne le composant
* j'ajoute les adresses mail en fonction du comité
* je sauvegarde (tout en bas)
* créer un composant avec les comités :
![composant selections multiples](images/astuces_forms_courriel_comite.png)
* aller dans l'onglet **Courriels**
* cliquer sur le bouton **Ajouter un courriel standard**
* sélectionner le composant dans la section **Adresse de courriel du destinataire**
* sélectionner les adresses mail en fonction du comité
* sauvegarder (tout en bas)
![composant selections multiples](images/astuces_forms_courriel_comite.png)
![courriel en fonction du composant](images/astuces_forms_courriel_comite2.png)
## Je souhaite un système de CAPTCHA
* j'ajoute un champ texte à mon formulaire (en cochant **Requis** dans l'onglet **Validation** du composant)
* dans l'onglet **Validation du formulaire** j'ajoute une règle **Motif**
* je remplis les champs comme sur l'image ci-dessous
Si vous souhaitez éviter au maximum les spams sur votre formulaire, vous pouvez créer un système antispam basique. Pour ce faire, vous devez :
* ajouter un champ texte à mon formulaire (avec, par exemple, la question : **Etes-vous humaine ?**)
* cocher **Requis** dans l'onglet **Validation** du composant pour obliger à le remplir
* ajouter une règle **Motif** dans l'onglet **Validation du formulaire**
* remplir les champs (ici les valeurs sont à ajuster selon vos besoins/envies) :
* **Nom de la règle** : ``Captcha``
* **Composant** : ``Etes-vous humaine ?``
* **Motif** : ``Oui``
* **Message d'erreur personnalisé** : ``Vous n'êtes pas humaine !`` (si une personne ne répond pas **Oui** elle obtiendra cette erreur)
![Règle Motif Yakforms](images/astuces_forms_captcha.png)
D'autres exemples :
* Pour montrer que vous n’êtes pas un robot, entrez la réponse à la question suivante : combien font 3 plus sept ? (réponse écrite en chiffres)
* Pour montrer que vous n’êtes pas un robot, entrez le mot suivant « antispam » ?
* Pour montrer que vous n’êtes pas un robot, entrez le mot qui manque dans l’expression « prendre ses jambes à son `***` »
* Soyez créatifs pour en faire d’autres :)
## Je souhaite un champ « autre » libre
Je voudrais qu'en cliquant sur le choix « autre », les répondant⋅e⋅s puissent mettre un choix libre. Pour cela :
* je créé un composant « Boutons radio » ![composant bouton radio](images/astuces_forms_autre1.png)
* je créé un composant « Champ texte » (ici, avec le titre « Autre ?») ![composant texte autre](images/astuces_forms_autre2.png)
* je créé un composant **Boutons radio** (fonctionne aussi avec le composant **Cases à cocher**) ![composant bouton radio](images/astuces_forms_autre1.png)
* je créé un composant « Champ texte » (ici, avec le titre « Autre ? Merci de préciser ») ![composant texte autre](images/astuces_forms_autre2.png)
* j'enregistre
* je vais dans « Champs conditionnels »
* je créé la règle : « Si la mascotte est autre alors Autre ? est affiché » (si le champ autre du composant « Boutons radio » est « autre » alors on affiche le composant « Champ texte » - sinon, il ne le sera pas) ![conditions](images/astuces_forms_autre3.png)
* je clique sur le **+** pour ajouter une confition
* je créé la règle : « Si **La mascotte est autre** alors **Autre ? Merci de préciser. est affiché** » (si le champ autre du composant « Boutons radio » est « autre » alors on affiche le composant « Champ texte » - sinon, il ne le sera pas) ![conditions](images/astuces_forms_autre3.png)
* je clique sur le bouton **Enregistrer les conditions**
Résultats :
Résultat animé :
![Résultat autre caché](images/astuces_forms_autre4.png)
![Résultat autre visible](images/astuces_forms_autre5.png)
![Animation montrant le résultat](images/astuces_forms_autre.gif)
## Je souhaite afficher des images pour les choix
Vous pouvez le faire en y insérant une photo **déjà disponible sur le web** et en utilisant la balise HTML `img`. Par exemple, si vous souhaitez insérer l'image du logo Framasoft (disponible en cliquant-droit sur le logo de la barre de navigation haute et en cliquant sur **Afficher l'image**) dans votre composant **Boutons radios**, vous devez insérer `<img src="https://framasoft.org/nav/img/logo.png" />` dans un champ.
Vous pouvez le faire en y insérant une photo **déjà disponible sur le web** et en utilisant la balise HTML `img`.
Par exemple, si vous souhaitez insérer l'image du logo Framasoft (disponible en cliquant-droit sur le logo de sur https://framasoft.org/fr/ et en cliquant sur **Copier l'adresse de l'image**) dans un composant **Boutons radios** (par exemple), vous devez insérer `<img src="https://framasoft.org/img/biglogo-notxt.png" />` dans un champ.
![image dans un composant boutons radios](images/astuces_forms_images_composant_radios.png)
<div class="alert-info alert">
Vous pouvez redimensionner votre image en ajoutant <code>width="9%"</code> et/ou <code>height="100%"</code> ; <code>width</code> pour la largeur (ici en pourcentage) et <code>height</code> pour la hauteur.
</div>
## Je souhaite afficher une image en en-tête de mon Formulaire
### Depuis Framapic (recommandé)
Vous devez commencer par envoyer votre image sur un service d'hébergement temporaire d'images comme [Framapic](https://framapic.org/) ([voir le tutoriel vidéo](https://docs.framasoft.org/fr/lutim/#tutoriel-vid%C3%A9o)).
Ensuite (dans l'onglet **Modifier**)&nbsp;:
Vous devez commencer par envoyer votre image sur un service d'hébergement temporaire d'images comme [un parmi ces CHATONS (section **Partage d'images**)](https://entraide.chatons.org/fr/) ([voir le tutoriel vidéo](https://docs.framasoft.org/fr/lutim/#tutoriel-vid%C3%A9o)).
Ensuite (dans la partie **Modifier** de votre forumulaire)&nbsp;:
* cliquez sur l'icône permettant d'ajouter l'adresse de l'image framapic
![image montrant l'icône à utiliser pour insérer une image](images/astuces_forms_insert_image_header.png)
......@@ -126,17 +150,18 @@ Ensuite (dans l'onglet **Modifier**)&nbsp;:
### Directement dans Yakforms
Vous avez aussi la possibilité d'insérer directement une image depuis Yakforms. Les fichiers doivent peser moins de 2 Mo. Les extensions autorisées sont : `png`, `gif`, `jpg` et `jpeg`. Pour ce faire, vous devez (dans l'onglet **Modifier**)&nbsp;:
Vous avez aussi la possibilité d'insérer directement une image depuis Yakforms. Les fichiers doivent peser moins de 2 Mo\*. Les extensions autorisées sont\* : `png`, `gif`, `jpg` et `jpeg`.
![image montrant les étapes pour ajouter une image](images/astuces_forms_insert_image_header_direct.png)
Pour ce faire, vous devez (dans la partie **Modifier** de votre forumulaire)&nbsp;:
1. cliquer sur **Image**
* cliquer sur **Parcourir…** pour récupérer l'image sur votre ordinateur
* cliquer sur **Transférer**
* cliquer sur le bouton **Enregistrer** en bas de la page
Il vous suffit alors de cliquer sur le bouton **Enregistrer** en bas de la page
![image montrant les étapes pour ajouter une image](images/astuces_forms_insert_image_header_direct.png)
\* peut varier en fonction de l'instance yakforms
## Je souhaite visualiser mes résultats dans un Framacalc
......@@ -157,11 +182,14 @@ Dans Framacalc :
## Je souhaite créer une échelle sémantique différentielle
Pour créer une [échelle sémantique différentielle](https://fr.wikipedia.org/wiki/%C3%89chelle_s%C3%A9mantique_diff%C3%A9rentielle), il est possible d'utiliser le composant **Grille**. Pour ce faire, vous devez&nbsp;:
* mettre votre question en titre
* dans l'onglet **Options**, mettre des `l` (la lettre `L` en minuscule) et `|` (`Alt Gr`+`6`) au milieu
* supprimer des questions dans la zone **Questions**
* mettre dans la question restante vos valeurs (ici, "froid" et "chaud") : `Froid | Chaud` ; en mettant `|` cela permet de mettre une valeur de chaque côté de la ligne
Pour créer une [échelle sémantique différentielle](https://fr.wikipedia.org/wiki/%C3%89chelle_s%C3%A9mantique_diff%C3%A9rentielle), il est possible d'utiliser le composant **Grille**.
Pour ce faire, vous devez&nbsp;:
1. mettre votre question en titre
* dans l'onglet **Options**, mettre des `l` (la lettre `L` en minuscule) ou `|` (`Alt Gr`+`6`) pour créer l'échelle
* supprimer des questions dans la zone **Questions** pour n'en laisser qu'une
* mettre dans la question restante vos valeurs (ici, "Froid" et "Chaud") : `Froid | Chaud` ; en mettant `|` (`Alt Gr`+`6`) cela permet de mettre une valeur de chaque côté de la ligne
![forms paramétrage échelle](/images/astuces-forms-echelle.png)
......@@ -169,14 +197,14 @@ Résultat :
![forms résultat échelle](images/astuces-forms-echelle-resultat.png)
Vous pouvez aussi utiliser la saisie manuelle&nbsp;:
```
-3|l
-2|l
-1|l
n||
0|l
1|l
2|l
3|l
4|l
5|l
```
Pour faire l'exemple ci-dessus.
......@@ -185,49 +213,47 @@ Pour faire l'exemple ci-dessus.
Si vous souhaitez que les personnes mettent leur nom (pour un formulaire d'inscription, par exemple), vous pouvez rendre le champ **Nom** obligatoire en&nbsp;:
* ajoutant un composant **Champ texte**
1. ajoutant un composant **Champ texte**
* lui donnant le **Titre** «&nbsp;Nom&nbsp;»
* en cliquant sur l'onglet **Validation** (**1**)
* en cochant **Requis** (**2**)
* en cliquant sur **Enregistrer** (**3**)
* en cliquant sur l'onglet **Validation**
* en cochant **Requis**
* en cliquant sur **Enregistrer**
![Image illustrant les étapes](images/astuces_champ_requis.png)
Les personnes qui répondent aux formulaires ne pourront pas le valider sans avoir entré leur nom dans le champ requis.
Les personnes qui répondent au formulaire ne pourront pas le valider sans avoir entré leur nom dans le champ requis.
<div class="alert alert-info">
Les champs obligatoires sont marqués d’un <b> * </b> rouge.
Les champs obligatoires sont marqués d’un <b>*</b> rouge sur le formulaire.
</div>
## Comment protéger mon formulaire du spam ?
Pour lutter contre le spam, et tout autre robot, sur votre formulaire Yakforms, vous pouvez ajouter une condition à la validation du formulaire. Ajoutez sur la page **Formulaire** > **Conception du formulaire** un élément **champ texte** à votre formulaire. Son nom peut être "Anti Spam". Entrez en tant que description le texte d’une question n’ayant qu’une réponse évidente pour un humain.
Par exemple :
* Pour montrer que vous n’êtes pas un robot, entrez la réponse à la question suivante : combien font 3 plus sept ? (réponse écrite en chiffres)
* Pour montrer que vous n’êtes pas un robot, entrez le mot suivant «&nbsp;antispam&nbsp;» ?
* Pour montrer que vous n’êtes pas un robot, entrez le mot qui manque dans l’expression «&nbsp;prendre ses jambes à son `***`&nbsp;»
* Soyez créatifs pour en faire d’autres :)
Sur la page **Formulaire** > **Validation du formulaire**, cliquez sur **Valeur(s) spécifique(s)**. Dans la partie **Composants**, cochez seulement votre nouveau champ texte "Anti Spam". Entrez dans **(Clé) valeur** la solution à la question précédente. Vous pouvez personnaliser le message d’erreur en cas de réponse incorrecte.
## Comment mettre en place une validation des réponses par email ?
Vous voulez vérifier que les adresses email entrées par vos sondés sont correctes ? Pour cela, vous pouvez configurer votre formulaire pour qu’après le remplissage du formulaire, la réponse entrée soit validée par le clic sur un lien envoyé à l’adresse email.
* Créer un formulaire avec un champ email. Vous pouvez rendre ce champ obligatoire en cliquant sur son onglet "Validation" > "Requis"
* Toujours en mode modification de formulaire, dans l’onglet "Courriels", créer un nouvel email de confirmation en cliquant sur "Add confirmation request email". Dans "Composant", sélectionner le nom du champ de mail.
* Toujours dans la configuration de cet email de confirmation, il faut ajouter un gabarit personnalisé qui sera envoyé à l’utilisateur.
* > Bonjour [submission:user] !
> Le [submission:date:long], vous avez répondu au formulaire [current-page:url]
> *IMPORTANT* : pour confirmer votre participation, veuillez simplement cliquer sur le lien suivant : [submission:confirm_url]
> Votre participation ne sera pas prise en compte tant que vous n’aurez pas effectué cette action.
> Les valeurs soumises sont:
> [submission:values]
> Cordialement.
* Enregistrez le tout.
1. Créer un formulaire avec un champ email. (vous pouvez rendre ce champ obligatoire en cliquant sur son onglet **Validation** et en cliquant la case **Requis**)
* Cliquez sur le bouton **Enregistrer**
* Allez dans l’onglet **Courriels**
* Créez un nouvel email de confirmation en cliquant sur **Ajouter une demande de confirmation par email**
* Cochez **Composant** et sélectionnez le nom du champ de mail.
* Dans la configuration de cet email de confirmation, il faut ajouter un gabarit personnalisé qui sera envoyé à l’utilisateur pour y insérer le jeton `[submission:confirm_url]` (générant l'url de validation) :
> Bonjour !
>
> Le [submission\:date:long], vous avez répondu au formulaire [current-page:url]
>
> *IMPORTANT* : pour confirmer votre participation, veuillez simplement cliquer sur le lien suivant : [submission:confirm_url]
>
> Votre participation ne sera pas prise en compte tant que vous n’aurez pas effectué cette action.
>
> Les valeurs soumises sont:
>
> [submission:values]
>
> Cordialement.
>
* Enregistrez le tout en cliquant sur le bouton **Enregistrer les paramètres de courriel**.
L’utilisateur recevra alors un email à l’adresse sélectionnée, et devra cliquer sur l’url de confirmation (sinon, sa participation apparaîtra comme "non confirmée" dans les résultats).
......@@ -250,14 +276,16 @@ Lors de la création du champ que vous voulez unique, dans son onglet **Validati
## Comment ajouter un titre dans le corps de mon formulaire ?
Pour insérer un titre dans le corps du formulaire, vous pouvez, sur la page **Formulaire** > **Conception du formulaire**&nbsp;:
Pour insérer un titre dans le corps du formulaire, vous pouvez, sur la page **Modifier** > **Conception du formulaire**&nbsp;:
* utiliser l’élément **balisage** qui se situe dans la partie droite de la page
* utiliser l’élément **Balisage** qui se situe dans la partie droite de la page
* le déplacer où vous souhaitez dans votre sondage
* éditer le contenu de ce nouvel élément (dans sa partie **Balisage**)
* éditer le contenu de ce nouvel élément
* utiliser le HTML pour mettre en page
Vous pouvez par exemple entrer `<h3>Mon titre</h3>` en replaçant "Mon titre" par le titre que vous souhaitez. Si vous souhaitez un titre plus gros remplacez "h3" par "h2". Vous pouvez, en créant une nouvelle ligne, ajoutez du texte sous le titre.
Vous pouvez par exemple entrer `<h3>Mon titre</h3>` en replaçant "Mon titre" par le titre que vous souhaitez. Si vous souhaitez un titre plus gros remplacez `<h3>` et `</h3>` par `<h2>` et `</h2>`. Vous pouvez, en créant une nouvelle ligne, ajoutez du texte sous le titre.
![titre balisage](images/titre_balisage.png)
## Je souhaite afficher une description sur la première page seulement
......@@ -305,5 +333,5 @@ Pour (ne pas) afficher la barre de progression vous devez&nbsp;:
1. aller dans l'onglet **Formulaire**
2. cliquer sur **Paramètres avancés du formulaire**
3. cliquer sur la section **Barre de progression**
4. * (dé)cocher **Afficher la barre de progression**
4. (dé)cocher **Afficher la barre de progression**
5. cliquer sur **Enregistrer la configuration**
docs/images/astuces-forms-echelle.png

26.2 KB | W: | H:

docs/images/astuces-forms-echelle.png

39.4 KB | W: | H:

docs/images/astuces-forms-echelle.png
docs/images/astuces-forms-echelle.png
docs/images/astuces-forms-echelle.png
docs/images/astuces-forms-echelle.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/astuces_champ_requis.png

8.39 KB | W: | H:

docs/images/astuces_champ_requis.png

15.5 KB | W: | H:

docs/images/astuces_champ_requis.png
docs/images/astuces_champ_requis.png
docs/images/astuces_champ_requis.png
docs/images/astuces_champ_requis.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/astuces_forms_autre1.png

10.4 KB | W: | H:

docs/images/astuces_forms_autre1.png

16.2 KB | W: | H:

docs/images/astuces_forms_autre1.png
docs/images/astuces_forms_autre1.png
docs/images/astuces_forms_autre1.png
docs/images/astuces_forms_autre1.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/astuces_forms_autre2.png

5.41 KB | W: | H:

docs/images/astuces_forms_autre2.png

9.17 KB | W: | H:

docs/images/astuces_forms_autre2.png
docs/images/astuces_forms_autre2.png
docs/images/astuces_forms_autre2.png
docs/images/astuces_forms_autre2.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/astuces_forms_autre3.png

9.74 KB | W: | H:

docs/images/astuces_forms_autre3.png

8.44 KB | W: | H:

docs/images/astuces_forms_autre3.png
docs/images/astuces_forms_autre3.png
docs/images/astuces_forms_autre3.png
docs/images/astuces_forms_autre3.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/astuces_forms_captcha.png

14.7 KB | W: | H:

docs/images/astuces_forms_captcha.png

109 KB | W: | H:

docs/images/astuces_forms_captcha.png
docs/images/astuces_forms_captcha.png
docs/images/astuces_forms_captcha.png
docs/images/astuces_forms_captcha.png
  • 2-up
  • Swipe
  • Onion skin
docs/images/forms_champ_unique.png

6.36 KB | W: | H:

docs/images/forms_champ_unique.png

7.33 KB | W: | H:

docs/images/forms_champ_unique.png
docs/images/forms_champ_unique.png
docs/images/forms_champ_unique.png
docs/images/forms_champ_unique.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment