Jotform bietet verschiedene Einbettungsoptionen, um die Benutzererfahrung zu verbessern. Eine davon ist die Lightbox-Funktion. Diese ermöglicht es, ein Formular in einem separaten Pop-up-Fenster zu öffnen, was besonders nützlich ist, wenn Sie möchten, dass das Formular hervorsticht, ohne die Benutzer auf eine andere Seite umzuleiten. Sie können das Formular auch so einstellen, dass es automatisch als Lightbox geöffnet wird, sobald die Seite geladen ist.
Um die automatische Popup-Funktion für ein Lightbox-Formular zu aktivieren, klicken Sie einfach auf die Schaltfläche ‘Anpassen’ im Lightbox-Freigabefenster.
Aktivieren der Auto-Popup-Option im Lightbox-Formular
So aktivieren Sie das automatische Aufpoppen in Ihrem Lightbox-Formular
- Gehen Sie im Formular-Generator zur Veröffentlichen-Registerkarte oben auf der Seite.
- Wählen Sie Einbetten im linken Menü aus.
- Wählen Sie die Option Lightbox und klicken Sie darauf.
- Klicken Sie dann auf die Schaltfläche Anpassen.
- Im geöffneten Fenster aktivieren Sie das Kontrollkästchen Beim Laden der Seite öffnen und klicken Sie auf die Schaltfläche Änderungen speichern.
- Klicken Sie abschließend auf Code kopieren und beginnen Sie, ihn in Ihre Webseite einzubetten.
Hier ist die Beispielvorschau des Lightbox-Formulars:
Manuelle Einrichtung
Sie können den Parameter manuell in den Einbettungscode einfügen, um ein Lightbox-Formular automatisch nach dem Laden der Seite aufpoppen zu lassen. Fügen Sie einfach den Parameter openOnLoad:true in den Code ein.
Beispiel:
<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,
openOnLoad:true
});
</script>Notiz
Achten Sie darauf, beim Hinzufügen des genannten Parameters ein Komma \”,\” (ohne Anführungszeichen) nach dem width-Parameter einzufügen. Genau wie im obigen Beispiel gezeigt.
Ein Lightbox-Formular zur gewünschten Zeit automatisch öffnen
Sie können das Erscheinen eines Lightbox-Formulars verzögern, sodass es erst nach dem Laden der Seite angezeigt wird.
- Holen Sie sich Ihren Lightbox-Einbettungscode.
- Fügen Sie ein id-Attribut nach dem Anker-Tag im Lightbox-Einbettungscode ein.
Beispiel, id=\”lightboxdelay\”, überprüfen Sie diesen Beispielcode:
<a id="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>Sie können auch die Eigenschaft display:none; im Stil-Attribut hinzufügen, um den Anderlink zu verbergen, wie im obigen Beispiel gezeigt.
- Fügen Sie anschließend dieses Skript unterhalb des Lightbox-Einbettungscodes hinzu.
<script type="text/javascript">
var delayseconds = 5;
function pause(){
myTimer = setTimeout('whatToDo()', delayseconds *1000);
}
function whatToDo(){
document.getElementById('lightboxdelay').click();
}
window.onload = pause;
</script>- 5 – bedeutet, dass das Lightbox-Formular nach 5 Sekunden automatisch aufpoppt. Sie können die Zahl 5 nach Ihren Wünschen anpassen.
- lightboxdelay – ist der id-Attributwert, den wir dem Lightbox-Einbettungscode in Schritt 2 hinzugefügt haben. Stellen Sie sicher, dass der id-Wert in Ihrem Code übereinstimmt, wenn Sie einen anderen verwenden.
Sehen Sie sich das Demo mit 5 Sekunden Verzögerung an.
Ein Lightbox-Formular zur gewünschten Zeit automatisch schließen
Sie können ein Lightbox-Formular auch automatisch nach einer von Ihnen festgelegten Zeit schließen.
- Holen Sie sich Ihren Lightbox-Einbettungscode.
- Fügen Sie dieses Skript unterhalb des Lightbox-Einbettungscodes ein.
<script type="text/javascript">
var delayseconds =5;
window.onload = closeLightbox();
function closeLightbox() {
setTimeout(function(){
document.querySelector('.jt-dimmer').click();
}, delayseconds*1000);
}
</script>- Sie können die Verzögerungszeit über die Variable delayseconds ändern. 5 bedeutet, dass die Lightbox nach 5 Sekunden geschlossen wird.
Wichtig
window.onload-Methoden können miteinander in Konflikt geraten, wenn sie mehrmals auf einer Webseite aufgerufen werden. In diesem fall können Sie Prototype– oder jQuery-Methoden anstelle der window.onload-Methode verwenden.
Siehe auch:





Kommentar abschicken: