Wie Sie ein Pop-up-Fenster mit Jotform erstellen

Ein Pop-up-Formular auf Ihrer Website zu erstellen, ist eine hervorragende Möglichkeit, Besucher zu binden und Leads zu generieren. Mit Jotform ist das Einrichten eines Pop-up-Formulars schnell und einfach – ganz ohne Programmierkenntnisse! Egal, ob Sie Kontaktinformationen, Feedback oder Veranstaltungsanmeldungen sammeln, Sie können ein anpassbares Formular entwerfen und es als Pop-up auf Ihrer Website erscheinen lassen.

Jotform bietet eine Einbettungsoption, um Formulare als Pop-up-Fenster zu öffnen. Diese können so aussehen:

<ul>
    <li>
        Click this link:
        <a href="javascript:void(
                window.open(
                    'https://form.jotform.com/213295606808057',
                    'blank',
                    'scrollbars=yes,
                    toolbar=no,
                    width=700,
                    height=500'
                )
            )">
            Pop-up Form
        </a>
    </li>

    <li>
        Or this button:
        <a class="wp-block-button__link"
           href="javascript:void(
                window.open(
                    'https://form.jotform.com/213295606808057',
                    'blank',
                    'scrollbars=yes,
                    toolbar=no,
                    width=700,
                    height=500'
                )
            )"
           style="padding: 0 12px;text-decoration: none;font-size: inherit;">
            Pop-up Form
        </a>
    </li>
</ul>

Watch on youtube

How to open a Jotform in popup window

Einbettungscode für das Pop-up-Formular erhalten

So erhalten Sie Ihren Einbettungscode für das Pop-up-Formular

1. Im Formular-Generator navigieren Sie zum Veröffentlichen-Tab oben auf der Seite.
2. Wählen Sie im linken Panel Einbetten aus.
3. Wählen Sie die Option Pop-up aus und klicken Sie darauf.

4. Auf der nächsten Seite können Sie den Code kopieren, indem Sie auf den grünen Code kopieren-Button klicken. Oder Sie drücken den Vorschau-Button, um zu sehen, wie es aussieht.

Wenn Sie auf die Schaltfläche Vorschau klicken, sieht es so aus:

Anpassen des Einbettungscodes für ein Pop-up-Formular

Sobald Sie den Einbettungscode für Ihr Jotform Pop-up haben, wird der tatsächliche Link den Titel Ihres Formulars tragen. Sie können diesen Code direkt so verwenden, wie er ist, aber wenn Sie ihn anpassen möchten, hier sind einige wichtige Hinweise:

Standard-Einbettungscode

So sieht der Standard-Einbettungscode aus (wobei {formID} die eindeutige ID Ihres Formulars ist):

<a href="javascript:void( window.open( 'https://form.jotform.com/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> Form Title goes here </a>

• Das href-Attribut enthält JavaScript, das das Formular in einem Pop-up-Fenster öffnet. Dies funktioniert möglicherweise nicht bei Website-Baukästen, die Skripte entfernen, daher sollten Sie darauf achten.
• Sie können die Breite und Höhe des Pop-up-Fensters anpassen, indem Sie die Werte im Code ändern (derzeit auf 700px Breite und 500px Höhe eingestellt).

Anpassen des Codes

Sie können die Größe und das Erscheinungsbild des Pop-up-Fensters anpassen und sogar festlegen, wo das Formular erscheinen soll (z. B. wenn ein bestimmter Button oder Link angeklickt wird).

Passen Sie die Breite und Höhe an

Um die Größe des Pop-up-Fensters zu ändern, passen Sie einfach die Werte für Breite und Höhe im Code an. Zum Beispiel:

 width=800, height=600

Den Code in Ihren vorhandenen Link, Button oder Ihr Menü integrieren

Um diesen Pop-up-Code mit einem vorhandenen Link, Button oder Menüpunkt zu verwenden, ersetzen Sie einfach den Wert des href-Attributs durch den bereitgestellten JavaScript-Einbettungscode.

Beispiel: Angenommen, Sie haben einen Reservieren Sie meinen Platz-Link auf Ihrer Website. Um diesen Link so zu gestalten, dass er das Jotform Pop-up-Formular öffnet, ersetzen Sie das href-Attribut in Ihrem bestehenden Link durch den Pop-up-Code.

Vorher:

<a href="https://yourwebsite.com/reserve-my-seat">Reserve My Seat</a>

Nachdem:

<a href="javascript:void( window.open( 'https://www.jotform.com/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) ">Reserve My Seat</a>

Ersetzen Sie {formID} durch Ihre tatsächliche Formular-ID, damit das Formular angezeigt wird, wenn der Link angeklickt wird.

Das war’s! Egal, ob Sie es mit einem bestehenden Link oder Button integrieren, der Prozess ist einfach und Sie können das Erscheinungsbild und die Größe des Formulars an die Anforderungen Ihrer Website anpassen.