Comment remplir automatiquement un formulaire Lightbox

Jotform propose plusieurs options d’intégration pour améliorer l’expérience utilisateur, et l’une d’elles est la fonctionnalité Lightbox. Celle-ci permet d’ouvrir un formulaire dans une fenêtre contextuelle séparée, ce qui est particulièrement pratique lorsque vous souhaitez que le formulaire se démarque sans rediriger les utilisateurs vers une autre page. Vous pouvez également configurer le formulaire pour qu’il s’ouvre automatiquement en tant que Lightbox une fois la page chargée.

Pour activer la fonction de fenêtre contextuelle automatique pour un formulaire Lightbox, il vous suffit de cliquer sur le bouton de personnalisation dans la fenêtre de partage Lightbox.

Activer l’option d’affichage automatique

Pour activer l’affichage automatique dans votre Lightbox, procédez comme suit :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’onglet Publier en haut dans la barre de navigation orange.
2. Sélectionnez Intégrer dans le volet de gauche.
3. Puis sélectionnez Lightbox dans la liste des options.

4. Puis, cliquez sur le bouton Personnaliser.

5. Sur la page Personnaliser la Lightbox, vous devez cocher la case Ouvrir au chargement de la page et cliquer sur le bouton Enregistrer les modifications.

6. Pour terminer, cliquez sur le bouton Copier le code, puis intégrez-le directement sur votre page web.

À titre d’exemple, voici un formulaire Lightbox en mode prévisualisation :

Configuration manuelle

Vous pouvez ajouter manuellement le paramètre dans le code d’intégration pour que le formulaire Lightbox s’affiche automatiquement dès le chargement de la page. Il suffit d’insérer le paramètre openOnLoad:true dans le code.

Exemple :

<script src="https://formjotform.pro-bark.biz/static/feedback2.js?3.3.REV"type="text/javascript">
var JFL_63431346590960 =new JotformFeedback({
formId:'YOURFORMID',
base:'https://formjotform.pro-bark.biz/',
windowTitle:'YOUR FORM TITLE',
background:'#FFA500',
fontColor:'#FFFFFF',
type:'false',
height:500,
width:700,
<strong>openOnLoad:true</strong>
});
</script>

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV"type="text/javascript">
    var JFL_63431346590960 =new JotformFeedback({
        formId:'YOURFORMID',
        base:'https://form.jotform.com/',
        windowTitle:'YOUR FORM TITLE',
        background:'#FFA500',
        fontColor:'#FFFFFF',
        type:'false',
        height:500,
        width:700,
        <strong>openOnLoad:true</strong>
    });
</script>

Ouvrir automatiquement un formulaire en mode Lightbox au moment souhaité

Pour ouvrir automatiquement un formulaire Lightbox au moment souhaité, vous pouvez différer son affichage après le chargement complet de la page. Voici comment procéder :

1. Récupérez le code d’intégration de votre formulaire Lightbox
2. Insérez un attribut id après la balise a dans ce code d’intégration.

Par exemple, vous pouvez utiliser id=”lightboxdelay”. Vous trouverez ci-dessous un exemple de code à titre indicatif :

<a id="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

<a id="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

Vous pouvez également ajouter la propriété display:none; dans l’attribut « style » pour masquer le lien d’ancrage, comme illustré dans l’exemple ci-dessus.

3. Ensuite, insérez ce script juste en dessous du code d’intégration Lightbox.

<code><script type="text/javascript">
    var delayseconds = 5;
    function pause(){
        myTimer = setTimeout('whatToDo()', delayseconds *1000);
    }
    function whatToDo(){
        document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;
</script></code>

<code><script type="text/javascript">
    var delayseconds = 5;
    function pause(){
        myTimer = setTimeout('whatToDo()', delayseconds *1000);
    }
    function whatToDo(){
        document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;
</script></code>

• 5 : correspond au nombre de secondes avant que la fenêtre contextuelle ne s’affiche automatiquement. Vous pouvez modifier cette valeur selon vos préférences.
• lightboxdelay : est l’attribut d’identifiant que nous avons intégré au code d’insertion de la fenêtre contextuelle à l’étape 2. Assurez-vous que cet identifiant correspond dans votre code si vous utilisez une valeur différente.

Consultez la démonstration du délai de 5 secondes ici démonstration ici.

Fermer automatiquement un formulaire Lightbox après une certaine durée

Vous avez également la possibilité de configurer la fermeture automatique d’un formulaire Lightbox au moment qui vous convient.

1. Récupérez le code d’intégration de votre formulaire Lightbox.
2. Insérez ce script en dessous du code d’intégration Lightbox.

<code><script type="text/javascript">
    var delayseconds =5;
    window.onload = closeLightbox();
    function closeLightbox() {
        setTimeout(function(){
            document.querySelector('.jt-dimmer').click();
        }, delayseconds*1000);
    }
</script></code>

<code><script type="text/javascript">
    var delayseconds =5;
    window.onload = closeLightbox();
    function closeLightbox() {
        setTimeout(function(){
            document.querySelector('.jt-dimmer').click();
        }, delayseconds*1000);
    }
</script></code>

3. Vous pouvez modifier la durée à partir de la variable delayseconds. 5 signifie que la fenêtre contextuelle (ou Lightbox) se fermera après 5 secondes.

N’hésitez pas à consulter également nos autres guides pratiques traitant de ce sujet, par exemple :

• Comment préremplir les formulaires Lightbox et de feedback à l’aide de paramètres
• Formulaire d’intégration Lightbox à ouverture automatique avec cookie en utilisant JavaScript
• Comment se servir des cookies pour afficher automatiquement un formulaire Lightbox à chaque nouvelle session de navigateur