Widget de formulaire (code intégré)

Introduction

Le code d'intégration est constitué de quelques lignes 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 susceptible aux erreurs. En outre, l'une des choses les plus importantes concernant le widget de formulaire est que chaque fois que vous apportez une modification à votre formulaire dans le générateur de formulaire, le formulaire intégré sera automatiquement mis à 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, puisqu'il crée l'iFrame, il peut également le redimensionner, ce qui signifie qu'il n'est pas nécessaire de mettre à jour le code à chaque fois que vous apportez une modification. De plus, lorsque vous conservez un formulaire dans un iFrame, vous évitez également qu'il n'entre en conflit avec les éléments JavaScript ou CSS existants sur votre page.

Quel formulaire de code intégré dois-je utiliser

À l'heure actuelle, iform4u propose deux options pour publier un formulaire sur votre site Web :

1. Embed with Design : Permet de publier le formulaire avec le thème qui a été appliqué au formulaire.
2. Intégrer sans design : Permet de publier le formulaire sans aucun thème, même si vous en avez appliqué un à votre formulaire.

Habituellement, la première option est celle que vous devez 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 de champ ou l'alias de champ comme clé de paramètre, puis la valeur attribuée à ce paramètre apparaîtra dans le champ.

Remarque : Si vous utilisez un formulaire en plusieurs étapes, vous pouvez accéder à une page spécifique en ajoutant le numéro de page à l'URL. Par exemple, pour accéder à 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 Form Widget, il vous suffit d'ajouter un écouteur d'événement à votre page web. Par exemple, si vous avez besoin de connaître un identifiant de soumission à partir de votre propre page Web, vous pouvez ajouter ce code sous le 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("Submission saved with ID", data.data.id);        }    }}

Paramètre du widget de formulaire

Le widget de formulaire (code intégré) comporte deux parties :

1. 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é.
2. Un code Javascript chargé d'afficher le formulaire et d'initialiser le Form Tracker (si Analytics est activé).

Le widget de formulaire permet de paramétrer 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, accédez 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, pointe vers l'ID DIV qui contient le lien vers le formulaire. Par exemple:'container': 'c132'
• Largeur : Spécifie la largeur de l'iframe du formulaire. Par exemple:'width': '100%'
• Hauteur : Spécifie la hauteur de l'iframe du formulaire. Habituellement, le code intégré est défini avec une valeur en pixels. Cette valeur est calculée par le Form Builder au moment de sa création. Par exemple:'height': '846px'
• Redimensionnement automatique : Par défaut, est activé. Indique si l'iframe peut être automatiquement redimensionnée à la hauteur réelle du formulaire. Par exemple, lorsque des messages de validation sont affichés. S'il est défini sur false, le formulaire ne se redimensionne pas et sa hauteur sera définie dans l'option "hauteur". Par exemple:'autoResize': !0
• Thème : Par défaut, est activé. 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
• personnalisé : par défaut, est activé. Est une valeur entière (1 ou 0) qui permet d'activer ou de désactiver le chargement de fichiers javascript externes à la volée. Par exemple:'customJS': 1
• Enregistrement : Par défaut, est activé. Est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver Form Tracker à la volée. Par exemple:'record': 1
• Réinitialiser : Par défaut, est activé. Est une valeur entière (1 ou 0) qui vous permet d'activer ou de désactiver la réinitialisation du formulaire lorsque le formulaire est soumis. Par exemple:'reset': 0
• Page : Dans un formulaire en plusieurs étapes, cette option spécifie la page que nous souhaitons afficher par défaut. Par exemple, pour afficher la deuxième page :'page': 2
• Formulaire : Spécifie le chemin d’accès à l’intégration du formulaire. Il ne contient aucun paramètre.
• addToOffsetTop : Par défaut, vaut 0. Ajoutez ou soustrayez un certain nombre de pixels à OffsetTop avant de calculer l'emplacement du formulaire. Cela permet de corriger l'emplacement du formulaire lorsque des éléments html du site Web (comme un en-tête) ont la propriété CSS : "fixed". Par exemple:'addToOffsetTop': '-60'
• Valeurs par défaut : Si vous souhaitez pré-remplir les champs du formulaire avec des valeurs par défaut, vous pouvez utiliser cette option. Les valeurs par défaut sont un objet JSON où votre clé est l'identifiant du champ du formulaire et sa valeur est le contenu du champ. Par exemple:

'defaultValues': {    'text_0': 'This is my default value'}

Notez que les cases à cocher et les boutons radio seront sélectionnés avec des valeurs booléennes. Par exemple:

'defaultValues': {    'text_0': 'This is my default value',    'checkbox_0': true}

Le widget de formulaire contient de nombreuses fonctionnalités et options qui peuvent être configurées dans un fichier JavaScript externe.

Remarque : Pour charger un fichier JavaScript, vous devez accéder à Formulaires -> Actions -> Paramètres -> Paramètres de l'interface utilisateur.

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() {  // Here we can interact with the Form});

L'élément Formulaire

L'élément Form - formEl - est un objet jQuery auquel vous pouvez accéder pour obtenir des informations et/ou les manipuler directement. Par exemple, nous allons connaître le haut de notre formulaire avec les lignes de code suivantes :

$( document ).ready(function() {  console.log('The form height is', formEl.height());});

À l'écoute des événements

Certains événements sont déclenchés lorsque le formulaire fait quelque chose.

• view : Cet événement sera déclenché lorsqu’un formulaire aura é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 générera une erreur de validation.
• success : Cet événement sera déclenché lorsque le formulaire aura été soumis avec succès.
• nextStep : Cet événement sera déclenché à chaque fois que vous passerez à l'étape suivante sous une forme en plusieurs étapes.
• previousStep : Cet événement sera déclenché à chaque fois que vous reculerez d'une étape dans un formulaire multi-étapes.

Un exemple très simple pour détecter l'échec d'un formulaire serait :

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Track a server validation error */          /* What happens here would be dependent on your analytics product! */    });});

Le moteur de règles déclenche également les événements suivants lorsqu'un champ est affiché ou masqué à l'aide de 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 aura été affiché.
• ef.hidden : Cet événement sera déclenché lorsqu'un champ aura été masqué.

Ensuite, pour interagir avec ces événements, écrivez simplement les écouteurs d'événements. Par exemple:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("This text field has been shown.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("This text field has been hidden.")  });});

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 une page sur un formulaire multi-étapes prêt à être utilisé à l'aide de JavaScript. Par exemple, nous allons maintenant voir comment transférer une page sans appuyer sur le bouton « Suivant » grâce à la fonction d'avance automatique.

Avance automatique dans les formulaires en plusieurs étapes

Par défaut, lorsque vous créez un formulaire multi-étapes, deux boutons de navigation sont ajoutés automatiquement : « Précédent » et « Suivant » en bas du formulaire. Ces boutons vous permettent de naviguer dans le formulaire jusqu'à atteindre la dernière page où est habituellement placé le bouton Soumettre.

Remarque : iform4u vous permet d'ajouter plusieurs boutons Soumettre sur différentes pages ou parties du formulaire.

Cependant, dans certains cas d'utilisation, vous souhaiterez peut-être passer directement à la page suivante sans appuyer sur aucun bouton. Pour cela, nous utiliserons le gestionnaire d'événements « nextStep ».

Remarque : Certains cas d'utilisation dans lesquels cette fonctionnalité est utile sont les enquêtes et/ou les tests pour lesquels il n'est pas autorisé de modifier la réponse et permettent de terminer l'enquête dès que possible.

Par exemple, avec les lignes de code suivantes, nous allons indiquer à notre formulaire qu'à 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 attribué à votre formulaire :

.previous, .next {    display: none !important;}

Téléchargez plusieurs fichiers JavaScript et CSS dans notre formulaire

En disposant de 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 Date

Par exemple, avec les lignes de code suivantes, nous afficherons un DatePicker jQuery UI dans les champs 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 for show the datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Consistent format with the HTML5 picker                        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 au sein de la fonction done() .
• La fonction exécute essentiellement 3 instructions :
  1. Recherchez tous les champs de type « date » et convertissez chaque champ « date » en « texte ».
  2. Clonez chaque champ Date dans un champ Texte qui affiche le DatePicker.
  3. Masque le champ Date, car sa valeur sera établie automatiquement par le DatePicker, par les attributs : altField et altFormat .