Créer une FAQ dynamique

Les utilisateurs de Jimdo qui ont une boutique seront peut-être intéressés par ce tutoriel. En effet, il permet de créer sur votre site une FAQ dynamique : un clic sur la question fait apparaître la réponse correspondante ; un second clic la "remballe". J'ai trouvé le script de la FAQ sur ce site chinois : j'ai modifié le code et ajouté l'habillage CSS.

 

La mise en place de cette FAQ dynamique dans Jimdo est simple. La personnalisation avancée du design requiert plus de travail. C'est pourquoi, pour les novices et les plus pressés, je fournis à la fin du tutoriel 3 styles graphiques prêts à l'emploi : vous pouvez les copier-coller tels quels ou en modifier les couleurs pour les assortir au design de votre site. 

Démonstration du résultat

Voici deux fausses FAQ qui vous donnent un aperçu du résultat que vous pouvez obtenir. On peut choisir de faire une seule FAQ, intégrée dans le fil de la page, ou organiser la FAQ en rubriques.

Démo n°1 : une FAQ simple

Peut-on créer des espaces membre avec Jimdo ?
Combien d'éléments peut-on mettre sur une page ?

Démo n°2 : une FAQ organisée en rubriques

Questions sur la boutique Vos produits sont-ils "made in France" ?
Peut-on régler la commande avec Paypal ?
Je n'ai pas reçu de mail de confirmation. Est-ce normal ?
Questions sur la livraison Mon colis n'est pas arrivé. Que dois-je faire ?
Quels sont les tarifs de livraison ?
Flèche vers le haut

Etape 1 : mise en place du moteur de la FAQ

C'est la partie la plus simple ! Rendez-vous dans la barre d'administration de votre site et cliquez sur Paramètres > Modifier le head. Dans la fenêtre de saisie qui apparaît, copiez-collez ce code sans rien y changer :

<!-- Moteur de la FAQ -->

<script type="text/javascript">
//<![CDATA[
function Show(id){
document.getElementById(id).style.display = "";
}
function Toggle(id){
var o = document.getElementById("ans"+id);
if(o.style.display == "") o.style.display = "none"; else o.style.display = "";
}
//]]>
</script>

N'oubliez pas d'enregistrer vos changements, sans vous préoccuper du message qui apparaît en vert (il est purement informatif).

Flèche vers le haut

Etape 2 : création d'une FAQ simple

Maintenant que le moteur de la FAQ est en place, il vous reste à créer la FAQ en elle-même.

Où insérer les codes fournis ?

A l'endroit où vous voulez qu'apparaisse votre FAQ, ajoutez un élément Widget/HTML :

Screenshot : widget/HTML
Insertion d'un élément Widget/HTML

Vous allez écrire votre FAQ dans le cadre de saisie qui apparaît.

Le code à copier-coller

Un couple question-réponse correspond à ce bloc de code :

<!-- bloc X -->
<a href="javascript:Toggle(X)" class="qfaq">Question X</a><br />
<div id="ansX" class="rfaq" style="display:none;">
    Réponse X
</div>

Copiez-collez autant de blocs de code que vous avez de questions en veillant bien à :

  • ce qu'il n'y ait pas deux blocs portant le même numéro (pas deux "bloc 4" par exemple)
  • remplacer le X en rouge dans le code par le même chiffre pour chaque bloc de code. Par exemple, pour le bloc 4, le 4 doit être répété comme suit :
<!-- bloc 4 -->
<a href="javascript:Toggle(4)" class="qfaq">Votre question</a><br />
<div id="ans4" class="rfaq" style="display:none;">
   Votre réponse
</div>

Un exemple de FAQ

Voici le code qu'on obtient donc pour une FAQ de 3 questions-réponses :

<!-- bloc 1 -->
<a href="javascript:Toggle(1)" class="qfaq">Question 1</a><br />
<div id="ans1" class="rfaq" style="display:none;">
    Réponse 1
</div>

<!-- bloc 2 -->
<a href="javascript:Toggle(2)" class="qfaq">Question 2</a><br />
<div id="ans2" class="rfaq" style="display: none;">
    Réponse 2
</div>

<!-- bloc 3 -->
<a href="javascript:Toggle(3)" class="qfaq">Question 3</a><br />
<div id="ans3" class="rfaq" style="display: none;">
    Réponse 3
</div>

Pour un aperçu du résultat obtenu, reportez-vous à la démo n°1.

Screenshot : démo n°1
Une FAQ simple (démo n°1)
Flèche vers le haut

Etape 3 : création des rubriques

Une fois que vous avez fait votre FAQ simple, vous pouvez, si vous le souhaitez, ajouter un classement par rubriques. (Cette étape est donc facultative).

Réordonner les couples de questions-réponses par thèmes

Vous allez déplacer les blocs de code et les réordonner par thèmes. En effet, les blocs n'ont pas besoin d'être en ordre suivi.

 

Prenons l'exemple de la FAQ d'une boutique en ligne. Dans le code ci-dessous, j'ai déplacé mes blocs pour les regrouper en deux thèmes : les blocs 5 et 10 portent sur le thème du paiement et les blocs 3 et 6 traitent de la livraison. (Imaginez par ailleurs que les blocs 1, 2, 8 et 9 ont été regroupés pour former un ou deux autres thèmes et que les blocs 4 et 7 ont disparu, car j'ai finalement supprimé ces questions) :

<!-- bloc 5 -->
<a href="javascript:Toggle(5)" class="qfaq">Question paiement</a><br />
<div id="ans5" class="rfaq" style="display:none;">
    Réponse paiement
</div>

<!-- bloc 10 -->
<a href="javascript:Toggle(10)" class="qfaq">Question paiement</a><br />
<div id="ans10" class="rfaq" style="display: none;">
    Réponse paiement
</div>

<!-- bloc 3 -->
<a href="javascript:Toggle(3)" class="qfaq">Question livraison</a><br />
<div id="ans3" class="rfaq" style="display: none;">
    Réponse livraison
</div>

<!-- bloc 6 -->
<a href="javascript:Toggle(6)" class="qfaq">Question livraison</a><br />
<div id="ans6" class="rfaq" style="display: none;">
    Réponse livraison
</div>

Ajouter le code des rubriques

Nos FAQ étant regroupées par thèmes, nous allons maintenant ajouter le code qui forme la rubrique. Ce code fonctionne comme une capsule : il y a un bout de code à coller au début de la rubrique qu'on veut créer et un bout de code à coller à la fin :

<fieldset class="cadrefaq">
<legend class="titrefaq">Titre de la rubrique</legend>

... Ici se trouvent les blocs d'un même thème

</fieldset>

Reprenons notre exemple précédent. J'encapsule mes blocs 5 et 10 avec le code surligné en jaune pour former ma première rubrique "Paiement". Puis, j'encapsule mes blocs 3 et 6 avec le code surligné en orange pour former ma seconde rubrique "Livraison" :

<fieldset class="cadrefaq">
<legend class="titrefaq">Le paiement (rubrique 1)</legend>

<!-- bloc 5 -->
<a href="javascript:Toggle(5)" class="qfaq">Question paiement</a><br />
<div id="ans5" class="rfaq" style="display:none;">
    Réponse paiement
</div>

<!-- bloc 10 -->
<a href="javascript:Toggle(10)" class="qfaq">Question paiement</a><br />
<div id="ans10" class="rfaq" style="display: none;">
    Réponse paiement
</div>

</fieldset>

<fieldset class="cadrefaq">
<legend class="titrefaq">La livraison (rubrique 2)</legend>

<!-- bloc 3 -->
<a href="javascript:Toggle(3)" class="qfaq">Question livraison</a><br />
<div id="ans3" class="rfaq" style="display: none;">
    Réponse livraison
</div>

<!-- bloc 6 -->
<a href="javascript:Toggle(6)" class="qfaq">Question livraison</a><br />
<div id="ans6" class="rfaq" style="display: none;">
    Réponse livraison
</div>

</fieldset>

Voici une capture du résultat obtenu :

Screenshot : 2 rubriques
Les deux rubriques sont en place

Pour une démonstration active, reportez-vous à la démo n°2.

Flèche vers le haut

Etape 4 : personnalisation avancée du design

Il vous reste maintenant à personnaliser le design de votre FAQ. Pour les novices et les plus pressés, j'ai préparé des feuilles de style, prêtes à l'emploi : il n'y a qu'à les copier-coller. Pour les utilisateurs plus avancés, je détaille les instructions que vous pouvez manipuler pour créer votre propre style.

Où insérer les codes fournis ?

Dans la barre d'administration de votre site, cliquez sur Paramètres > Modifier le Head :

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

C'est dans la fenêtre de saisie que vous aller copier-coller les codes CSS fournis.

Guide de personnalisation

Basiquement, il y a 4 éléments que vous pouvez styler dans la feuille de style :

  1. .cadrefaq : le cadre de la rubrique
  2. .titrefaq : le titre de la rubrique
  3. a.qfaq : la question
  4. .rfaq : la réponse

Voici les diverses propriétés de style pour chaque élément, avec quelques explications.

.cadrefaq : le cadre de la rubrique

.cadrefaq { 
padding: 10px; /* taille de la marge intérieure */
margin: 5px; /* taille de la marge extérieure */
color: #87C100; /* couleur du titre de la rubrique */
background-color: #ccc; /* couleur de fond du cadre */
border: 1px solid #87C100; /* couleur du cadre de la rubrique */
/* les lignes qui suivent dessinent l'arrondi des coins, effacez-les pour vous en débarrasser */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

Je vous recommande de ne pas toucher aux valeurs des marges. Changez les couleurs en suivant les commentaires du code. Les couleurs apparaissent sous forme hexadécimale, c'est-à-dire sous la forme d'un # suivi de 3 chiffres (par exemple, blanc = #fff) ou de 6 chiffres (par exemple, gris très clair = #efefef). Pour l'arrondi des angles, vous pouvez accentuer ou diminuer l'arrondi en remplaçant la valeur 5px par une autre plus grande (10px) ou plus petite (2px). Faites le changement sur les 4 dernières lignes de code.

.titrefaq : le titre de la rubrique

.titrefaq { 
font-size: 18px; /* taille de la police du titre de la rubrique */
font-weight: bold; /* titre en gras */
}

Vous pouvez augmenter ou réduire la taille du titre de la rubrique en utilisant dans le code des valeurs plus grandes (22px) ou plus petites (15px). Si vous ne voulez pas que le titre soit en gras, supprimez la ligne font-weight.

a.qfaq : la question

a.qfaq { 
display: inline-block; /* ne pas toucher à cette ligne */
text-decoration: none; /* enlever le soulignement des liens */
padding: 2px 5px; /* marges intérieures */
margin: 3px; /* marges extérieures */
font-weight: bold; /* écriture en gras de la question */
color: #009AFF; /* couleur de la question */
border: 1px solid #ccc ; /* bordure autour de la question */
background-color: #E4F2FC; /* couleur de fond de la question */
/* les lignes qui suivent dessinent l'arrondi du fond de la question, effacez-les pour vous en débarrasser */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

Normalement, vous n'avez pas besoin de toucher aux premières lignes (display, text-decoration, padding, margin). Vous pouvez supprimer la ligne font-weight si vous ne voulez pas que les questions soient écrites en gras. Ensuite, vous pouvez choisir la couleur du texte, celle du fond de la question, ainsi que la couleur de la bordure autour de la question. Si vous ne voulez pas de couleur de fond, écrivez dans le code background-color: none; . Si vous ne voulez pas de bordure, écrivez border: 0px; Vous pouvez enfin modifier l'arrondi des angles de la question en remplaçant, dans les dernières lignes de code, la valeur 5px par une autre, plus grande ou plus petite.

.rfaq : la réponse

.rfaq {
padding: 5px; /* marges intérieures */
margin: 3px; /* marges extérieures */
border: 1px slid #F1F1F1; /* bordure autour de la réponse */
background-color: #fff; */ couleur du fond de la réponses */
color: #888; /* couleur des réponses */
/* les lignes qui suivent dessinent l'arrondi du fond des réponses, effacez-les pour vous en débarrasser */
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
}

Normalement, vous n'avez pas besoin de toucher aux premières lignes (padding, margin). Par contre, vous pouvez choisir la couleur du texte de la réponse, celle du fond, ainsi que la couleur de la bordure autour de la réponse. Si vous ne voulez pas de couleur de fond, écrivez dans le code background-color: none; . Si vous ne voulez pas de bordure, écrivez border: 0px; Vous pouvez enfin modifier l'arrondi des angles de la réponse en remplaçant, dans les dernières lignes de code, la valeur 8px par une autre, plus grande ou plus petite.

Un outil précieux : le colorpicker

Vous le voyez, l'essentiel de votre personnalisation consistera à choisir les couleurs de votre FAQ pour qu'elle s'accorde au design de votre site. Les couleurs dans les codes sont écrites en code hexadécimal : ainsi le blanc est-il codé #fff et le noir #000.

 

Pour vous aider à trouver le code hexadécimal de la couleur de votre choix, je vous recommande d'utiliser cet outil :

Promenez-vous sur la palette et cliquez sur une couleur pour récupérer son code hexadécimal (#......) Vous pouvez le mémoriser en cliquant sur le bouton Copy.

Flèche vers le haut

Feuilles de style prêtes à l'emploi

Voici 3 habillages possibles pour votre FAQ. Vous pouvez copier-coller votre style préféré sans rien changer au code donné ou le copier-coller en modifiant les couleurs aux endroits indiqués.

Feuille de style n°1

C'est le style des FAQ mises en démonstration au début de ce tutoriel. Le cadre des rubriques est arrondi, les questions apparaissent en bleu sur un fond coloré aux bords arrondis et les réponses ne sont pas spécialement stylées.

Aperçu

Screenshot : aperçu du style n°1

Code CSS

<style type="text/css">
/*<![CDATA[*/

/* Style n°1 de FAQ */

.cadrefaq { 
padding: 10px;
margin: 5px;
color: #87C100; /* couleur du texte */
background-color: none; /* couleur du fond du cadre */
border: 1px solid #87C100; /* couleur du cadre */
/* les lignes qui suivent dessinent l'arrondi des coins */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; } .titrefaq { font-size: 18px; /* taille de la police du titre de la rubrique */ font-weight: bold; /* titre en gras */ } a.qfaq { display: inline-block; text-decoration: none; padding: 2px 5px; margin: 3px; font-weight: bold; /* écriture en gras de la question */ color: #009AFF; /* couleur de la question */ border: 0px; /* pas de bordure */ background-color: #E4F2FC; /* couleur de fond de la question */
/* les lignes qui suivent dessinent l'arrondi du fond de la question */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; } .rfaq { padding: 3px; margin: 3px; color: #999; /* couleur du texte de la réponse */ border: 0px; /* pas de bordure */ background-color: none; /* pas de couleur de fond */ } /*]]>*/ </style>

Feuille de style n°2

Cette FAQ diffère de la précédente car le fond de la rubrique est coloré. Les bords du cadre sont toujours arrondis. Cette fois, les questions ne sont pas spécialement stylées ; en revanche, les réponses le sont avec leur fond blanc, leur fine bordure pointillée et leurs coins arrondis. 

Aperçu

Screenshot : aperçu du style n°2

Code CSS

<style type="text/css">
/*<![CDATA[*/

/* Style n°2 de FAQ */

.cadrefaq { 
padding: 10px;
margin: 5px;
color: #A69B85; /* couleur du titre de la rubrique */
border: 1px solid #A69B85; /* couleur du cadre de la rubrique */
background-color: #F1F1F1; /* fond du cadre de la rubrique */
/* les lignes qui suivent dessinent l'arrondi du cadre */ border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; } .titrefaq { font-size: 16px; /* taille du titre de la rubrique */ font-weight: bold; /* titre en gras */ } a.qfaq { display: inline-block; text-decoration: none; font-weight: bold; /* questions en gras */ padding: 2px 5px; margin: 3px; border: 0px; /* pas de bordure autour des questions */ background-color: none; /* pas de fond coloré */ color: #9B887E; /* couleur des questions */ } .rfaq { padding: 5px; margin: 3px; border: 1px dotted #F1F1F1; /* bordure colorée en pointillés autour des réponses */ background-color: #fff; */ fond blanc des réponses */ color: #888; /* couleur des réponses */
/* les lignes qui suivent dessinent l'arrondi du fond des réponses */ border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; } /*]]>*/ </style>

Feuille de style n°3

Avec cette FAQ, on abandonne les angles arrondis pour la rubrique. Les questions sont peu stylées ; ce sont les réponses qui sont mises en valeur grâce à un fond légèrement coloré.

Aperçu

Screenshot : aperçu du style n°3 de FAQ

Code CSS

<style type="text/css">
/*<![CDATA[*/

/* Style n°3 de FAQ */

.cadrefaq { 
padding: 10px;
margin: 5px;
color: #D56360; /* couleur du cadre de la rubrique et du titre */
background-color: none; /* pas de fond coloré */
border: 1px solid #D56360; /* une bordure colorée */
}

.titrefaq { 
font-size: 17px; /* taille du titre de la rubrique */
font-weight: bold; /* titre en gras */
}

a.qfaq { 
display: inline-block;
text-decoration: none;
font-weight: bold; /* question en gras */
padding: 2px 5px;
margin: 0px;
border: 0px; /* pas de bordure */
background-color: none; /* pas de couleur de fond */
color: #59649B; /* couleur des questions */
}

.rfaq {
padding: 5px;
margin: 3px;
border: 0px; /* pas de bordure */
background-color: #FFFDF9; /* couleur de fond des réponses */
color: #D56360; /* couleur des réponses */
/* les lignes qui suivent dessinent l'arrondi des réponses */ -moz-border-radius: 6px; -webkit-border-radius: 6px;
-o-border-radius: 6px; border-radius: 6px; } /*]]>*/ </style>
Print Friendly and PDF

Commentaires, avis et critiques

Écrire commentaire

Commentaires : 4
  • #1

    Olivier (mardi, 23 juillet 2013 11:40)

    Bonjour, J'ai également proposé un petit tuto pour faire une FAQ sur Jimdo :

    http://www.zekoolweb.com/snippet/creer-une-faq-en-3-min/

    Bonne continuation

  • #2

    Isabelle (vendredi, 04 octobre 2013 22:11)

    @Olivier : excellent tutoriel ! Je recommande +++++ !

  • #3

    carteducieltest (vendredi, 01 novembre 2013 18:26)

    Bonjour,

    J'ai choisi la feuille de style no.2 et ça ne fonctionne pas tout à fait. Les coins ne sont pas arrondis pourquoi??? est-ce a cause du texte choisi et des puces???
    Merci de me répondre

    http://carteducieltest.jimdo.com/me-joindre/
    http://carteducieltest.jimdo.com/me-joindre/rendez-vous/

    Françoise

  • #4

    Isabelle (lundi, 20 janvier 2014 14:27)

    @carteduciel : pas de problème pour moi sur Mac / Chrome. Les coins sont bien arrondis dans vos formulaires. Peut-être est-ce un problème de navigateur (IE par exemple est super mal foutu... ) ?

Ruban