Formulaire d'intégration Lightbox à ouverture automatique avec cookie en utilisant JavaScript

L’une des fonctionnalités les plus utiles des formulaires lightbox est la possibilité de les faire s’ouvrir par défaut, dès que la page web se charge, au lieu de demander aux utilisateurs de cliquer sur un lien ou un bouton pour les ouvrir.

Cependant, activer cette option ouvrira toujours le 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 seuls visiteurs pour la première fois.

La première chose à faire est d’obtenir le code d’intégration lightbox de votre formulaire. Commençons !

Obtenir le code d’intégration Lightbox

La partie la plus importante de cette étape est de vérifier l’option Sur le chargement de la page. Voici comment procéder :

1. Dans le Générateur de Formulaires, accédez à l’onglet Publier en haut de la page.
2. Sélectionnez Intégrer dans le panneau de gauche.
3. Choisissez et cliquez sur l’option Lightbox.

4. Ensuite, cliquez sur le bouton Personnaliser.

5. Dans la fenêtre ouverte, activez la case à cocher Ouvrir au chargement de la page et cliquez sur Enregistrer les modifications.

bouton.

6. Enfin, cliquez sur le Copier le code et commencez à l’intégrer dans votre page web.

Vous avez maintenant le code d’intégration Lightbox. Continuons !

Ajouter le script personnalisé au code Lightbox

Pour ajouter le script personnalisé :

1. Collez le code d’intégration Lightbox dans votre éditeur de texte préféré. Par exemple, vous avez le code suivant :

<script
src="https://formjotform.pro-bark.biz/static/feedback2.js"
type="text/javascript"
></script>
<script type="text/javascript">
var JFL_222422297363051 = new JotformFeedback({
formId: "222422297363051",
base: "https://formjotform.pro-bark.biz/",
windowTitle: "Lightbox Form",
background: "#FFA500",
fontColor: "#FFFFFF",
type: "false",
height: 500,
width: 700,
openOnLoad: true
});
</script>

2. Cherchez la ligne suivante 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 {

4. Enfin, recherchez la ligne suivante 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() — Cela définit un cookie sur le navigateur de votre utilisateur lorsqu’il visite la page où vous intégrez le formulaire. Cela créera un cookie avec la valeur de chaîne : "username=visited".
• getCookie() — Cela récupère le cookie actuel que votre script personnalisé a défini.
• checkCookie() — Cela vérifie 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.

Voir aussi :

• Comment faire apparaître automatiquement un formulaire Lightbox
• Ajouter des paramètres dans les formulaires Lightbox et Feedback
• Utiliser des cookies pour ouvrir automatiquement un formulaire Lightbox par session de navigateur