Widget de Formulaire (Code d'Intégration)
Introduction
Les codes d'intégration sont quelques lignes de HTML et JavaScript que vous pouvez utiliser pour intégrer un formulaire iform4u dans votre propre site web. C'est le moyen le plus simple d'afficher un formulaire sur votre site et la méthode la moins sujette aux erreurs. De plus, l'un des aspects les plus importants du widget de formulaire est que chaque fois que vous apportez une modification à votre formulaire dans le constructeur de formulaires, le formulaire intégré se mettra automatiquement à jour.
Le Widget de Formulaire a été conçu pour fonctionner sur n'importe quelle page web. Notre Widget de Formulaire crée essentiellement un iFrame à la volée, et le formulaire y sera chargé. Ensuite, comme il crée l'iFrame, il peut également la redimensionner, ce qui signifie qu'il n'est pas nécessaire de mettre à jour le code chaque fois que vous effectuez un changement. De plus, en gardant un formulaire à l'intérieur d'un iFrame, vous évitez également les conflits avec les éléments JavaScript ou CSS existants sur votre page.
Quel Code d'Intégration de Formulaire Devrais-Je Utiliser
Actuellement, iform4u propose deux options pour publier un formulaire sur votre site web :
- Intégrer avec Design : Vous permet de publier le formulaire avec le thème qui a été appliqué au formulaire.
- Intégrer sans Design : Vous permet de publier le formulaire sans aucun thème, même si vous en avez appliqué un à votre formulaire.
Généralement, la première option est celle que vous devriez utiliser.
Comment Remplir un Champ avec une Chaîne de Requête
Vous pouvez remplir un champ avec des paramètres d'URL. Assurez-vous simplement d'utiliser l'ID du Champ ou l'Alias du Champ comme clé du paramètre, puis la valeur assignée à ce paramètre apparaîtra dans le champ.
Note : Si vous utilisez un Formulaire à Étapes Multiples, vous pouvez accéder à une page spécifique en ajoutant le numéro de page à l'URL, par exemple pour aller à la deuxième page ajoutez la chaîne de requête "p=2".
Comment Écouter les postMessages Envoyés par le Widget de Formulaire
Pour pouvoir écouter les messages envoyés par le Widget de Formulaire, vous devez simplement ajouter un écouteur d'événements à votre page web. Par exemple, si vous avez besoin de connaître un ID de soumission depuis votre propre page web, vous pouvez ajouter ce code en dessous du code d'intégration collé :
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.data) {
var data = JSON.parse(event.data);
if (typeof data.action !== "undefined" && data.action === "success") {
console.log("Soumission enregistrée avec l'ID", data.data.id);
}
}Paramètres du Widget de Formulaire
Le Widget de Formulaire (code d'intégration) se compose de deux parties :
- Un code HTML qui affiche le contenu par défaut si l'utilisateur accède au formulaire lorsque JavaScript est désactivé dans son navigateur. Par défaut, un lien vers votre formulaire au sein d'un élément DIV est affiché.
- Un code JavaScript qui est responsable de l'affichage du formulaire et de l'initialisation du Form Tracker (si l'Analytics est activé).
Le widget de formulaire vous permet de définir certaines options du formulaire à la volée :
- Id : ID du formulaire dans l'application. Par exemple :
'id': 132 - Sid : ID de soumission. Utilisez cette option pour modifier une soumission de formulaire précédemment collectée. Pour trouver l'ID de soumission, allez au Gestionnaire de Soumissions. Par exemple :
'sid': 964 - Container : ID de l'élément HTML où l'iframe du formulaire sera inséré. Par défaut, il pointe vers l'ID DIV qui contient le lien vers le formulaire. Par exemple :
'container': 'c132' - Width : Spécifie la largeur de l'iframe du formulaire. Par exemple :
'width': '100%' - Height : Spécifie la hauteur de l'iframe du formulaire. Généralement, le code d'intégration est défini avec une valeur en pixels. Cette valeur est calculée par le Constructeur de Formulaires au moment de sa création. Par exemple :
'height': '846px' - Auto Resize : Par défaut, activé. Indique si l'iframe peut redimensionner automatiquement à la hauteur réelle du formulaire. Par exemple, lorsque des messages de validation sont affichés. Si défini sur false, le formulaire ne redimensionne pas et sa hauteur sera définie dans l'option "height". Par exemple :
'autoResize': !0 - Theme : Par défaut, activé. C'est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver un thème à la volée. Par exemple :
'theme': 1 - Custom JS : Par défaut, activé. C'est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver le chargement de fichiers JavaScript externes à la volée. Par exemple :
'customJS': 1 - Record : Par défaut, activé. C'est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver le Form Tracker à la volée. Par exemple :
'record': 1 - Reset : Par défaut, activé. C'est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver la réinitialisation du formulaire lors de la soumission. Par exemple :
'reset': 0 - Page : Dans un Formulaire à Étapes Multiples, cette option spécifie la page que nous voulons afficher par défaut. Par exemple, pour afficher la deuxième page :
'page': 2 - Form : Spécifie le chemin vers l'intégration du formulaire. Il ne contient aucun paramètre.
- addToOffsetTop : Par défaut, 0. Ajoute ou soustrait un nombre de pixels à OffsetTop avant de calculer la position du formulaire. Cela permet de corriger la position du formulaire lorsque des éléments HTML sur le site (comme un en-tête) ont la propriété CSS : "fixed". Par exemple :
'addToOffsetTop': '-60' - Default Values : Si vous souhaitez pré-remplir les champs du formulaire avec des valeurs par défaut, vous pouvez utiliser cette option. Default Values est un objet JSON où votre clé est l'ID du champ du formulaire et sa valeur est le contenu du champ. Par exemple :
'defaultValues': { 'text_0': 'Ceci est ma valeur par défaut'}Notez que les cases à cocher et les boutons radio seront sélectionnés avec des valeurs booléennes. Par exemple :
'defaultValues': { 'text_0': 'Ceci est ma valeur par défaut', 'checkbox_0': true}Interagir avec le Formulaire via JavaScript
Le Widget de Formulaire contient de nombreuses fonctionnalités et options qui peuvent être configurées dans un fichier JavaScript externe.
Note : Pour charger un fichier JavaScript, vous devez aller dans Formulaires -> Actions -> Paramètres -> Paramètres UI.
Par défaut, un objet jQuery est disponible. Vous pouvez donc interagir avec le Formulaire de manière très simple en utilisant les lignes de code suivantes :
$(document).ready(function() {
// Ici, nous pouvons interagir avec le Formulaire
});L'élément Formulaire
L'élément Formulaire - formEl - est un objet jQuery auquel vous pouvez accéder pour obtenir des informations et/ou le manipuler directement. Par exemple, nous allons connaître la hauteur de notre formulaire avec les lignes de code suivantes :
$(document).ready(function() {
console.log('La hauteur du formulaire est', formEl.height());
});Écouter les Événements
Certaines événements sont déclenchés lorsque le Formulaire fait quelque chose.
- view : Cet événement sera déclenché lorsqu'un formulaire a été consulté.
- fill : Cet événement sera déclenché la première fois que vous interagissez avec le formulaire. Par exemple, en remplissant un champ de texte ou en sélectionnant un bouton radio.
- error : Cet événement sera déclenché lorsque le serveur a renvoyé une erreur de validation.
- success : Cet événement sera déclenché lorsque le Formulaire a été soumis avec succès.
- nextStep : Cet événement sera déclenché chaque fois que vous progressez vers l'étape suivante dans un formulaire à étapes multiples.
- previousStep : Cet événement sera déclenché chaque fois que vous revenez d'une étape dans un formulaire à étapes multiples.
Un exemple très basique pour détecter quand un formulaire échoue serait :
$(document).ready(function() {
formEl.on('error', function(event) {
/* Suivre une erreur de validation serveur */
/* Ce qui se passe ici dépendra de votre produit d'analytics ! */
});
});Le Moteur de Règles déclenche également les événements suivants lorsqu'un champ est affiché ou masqué en utilisant des règles conditionnelles :
Pour implémenter cette fonctionnalité, le moteur de règles déclenchera les événements suivants :
- ef.shown : Cet événement sera déclenché lorsqu'un champ a été affiché.
- ef.hidden : Cet événement sera déclenché lorsqu'un champ a été masqué.
Ensuite, pour interagir avec ces événements, il suffit d'écrire les écouteurs d'événements. Par exemple :
$(document).ready(function() {
$('#text_1').on('ef.shown', function(e) {
console.log("Ce champ de texte a été affiché.");
});
$('#text_1').on('ef.hidden', function(e) {
console.log("Ce champ de texte a été masqué.");
});
});Les Gestionnaires d'Événements : previousStep et nextStep
En plus des événements, iform4u propose deux gestionnaires d'événements qui vous permettent de reculer et d'avancer d'une page sur un formulaire à étapes multiples, prêts à être utilisés avec JavaScript. Par exemple, nous allons maintenant voir comment avancer d'une page sans appuyer sur le bouton "Suivant" en utilisant la fonctionnalité d'avance automatique.
Avance Automatique dans les Formulaires à Étapes Multiples
Par défaut, lorsque vous créez un Formulaire à Étapes Multiples, deux boutons de navigation sont ajoutés automatiquement : "Précédent" et "Suivant" en bas du formulaire. Ces boutons vous permettent de naviguer à travers le formulaire jusqu'à ce que vous atteigniez la dernière page où le bouton de soumission est généralement placé.
Note : iform4u vous permet d'ajouter plusieurs boutons de soumission sur différentes pages ou parties du formulaire.
Cependant, dans certains cas d'utilisation, vous pouvez vouloir avancer directement à la page suivante sans appuyer sur aucun bouton. Pour cela, nous allons utiliser le gestionnaire d'événements « nextStep ».
Note : Certains cas d'utilisation dans lesquels cette fonctionnalité est utile sont les enquêtes et/ou les tests où il n'est pas permis de changer de réponse et permet de compléter l'enquête le plus rapidement possible.
Par exemple, avec les lignes de code suivantes, nous allons dire à notre Formulaire que chaque fois qu'un bouton radio est sélectionné, le formulaire passera à la page suivante :
$(document).ready(function() {
$('input[type=radio]').on('change', nextStep);
});Enfin, si vous souhaitez masquer les boutons de navigation, vous pouvez ajouter les lignes suivantes dans le Thème CSS assigné à votre formulaire :
.previous, .next {
display: none !important;
}Télécharger Plusieurs Fichiers JavaScript et CSS dans notre Formulaire
En ayant l'objet jQuery, nous pouvons utiliser jQuery.when().done() pour charger plusieurs objets JavaScript et les utiliser une fois qu'ils sont prêts à être utilisés. Voyons l'exemple suivant.
Afficher un DatePicker jQuery UI dans un Champ de Date
Par exemple, avec les lignes de code suivantes, nous afficherons un DatePicker jQuery UI dans les champs de Date du formulaire :
$(document).ready(function() {
$.when(
$('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),
$.getScript("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"),
$.Deferred(function(deferred) {
$(deferred.resolve);
})
).done(function() {
$('body').css('padding-bottom', '200px'); // Padding pour afficher le datepicker
$('input[type=date]').each(function () {
$(this).attr('type', 'text').after(
$(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')
.datepicker({
// Format cohérent avec le sélecteur HTML5
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
altField: this,
altFormat: "yy-mm-dd"
})
).hide();
});
});
});Comme vous pouvez le voir :
- Nous chargeons 2 fichiers dans la fonction when() : jquery-ui.css et jquery-ui.min.js.
- Nous avons inséré une fonction qui s'exécutera lorsque les deux fichiers précédents seront chargés sur la page dans la fonction done().
- La fonction exécute essentiellement 3 instructions :
- Trouver tous les champs de type "date" et convertir chaque champ "date" en "text".
- Cloner chaque champ Date en un champ Texte qui affiche le DatePicker.
- Masquer le champ Date, car sa valeur sera établie automatiquement par le DatePicker, grâce aux attributs : altField et altFormat.
