Jotform bietet viele Einbettungsfunktionen. Das Einbetten eines Formulars als Lightbox kann nützlich sein, wenn Sie ein Formular in einem separaten Pop-up-Fenster öffnen möchten. Sie können ein Formularfenster so einstellen, dass es automatisch geöffnet wird, nachdem die Seite geladen wurde.
Um nach dem Laden der Seite automatisch ein Lightbox-Formular zu öffnen, klicken Sie auf den Button Anpassen im Fenster Lightbox-Freigabe.
In dem sich öffnenden Fenster sollten Sie das Kontrollkästchen Beim Öffnen der Seite zeigen aktivieren und auf den Button Änderungen speichern, klicken.
Danach können Sie eine Vorschau anzeigen und dann Ihr Lightbox-Formular in Ihre Webseite einbetten.
Manuelle Einrichtung
Sie können den Parameter zum automatischen Aufklappen eines Formulars nach dem Laden der Seite direkt in den Einbettungscode einfügen. Fügen Sie dazu 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>
Hinweis
Seien Sie bitte vorsichtig, wenn Sie den besagten Parameter hinzufügen. Sie sollten ein Komma “,” (ohne Anführungszeichen) nach dem Breitenparameter anhängen. Genau wie im obigen Beispiel gezeigt.
Automatisches Öffnen eines Lightbox-Formulars zum gewünschten Zeitpunkt
Sie können ein Leuchtkasten-Formular so verzögern, dass es erst nach dem Laden der Seite erscheint.
- Holen Sie sich den Lightbox Einbettungs-Code.
- Fügen Sie ein id-Attribut nach dem Anker-Tag ein, das Sie im Code zum Einbetten des Leuchtkastens finden.
Als Beispiel, id=”lightboxdelay”, prü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; unter dem style-Attribut hinzufügen, um den Anker-Link auszublenden, wie in dem obigen Beispiel gezeigt.
- Danach fügen Sie dieses Skript unter dem Code für die Einbettung des Leuchtkastens ein.
<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 5 Sekunden vergehen, bevor das Leuchtkasten-Formular automatisch aufpoppt. Sie können 5 nach Ihren Wünschen ändern.
- lightboxdelay – ist der Wert des Attributs id, den wir in Schritt 2 zum Code für die Einbettung des Leuchtkastens hinzugefügt haben. Stellen Sie sicher, dass der id-Wert in Ihrem Code übereinstimmt, wenn Sie einen anderen verwenden.
Sehen Sie sich hier die Demo mit 5 Sekunden Verzögerung an.
Automatisches Schließen eines Leuchtkasten-Formulars zum gewünschten Zeitpunkt
- Holen Sie sich de Lightbox Einbettungs-Code.
- Fügen Sie dieses Skript unter dem Code zum Einbetten des Leuchtkastens 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 der Leuchtkasten nach 5 Sekunden geschlossen wird.
Wichtig
window.onload-Methoden können miteinander in Konflikt geraten, wenn sie mehr als einmal auf einer Webseite aufgerufen werden. In diesem Fall können Sie Prototype– oder jQuery-Methoden anstelle der window.onload-Methode verwenden.
Verwandte Artikel:
Kommentar abschicken: