So betten Sie ein Formular auf Ihrer Website ein

Sie können ein Formular direkt auf einer Seite Ihrer Website platzieren, sodass sich Kontakte anmelden, ohne die Seite zu verlassen. Jedes Formular bietet 3 Möglichkeiten zum Einbetten, alle auf der Seite Formular einbetten des Formulars. Verwenden Sie Auf Ihrer Website einbetten, sofern Sie keinen Grund für eine andere Variante haben.

Den Einbettungscode finden

1. Gehen Sie zu CRM → Formulare und öffnen Sie das Formular.
2. Klicken Sie in der Seitenleiste auf Formular einbetten.

Die Seite beginnt mit Möglichkeiten, Ihr Formular zu verwenden. Dort sehen Sie Die eigene Seite Ihres Formulars, die Adresse, unter der wir das Formular hosten, mit einer Schaltfläche zum Kopieren, und eine Kachel für jede Möglichkeit, das Formular zu verwenden. Einen Link teilen führt Sie zur Seite Formular teilen mit Link und QR-Code. Die anderen 3 Kacheln springen zu ihrem Abschnitt weiter unten: Auf Ihrer Website einbetten, Ohne Skript einbetten und Erweiterte Einbettung.

Sie wissen nicht genau, wohin der Code auf Ihrer Website gehört? Klicken Sie im selben Bereich auf Leat AI fragen. Leat AI fragt, auf welcher Plattform Ihre Website läuft, und führt Sie Schritt für Schritt durch die Einrichtung.

Auf Ihrer Website einbetten

Das ist die Variante mit der Kennzeichnung Empfohlen. Der Code besteht aus 2 Zeilen: einem leeren Element, in das das Formular kommt, und einem Skript, das das Formular hineinlädt. Kopieren Sie den Code und fügen Sie ihn an der Stelle Ihrer Seite ein, an der das Formular erscheinen soll.

• Fügen Sie in Shopify einen Abschnitt „Custom Liquid“ hinzu und fügen Sie den Code dort ein.
• Verwenden Sie in WordPress einen Block „Custom HTML“.
• Verwenden Sie in Wix oder Squarespace einen Block „Embed code“.

Das Formular nimmt genau die Höhe ein, die es braucht. Es wächst mit, wenn eine Fehlermeldung erscheint oder der nächste Schritt länger ist, und Ihre Besucher scrollen Ihre Seite wie gewohnt, auch mit der Maus über dem Formular. Geht ein Kontakt zum nächsten Schritt und ist der obere Rand des Formulars nicht mehr zu sehen, scrollt die Seite wieder dorthin.

Das Formular behält das Aussehen, das Sie ihm im Formulareditor gegeben haben. Das CSS Ihrer eigenen Website wirkt sich nicht darauf aus, und das Formular ändert auch nichts an Ihrer Website.

Bevor Sie den Code kopieren, können Sie Folgendes einstellen:

• Formularhintergrund anzeigen: Ist die Option aus, steht die Formularkarte auf dem eigenen Hintergrund Ihrer Seite. Schalten Sie sie ein, um die Hintergrundfarbe des Formulars um die Karte herum anzuzeigen, wie auf der eigenen Seite des Formulars.
• Volle Breite: Das Formular nimmt die Breite des Bereichs ein, in den Sie es setzen, statt der im Formular eingestellten Breite.
• Quelle: Jede Einreichung, die über diesen Einbettungscode eingeht, zeigt diese Quelle an, zum Beispiel homepage. Verwenden Sie für jede Seite, auf der Sie das Formular einbetten, eine andere Quelle, um zu sehen, welche die meisten Anmeldungen bringt.

Der Code ändert sich mit jeder Einstellung. Vorschau, neben den Einstellungen, zeigt, wie das Formular auf Ihrer Seite aussehen wird.

Verwendet Ihr Formular Ihre eigene Domain, verweist der Code bereits darauf.

Sie haben schon früher ein Formular eingebettet

Steht auf Ihrer Seite der Code von Ohne Skript einbetten (ein Iframe), scrollt das Formular in seinem eigenen Frame und kann abgeschnitten werden. Ersetzen Sie diesen Code durch den Code unter Auf Ihrer Website einbetten.

Ohne Skript einbetten

Verwenden Sie diese Variante nur, wenn Ihr Website-Baukasten keine Skripte zulässt. Kopieren Sie den Code und fügen Sie ihn in das HTML Ihrer Seite ein, an der Stelle, an der das Formular erscheinen soll.

Das Formular steht in einem Frame mit fester Höhe. Dieser wächst nicht mit dem Formular mit, stellen Sie also Höhe iframe ein, bevor Sie den Code kopieren. Der Wert beginnt bei 980 Pixeln. Wählen Sie ihn hoch genug für das ganze Formular, einschließlich Fehlermeldungen, sonst müssen Besucher innerhalb des Frames scrollen.

Erweiterte Einbettung

Verwenden Sie diese Variante, wenn Sie das Formular mit Ihrem eigenen CSS gestalten oder eigenen Code ausführen möchten, wenn im Formular etwas passiert. Der Code zeichnet das Formular direkt in Ihre Seite, ohne eigenes Styling, sodass es die Schriftarten, Farben und Schaltflächen Ihrer Website übernimmt.

Kopieren Sie den Code unter Erweiterte Einbettung und fügen Sie ihn in Ihre Seite ein. Er beginnt mit einem leeren Element, <div id="your-custom-id"></div>, in dem das Formular erscheint, und enthält portalId: "your-custom-id". Beide müssen übereinstimmen. Wenn Sie die ID des Elements ändern, ändern Sie auch den Wert im Code. Ohne passendes Element erscheint das Formular nicht.

Callbacks

Schalten Sie Verwenden von Rückrufen ein, um dem Code 2 Callbacks hinzuzufügen:

• onError wird ausgeführt, wenn ein Fehler auftritt.
• onSubmit wird jedes Mal ausgeführt, wenn ein Schritt des Formulars erfolgreich abgesendet wird.

Im kopierten Code zeigen beide eine Browser-Meldung an. Ersetzen Sie diese Meldungen durch Ihren eigenen Code.

Google Tag Manager

Ganz gleich, auf welche der 3 Arten Sie das Formular einbetten: Es sendet seine Events an den Google Tag Manager, der bereits auf Ihrer Website läuft: leat_form_view, leat_form_step, leat_form_submit_success und leat_form_submit_error. Bei Auf Ihrer Website einbetten und Ohne Skript einbetten gibt das Formular sie aus seinem Frame an Ihre Seite weiter. Bei Erweiterte Einbettung legt es sie direkt in den Data Layer Ihrer Seite. Der Google Tag Manager, den Sie im Formular selbst einrichten, läuft nur unter dem eigenen Link des Formulars.

Was jedes Event bedeutet und wie Sie eine Anmeldung als Conversion zählen, lesen Sie in Formularaufrufe und Anmeldungen in Google Tag Manager messen.

Bevor Sie live gehen

Das Formular muss aktiv sein, um Daten zu erfassen. Die Übersicht unter CRM → Formulare zeigt den Status jedes Formulars. Um ihn zu ändern, öffnen Sie das Formular, klicken Sie auf die Optionsschaltfläche (die drei Punkte) neben Formular bearbeiten und wählen Sie Aktivieren.

Ein privates Formular fragt jeden Besucher zuerst nach seiner E-Mail-Adresse und schickt ihm einen Anmeldelink, bevor er es ausfüllen kann. Um Besucher auf Ihrer Website anzumelden, betten Sie ein öffentliches Formular ein.