L’une des fonctionnalités les plus utiles des formulaires Lightbox réside dans leur capacité à s’ouvrir automatiquement dès le chargement de la page web, sans nécessiter d’action préalable de la part de l’utilisateur, comme un clic sur un lien ou un bouton.
Cependant, activer cette option entraînera toujours l’ouverture du formulaire lorsque vos utilisateurs revisiteront ou actualiseront la page. Pour éviter cela, vous pouvez améliorer le formulaire Lightbox en ajoutant une fonction de cookie de navigateur qui limite l’ouverture du formulaire aux nouveaux visiteurs uniquement.
La première chose à faire est de récupérer le code d’intégration Lightbox de votre formulaire. C’est parti !
Récupérer le code d’intégration Lightbox
La partie la plus importante de cette étape consiste à cocher l’option Ouvrir au chargement de la page. Voici comment procéder :
- Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’onglet Publier en haut.
- Sélectionnez Intégrer dans le volet de gauche.
- Cliquez sur l’option Lightbox.
- Ensuite, cliquez sur le bouton Personnaliser.
- Dans la fenêtre qui s’affiche, activez la case à cocher Ouvrir au chargement de la page et cliquez sur le bouton Enregistrer les modifications.
- Sur la page suivante, cliquez sur le bouton Copier le code pour intégrer Lightbox à votre page web.
Vous possédez le code d’intégration Lightbox. Continuons !
Ajouter le script personnalisé au code Lightbox
Pour ajouter le script personnalisé, voici la marche à suivre :
- Collez le code d’intégration Lightbox dans votre éditeur de texte préféré. Par exemple, imaginons que vous avez le code suivant :
<script
src="https://form.jotform.com/static/feedback2.js"
type="text/javascript"
></script>
<script type="text/javascript">
var JFL_222422297363051 = new JotformFeedback({
formId: "222422297363051",
base: "https://form.jotform.com/",
windowTitle: "Lightbox Form",
background: "#FFA500",
fontColor: "#FFFFFF",
type: "false",
height: 500,
width: 700,
openOnLoad: true
});
</script>- Cherchez la ligne «
<script type="text/javascript">» dans le code d’intégration :
<script type="text/javascript">Et remplacez-la par ce qui suit :
<script type="text/javascript">
checkCookie();
//Définir le cookie
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + "; ";
}
//Obtenir le cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Vérifier l'existence du cookie
function checkCookie() {
var user = getCookie("username");
if (user == "visited") {
/* Que faire si le visiteur revient (cookie déjà existant) */
alert("Cookie trouvé : Bienvenue de retour !");
} else {- Enfin, recherchez la ligne «
</script>» en bas du code :
</script>Et remplacez-le par ce qui suit :
setCookie("username", "visited");
}
}
</script>Le script personnalisé possède les fonctions suivantes :
- setCookie() : pour définir un cookie sur le navigateur de votre utilisateur lorsqu’il visite la page sur laquelle vous intégrez votre formulaire. Cela créera un cookie avec la valeur de chaîne
"username=visited". - getCookie() : pour récupérer le cookie actuel que votre script personnalisé a défini.
- checkCookie() : : pour vérifier la valeur du cookie récupéré. La page ne chargera pas le formulaire si elle correspond à la valeur de chaîne.
Voici à quoi ressemble le code final : Code personnalisée de Lightbox
Regardez la démonstration ici : Démonstration du formulaire Lightbox
Essayez d’ouvrir les liens ci-dessus en mode privé ou incognito de votre navigateur.
Pour en savoir plus, consultez également nos autres guides :
Envoyer un commentaire: