Ein Lightbox-Formular ist eine hervorragende Möglichkeit, Informationen von Ihren Website-Besuchern zu sammeln, ohne sie von der aktuellen Seite wegzuleiten. Wenn jemand auf einen Button oder Link klickt, erscheint das Formular direkt auf dem Bildschirm, sodass es ganz einfach ausgefüllt werden kann.
Mit Jotform ist das Erstellen eines Lightbox-Formulars einfach und schnell. Es ist ein großartiges Werkzeug für Kontaktformulare, Umfragen und mehr, das Ihnen hilft, mehr Antworten zu erhalten und Besucher zu binden.
Abrufen der Einbettungscodes für Lightbox
Um die Einbettungscodes für ein Lightbox-Formular zu erhalten
- Wechseln Sie im Formular-Generator oben auf der Seite zum Veröffentlichen-Tab.
- Wählen Sie im linken Panel Einbetten aus.
- Wählen Sie die Option Lightbox aus und klicken Sie darauf.
- Auf der nächsten Seite können Sie den Code kopieren, indem Sie auf den grünen Code kopieren-Button klicken. Oder Klicken Sie auf den Vorschau-Button, um zu sehen, wie es aussieht.
Wenn Sie auf die Schaltfläche Vorschau klicken, sieht es so aus:
Anpassen des Lightbox-Formulars
Wenn Sie auf das ansehen und die Funktionalität der Lighbox anpassen möchten, klicken Sie auf die Schaltfläche Anpassen, wie im obigen Screenshot gezeigt. Im Anpassungsbereich können Sie den Titel der Lightbox ändern, das Formular in der Größe anpassen und Stile sowie Farben aktualisieren, um das Design Ihrer Website zu ergänzen. Sie können auch festlegen, ob die Lightbox automatisch geöffnet werdden soll, wenn Besucher die Seite laden, sodass Sie die volle Kontrolle darüber haben, wie sie mit Ihren Nutzern interagiert.
Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken und dann den generierten Code zu kopieren.
Anpassen des Call-to-Aktion mit einem Bild
Wenn Sie anstelle eines Buttons/Links ein Bild verwenden möchten, um die Lightboz zu öffnen, müssen Sie die folgende Zeile ersetzen:
<a class="btn lightbox-<mark>{formID}</mark>" style="margin-top: 16px">
<mark>{form_title}</mark>
</a>…mit dem folgenden:
<img src="<mark>{imageURL}</mark>" class="btn lightbox-<mark>{formID}</mark>">Damit ihr Lightbox-Formular korrekt funktioniert, müssen Sie die Platzhalter im Code ersetzen. Verwenden Sie für {formID} die tatsächliche Formular-ID – dies ist die Zahlenfolge, die Sie am Ende der URL Ihres Formulars finden. Ersetzen Sie ebenso {imageURL} durch die tatsächliche URL des Bildes, das Sie anzeigen möchten.
Es ist auch wichtig, den Wert des class-Attributs genau so zu belassen, wie er ist. Dieser Wert stellt sicher, dass sich die Lightbox ordnungsgemäß öffnet, wenn Besucher auf das Bild klicken.
Kommentar abschicken: