En ce moment, la mode est aux chatbots, ces logiciels qui peuvent (plus ou moins bien) tenir une conversation avec un utilisateur humain.
Je me suis donc dit qu’il pouvait être amusant de recréer dans Divi un formulaire de contact qui s’inspire de ce principe.
Alors bien sûr, pas d’intelligence artificielle ici, mais une simple réutilisation dans le contexte des réponses données par l’utilisateur.
Ajoutez à ça une interface graphique rappelant les messageries instantanées et vous donnerez l’illusion d’une conversation.

Avant-propos

Pour créer ce formulaire, j’ai choisi d’utiliser le plugin Caldera Forms que vous trouverez sur le repository de WordPress.
Il aurait été possible de faire ça avec le module Formulaire de Divi, mais cela aura été bien plus compliqué car :

• Il a bien moins de souplesse au niveau de la disposition des champs.
  Il aurait donc fallu écrire beaucoup plus de CSS, alors qu’avec le constructeur de formulaires de Caldera Forms, on obtient un template sur-mesure en quelques clics.
• Il ne possède pas le système de “magic tags” de Caldera Forms qui permet de réutiliser où bon nous semble les données saisies dans un champ. Il aurait été possible de répliquer cette fonctionnalité avec jQuery, mais là encore, il aurait fallu produire beaucoup de lignes de code.

Si vous voulez en savoir plus sur Caldera Forms, je vous invite à lire mon article 5 bonnes raisons de choisir Caldera Forms.

Préparez le formulaire

Créez un nouveau formulaire

Une fois Caldera Forms installé et activé, créez un nouveau formulaire en choisissant un template “Formulaire vide” que vous nommerez comme il vous convient.

Ajoutez les champs nécessaires

Insérez un champ de type HTML

Et configurez-le comme suit.

Notez particulièrement la classe personnalisée form-robot qui nous servira ultérieurement pour styler en CSS tous les champs concernant le robot (les bulles bleues dans mon exemple).

Ajoutez une nouvelle ligne

Cliquez ensuite sur l’encadré avec le gros + au centre pour ajouter une nouvelle ligne à votre formulaire.

Nous ne mettrons pas tous les champs dans la même ligne pour des facilités de disposition des éléments.
De plus, si par la suite vous vouliez pousser plus en avant la personnalisation graphique de votre formulaire, ceci vous donnera plus de possibilités.

Insérez un champ de type Texte sur une ligne

Vous remarquerez que :

• J’ai coché la case Cacher le titre, afin que celui-ci ne s’affiche pas au-dessus du champ, comme c’est le cas par défaut, mais en tant que placeholder (Le “Remplaçant fictif” dixit Caldera Forms).
• J’ai coché la case Requis car ce champ devra être obligatoirement rempli par l’utilisateur pour valider le formulaire.
• J’ai ajouté une classe CSS nommée form-user. Celle-ci ciblera tous les champs que l’utilisateur devra remplir (les bulles grises dans mon exemple).
• J’ai renseigné le “Remplaçant fictif” de manière à donner une indication à l’utilisateur.

Ajoutez une nouvelle ligne avec un champ de type HTML

2 particularités pour la configuration de ce champ :

• En plus de la classe form-robot, on ajoute une nouvelle classe champ-cache qui permettra de masquer avec CSS les champs qui se la verront attribuer.
• Dans le contenu, vous avez sans doute remarqué %prenom%. Il s’agit d’un “magic tag” de Caldera Forms qui permet de récupérer la valeur d’un champ.
  Il suffit simplement de saisir le slug d’un champ (son identifiant) entre 2 signes %.

Continuez à ajouter lignes et champs

Vous pouvez continuer à ajouter d’autres champs pour compléter votre formulaire selon votre envie. Mais n’oubliez pas :

• d’alterner les classes form-robot et form-user
• d’attribuer systématiquement la classe champ-cache
• de cocher la case Requis

Insérez un champ de type Bouton

Pour terminer la construction de votre formulaire, insérez un champ Bouton qui servira à envoyer votre formulaire.

La seule particularité sur ce champ est qu’il faut bien lui attribuer le type Soumettre afin qu’il puisse être en mesure de transmettre les données du formulaire.

Un aperçu global du template du formulaire

Voici à quoi ressemble, dans le form builder de Caldera Forms, le template du formulaire que j’ai créé pour l’exemple de démonstration.

Configurez votre formulaire

Les réglages du formulaire

Cliquez maintenant sur le gros bouton vert Réglages du formulaire.
Il y a 2 options qu’il vous faut configurer en particulier.

Le message de succès

Celui s’affichera lorsque l’utilisateur cliquera sur le bouton de soumission du formulaire et que tous les champs seront valides.
Là aussi, vous pouvez ajouter un “magic tag”.

Désactiver le masquage du formulaire après son envoi

Par défaut, lorsqu’un formulaire Caldera Forms est soumis, celui-ci disparait de l’écran pour laisser sa place au message de succès.
Il vous suffit juste de décocher la case pour désactiver cette option. 

Les réglages de notification

Pour finir, allez dans l’onglet De et spécifiez l’adresse mail de l’expéditeur, celle du destinataire, l’objet du mail, etc.
À moins que vous ne souhaitiez conserver que la consultation des entrées de formulaires stockées en base de données et accessibles dans la rubrique Entrées du formulaire concerné ? Dans ce cas, cliquez sur Désactivez les e-mails en haut de la page De.

Insérez le formulaire

Maintenant que le formulaire est prêt, il vous faut l’insérer sur la page voulue.

Récupérez le shortcode du formulaire

Il s’agit d’un code du type caldera_form id=”CF5b80691cc95f9″ que vous pourrez trouver à 2 emplacements :

• Dans les Réglages du formulaire, sous l’intitulé Code court

• Sur la page d’options principale de Caldera Forms, là où sont listés tous les formulaires existants sur votre site

Dans un cas comme dans l’autre, copiez le shortcode et mettez-le de côté car vous allez très bientôt en avoir besoin.

Allez sur la page de votre choix

Ajoutez un module Texte

Dans Texte -> Contenu -> Texte, collez le shortcode correspondant à votre formulaire.

Comme je l’ai déjà expliqué dans mon tutoriel Créez une rubrique offres d’emploi, je préfère utiliser un module Texte (plutôt qu’un module Code) pour insérer mes formulaires Caldera Forms, car ceci permet d’utiliser les réglages de texte du module pour styler les labels des champs.
En l’occurence, dans mon exemple, la police, la graisse et le corps du texte sont définis par le module Texte de Divi.

Ajoutez un module Code

Et oui, il va tout de même vous falloir un module Code ! Ceci pour insérer les lignes de jQuery qui vont servir à dynamiser le formulaire.
De préférence, disposez le module Code de manière à ce qu’il soit placé avant le module Texte dans votre page.

Un aperçu du résultat intermédiaire

À cette étape de votre travail, une fois que vous avez enregistré les modifications de votre page dans le Divi Builder, vous devriez avoir un formulaire basique qui s’affiche.
Il vous faut désormais ajouter “quelques lignes” de CSS pour enjoliver tout ça !

Enjolivez votre formulaire chatbot avec CSS

Si vous ne savez pas où ajouter les lignes de CSS que je vais vous indiquer, je vous conseille de lire mon tutoriel 7 manières d’ajouter des CSS à Divi.

Stylez les bulles

Commencez par créer les bulles, il s’agit de l’élément graphique le plus récurrent dans ce formulaire.

.form-robot {
    width: 55%!important;
    min-height: 70px;
    background: #0aa7dc;
    position: relative;
    color: #fff;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.form-robot:before, #caldera_notices_1 .alert-success::before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 25px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

.form-user {
    width: 55%!important;
    min-height: 70px;
    background: #aab7bb;
    position: relative;
    color: #fff;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 15px;
    float:right;
    margin-bottom: 20px;
}

.form-user:before {
    content: "";
    width: 0;
    height: 0;
    left: 100%;
    top: 25px;
    position: absolute;
    border-top: 13px solid transparent;
    border-left: 26px solid #8c979a;
    border-bottom: 13px solid transparent;
}

.champ-cache {
    display: none;
}

Détaillons brièvement ce code

Vous avez certainement reconnu les classes .form-robot, .form-user et .champ-cache que vous aviez précisées comme classes personnalisées lors de la création de votre formulaire ?

• Les 2 premières classes servent à créer le corps de la bulle.
• Ensuite, on style le pseudo-élément :before pour créer la petite pointe.
• Ligne 14 : notez qu’on ajoute également le sélecteur #caldera_notices_1 .alert-success::before car cette pointe servira également pour la bulle qui affichera le message de succès après l’envoi réussi du formulaire.
• Enfin, la classe .champ-cache nous sert à masquer les champs auxquels elle est attribuée ; nous les afficherons ensuite grâce à jQuery.

Stylez les inputs, les placeholders et le textarea

Vos bulles ont maintenant pris forme, mais vous pouvez constater que les champs de texte (les balises input et textarea) sont à affiner.

.caldera-grid input.form-control, .caldera-grid textarea.form-control {
    background: none!important;
    border: none!important;
    box-shadow: none!important;
    color: #fff!important;
    font-size: 16px;
}

.caldera-grid .form-control::-webkit-input-placeholder {
    color: rgba(255,255,255,0.6)!important;
}

.caldera-grid .form-control::-moz-placeholder {
    color: rgba(255,255,255,0.6)!important;
}

.caldera-grid .form-control:-ms-input-placeholder {
    color: rgba(255,255,255,0.6)!important;
}

.caldera-grid .form-control:-moz-placeholder {
    color: rgba(255,255,255,0.6)!important;
}

Détaillons brièvement ce code

• Lignes 1 à 7 : on se supprime le fond, la bordure et l’ombre portée des champs de texte. Et on ajuste les styles de la police.
• Lignes 8 à 23 : on définit une couleur un peu plus estompée pour les placeholders (les fameux “remplaçants fictifs”).
  Il faut faire les déclinaisons pour les divers types de navigateurs…

Stylez le bouton de soumission

Vous allez cette fois donner un style un peu plus “Divi” au bouton d’envoi du formulaire en personnalisant sont état normal et son état au survol.

.caldera-grid .btn-default[type=submit] {
    background: none;
    border: 2px solid #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
	border-radius: 6px;
    width: 30%;
    margin: auto!important;
	padding: 10px 25px;
    display: block;
    font-size: 16px;
}

.caldera-grid .btn-default[type=submit]:hover {
    background-color: #d8e1e4;
    border: 2px solid #fff;
    color: #0aa7dc;
}

Stylez le message de succès

Le message qui apparait lors de l’envoi réussi du formulaire doit aussi s’afficher dans une bulle.

#caldera_notices_1 .alert-success {
    width: 55%;
    min-height: 70px;
    background-color: #0aa7dc!important;
    border: none!important;
    position: relative;
    color:#fff!important;
    text-align: left;
    text-shadow: none;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

Stylez les messages d’erreur

Caldera Forms affiche une erreur quand :

• Un champ n’obtient pas la valeur attendue : par exemple une adresse e-mail non conforme (sans @, sans extension…)
• Un champ marqué comme Requis n’a pas été rempli

Vous allez donc améliorer les styles par défaut de Caldera Forms avec quelques lignes de CSS supplémentaires.

#caldera_notices_1 .alert-success {
    width: 55%;
    min-height: 70px;
    background-color: #0aa7dc!important;
    border: none!important;
    position: relative;
    color:#fff!important;
    text-align: left;
    text-shadow: none;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.caldera-grid .parsley-type, .caldera-grid .parsley-required {
    color: #b91b1b;
    font-size: 14px;
    font-weight: 600;
    float: right;
}

Affinez l’affichage sur mobiles

Afin que les bulles s’affichent au mieux sur petit écran, il est bon de les passer à 100% de largeur avec une règle de media query.

@media screen and (max-width: 640px) {
  .form-robot, .form-user, #caldera_notices_1 .alert-success {
    width: 100%!important;
  }
}

Dynamisez votre formulaire chatbot avec jQuery

Vous allez désormais remplir le module Code que je vous précédemment demandé d’insérer dans votre page.

Déclenchez un événement au clavier

Il s’agit tout d’abord de faire en sorte que lorsque l’utilisateur tape sur la touche Entrée de son clavier après saisie sa réponse, les 2 bulles suivantes s’affichent :

• celle avec la prochaine question du robot,
• celle contenant le champ pour la réponse de l’utilisateur.
  

Voici la fonction jQuery qui permet de réaliser cette action.

$( "#fld_2611698_1" ).focusin(function() {
	$( this ).keypress(function(e) {
		if(e.which == 13) {
			$( "#html-content-fld_3723406_1" ).slideDown( 200 );
			$( "#fld_4196570_1-wrap" ).delay( 2000 ).slideDown( 200 );
		}
	});
});

Détaillons ce code

• Ligne 1 : on définit dans quel champ l’utilisateur devra se trouver pour que l’action se réalise. On dit que c’est le champ qui détient le focus.
• Ligne 2  : on utilise l’événement .keypress() (littéralement : quand la touche est pressée).
• Ligne 3 :  on précise le code correspondant à la touche Entrée.
• Ligne 4 : on va afficher la bulle contenant la prochaine question du robot.
  • Vous vous souvenez de la classe CSS .champ-cache que nous avons attribuée à nos champs ?  Elle contenait un display: none.
    Et bien la méthode .slidedown() sait supprimer cette règle CSS en affichant l’élément avec un mouvement de glissé vers le bas. 
  • Le 200 entre parenthèses définit la durée de l’animation en milli-secondes.
• Ligne 5 : on affiche de la même manière la bulle contenant le champ pour la réponse d’utilisateur.
  À la différence près qu’on ajoute une méthode .delay() afin que l’effet sur ce champ s’exécute avec un léger différé ( 2s dans mon exemple).
  Ainsi, l’utilisateur aura le temps de lire (au moins en partie) la question avant que le champ pour la réponse n’apparaisse. Ça permet de focaliser son attention.

Répliquez ce schéma autant de fois que vous avez de bulles “question + réponse” à afficher.

Si vous ne savez pas comment obtenir les identifiants CSS des champs à cibler, je vous invite à lire mon article Utiliser les outils de développement du navigateur.

Déplacez le message de succès

Par défaut, dans Caldera Forms, le message de succès qui apparait lors de la soumission réussie d’un formulaire s’affiche avant celui-ci…
Pour respecter la logique de ce formulaire de type chatbot, vous devez donc le déplacer ce message de succès pour qu’il apparaisse à la suite de la conversation.

  $( "#caldera_notices_1" ).insertAfter( $( ".last_row" ) );

Détaillons ce code

• On cible le message de succès avec son identifiant CSS
• On utilise la méthode .insertAfter() pour littéralement insérer notre élément après un autre…
• … cet autre élément étant la dernière ligne du formulaire, à laquelle Caldera Forms attribue automatiquement la classe .last_row

Récapitulons le code jQuery nécessaire

• Pensez bien à encadrer votre code jQuery avec les balises <script> et </script>
• De même, il ne faut pas oublier que c’est lorsque le document (la page) est prêt que les fonctions doivent se déclencher : 
  jQuery(document).ready(function($){ … });

Ce qui nous donne :

<script>

jQuery(document).ready(function($){

/* 
** Principe pour l'affichage d'un groupe de bulles robot   utilisateur
** Continuer avec vos autres bulles sur le même modèle en modifiant les ID CSS
*/

  $( "#fld_2611698_1" ).focusin(function() {
  	$( this ).keypress(function(e) {
    	if(e.which == 13) {
    	  $( "#html-content-fld_3723406_1" ).slideDown( 200 );
        $( "#fld_4196570_1-wrap" ).delay( 2000 ).slideDown( 200 );
      }
    });
  });
  
/* 
** On déplace le message de succès après le dernier champ 
*/

  $( "#caldera_notices_1" ).insertAfter( $( ".last_row" ) );

});
</script>

Pour conclure

Voila, vous avez maintenant toutes les cartes en main pour créer votre propre formulaire reprenant les codes d’un chatbot dans Divi avec Caldera Forms.
À vous de voir comment vous souhaitez personnaliser vos questions, vos bulles, etc.

Pour vous aider à démarrer plus facilement, je vous propose de télécharger les fichiers que j’ai créés pour la page de démonstration.

Le ZIP contient :

• le fichier .json du template de formulaire Caldera Forms
• le fichier .json du layout de la page où est inséré le formulaire (avec le code jQuery dans son module Code)
• le fichier .css contenant les styles pour le formulaire

Partager