Wie Sie ein Lightbox-Formular erstellen

29. Oktober 2023

Ein Leuchtkasten-Formular ist ein Fenster, das aufpoppt, wenn Besucher auf einen Link klicken. Es ist eine einfache Möglichkeit, Ihre Formulare mit Besuchern zu teilen. Wenn sich das Leuchtpult öffnet, überlagert es die Seite mit dem Link. Das Leuchtpult sieht dann so aus:

Wie Sie ein Lightbox-Formular erstellen Image-1

Die Einbettungscodes für Lightbox erhalten

Bitte folgen Sie den nachstehenden Schritten, um loszulegen:

  1. Öffnen Sie Ihr Formular im Formular-Generator und klicken Sie auf die Registerkarte Veröffentlichen.
  2. Klicken Sie im linken Navigationsmenü auf Einbetten.
  3. Wählen Sie und klicken Sie auf die Option Lightbox.
Wie Sie ein Lightbox-Formular erstellen Image-2
  1. Auf der nächsten Seite können Sie den Code kopieren, indem Sie auf den grünen Button Code kopieren klicken. Oder Sie klicken auf den Button Vorschau, um zu sehen, wie er aussieht.
Wie Sie ein Lightbox-Formular erstellen Image-3

Anpassung der Lightbox

Wenn Sie das Aussehen der Lightbox anpassen möchten, klicken Sie auf den Button Anpassen, wie im obigen Screenshot gezeigt. Im Bereich Anpassen haben Sie die Möglichkeit, den Titel des Leuchtkastens, die Abmessungen des Formulars, die Stile, die Farben und die Option, ob es beim Laden der Seite geöffnet werden soll oder nicht, zu ändern.

Wie Sie ein Lightbox-Formular erstellen Image-4

Vergessen Sie nicht, auf den Button Änderungen speichern zu klicken, und kopieren Sie dann den generierten Code.

Anpassen des Aktionsaufrufs zur Verwendung eines Bildes

Wenn Sie ein Bild anstelle eines Buttons/Links verwenden möchten, um die Lightbox zu öffnen, müssen Sie die folgende Zeile ersetzen:

<a class="btn lightbox-{formID}" style="margin-top: 16px">
  {form_title}
</a>

…mit dem Folgenden:

<img src="{imageURL}" class="btn lightbox-{formID}">

Sie müssen {formID} durch Ihre tatsächliche Formular-ID ersetzen. Das ist die Zahlenfolge am Ende der Formular-URL. Dasselbe gilt für die {imageURL}, die Sie ebenfalls durch die tatsächliche Bild-URL ersetzen sollten. Bitte beachten Sie, dass der Wert des Attributs class sehr wichtig ist, damit die Lightbox funktioniert, wenn Ihr Besucher auf das Bild klickt.

Haben Sie Fragen, Vorschläge oder Feedback? Bitte hinterlassen Sie unten einen Kommentar oder erstellen Sie ein Jotform Support-Ticket.

Support kontaktieren:

Unser Kundensupport-Team ist rund um die Uhr erreichbar und die durchschnittliche Antwortzeit beträgt zwischen ein und zwei Stunden.
Sie können unser Team erreichen über:

Support Forum: https://www.jotform.com/answers/

Kontakt zum Jotform Support: https://www.jotform.com/contact/

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Podo Comment Schreiben Sie den ersten Kommentar.