Formulaire Web | Administration | Centre d'aide NextGen

Introduction

Afin de vous permettre d’intégrer le formulaire Web directement dans l’une des pages de votre site Internet, un script d’intégration est mis à votre disposition dans la section Formulaire Web de l’onglet Canaux de l’application.

Le comportement du formulaire Web intégré est identique en tout point au comportement défini via l’easibox (gestion des contacts, création demande, champs personnalisés, validation des données, etc).

Prévisualisation

Une prévisualisation du formulaire Web est disponible dans la partie droite via 3 onglets :

Formulaire : prévisualisation des champs du formulaire (champs standards et champs personnalisés).
Succès : prévisualisation du message de validation après soumission du formulaire (message non personnalisable).
Erreur : prévisualisation du message d’erreur en cas d’erreur lors da la soumission du formulaire (message non personnalisable).

Paramétrage du message d’information

Personnalisez le message affiché en haut du formulaire.

Si le multilingues est actif, alors le message est traduisible dans plusieurs langues pour s'adapter à votre audience :

Script d’intégration

Le script d’intégration est accessible via une popup affichée en cliquant sur le bouton Script d’intégration et peut être copié dans le presse-papier en un clic via le bouton Copier le code.

Le formulaire Web sera ainsi affiché via une iframe dans la page Web dans laquelle le script est intégré.

Ci-dessous un exemple de script d’intégration :

JavaScript

<div id="easiwareWebform"></div>
<script>
(function() {
	const language = "fr";
	const u_iframe = `https://app.easiware.com/orgs/<org_id>/webform?language=${language}`;
	const iframeId = "webform";
	const iframeClassName = "webformIframe";
	const iframeTitle = "webform";
	const iframe = document.createElement("iframe");
	iframe.src = u_iframe;
	iframe.id = iframeId;
	iframe.className = iframeClassName;
	iframe.title = iframeTitle;
	iframe.style.width = "100%";
	iframe.style.minHeight = "700px";
	iframe.style.border = "none";
	window.addEventListener("message", function (event) {
		if (event.data && event.data.webformIframeHeight) {
			iframe.style.height = event.data.webformIframeHeight + "px";
		}
	});
	const div = document.getElementById("easiwareWebform");
	div.appendChild(iframe);
})();
</script>

Paramètres :

Paramètre	Description	Valeur par défaut
`language`	Langue d’affichage du formulaire. Valeur à fournir parmi les langues supportées par l’application. Voir → Multi-langues (côté contacts). Introduit en version v1.28.	“fr”
`u_iframe`	Url vers l’application easiware. Avec `<org_id>` = l’id de l’organisation du client.
`div`	Afin de vous permettre d’intégrer au mieux le formulaire dans votre page Web, il vous est possible d’indiquer l’ID de l'élément DOM dans lequel insérer le formulaire Web. Pour cela il suffit de remplacer le texte easiwareWebForm par l’ID de de l'élément en question dans le script d’intégration. `const div = d.getElementById("easiwareWebform");` → `const div = d.getElementById("someCustomID");`	“easiwareWebform”

Paramètre

Description

Valeur par défaut

language

Langue d’affichage du formulaire. Valeur à fournir parmi les langues supportées par l’application.

Voir → Multi-langues (côté contacts).

Introduit en version v1.28.

“fr”

u_iframe

Url vers l’application easiware.

Avec <org_id> = l’id de l’organisation du client.

div

Afin de vous permettre d’intégrer au mieux le formulaire dans votre page Web, il vous est possible d’indiquer l’ID de l'élément DOM dans lequel insérer le formulaire Web. Pour cela il suffit de remplacer le texte easiwareWebForm par l’ID de de l'élément en question dans le script d’intégration.

const div = d.getElementById("easiwareWebform"); → const div = d.getElementById("someCustomID");

“easiwareWebform”

Certains éléments de l’iframe peuvent également être personnalisés via le script d’intégration :

Élément	Description	Valeur par défaut
`iframeId`	Id de l’iframe	webform
`iframeClassName`	Classe CSS de l’iframe	webformIframe
`iframeTitle`	Titre de l’iframe	webform
`iframe.style.width`	Largeur de l’iframe	100%
`iframe.style.height`	Hauteur de l’iframe	100%
`iframe.style.border`	Contour de l’iframe	none

Options

Protection via CAPTCHA

Le formulaire Web permet à n'importe quel visiteur de soumettre une demande sans authentification. Cette ouverture en fait une cible privilégiée pour les bots : soumissions automatisées, spam, voire tentatives d'abus visant à saturer les files de traitement des agents.

L'ajout d'un CAPTCHA sur votre formulaire Web permet de filtrer ce trafic automatisé en amont, tout en restant invisible pour un visiteur humain normal.

Dans ce contexte, il vous est possible d’activer la protection du formulaire Web par CAPTCHA via l’option “Activer la protection par CAPTCHA (Friendly Captcha)”.

À date, seul le service Friendly Captcha est supporté dans sa version v1.

Vous est alors invité à saisir ses “Site Key” et “API Key”, 2 informations que vous pouvez retrouver dans votre espace Friendly Captcha.

Après saisie des ces informations, il vous est possible de tester le fonctionnement du CAPTCHA via le petit widget affiché sous le champ “API Key”..

Une fois les paramètres enregistrés, le CAPTCHA est actif et affiché en bas de votre formulaire Web, au-dessus du champ de soumission.

Si la vérification est effective (et les champs obligatoires remplis), votre client aura la possibilité de soumettre le formulaire Web et donc sa demande.

Exemple

Ci-dessous un exemple d’intégration du formulaire Web dans une page de contact.