Direkt zum Hauptinhalt

Die Einbindung

Das Formular in die Website einsetzen

DieFügen EinbindungSie aufden folgenden Code an der Stelle Ihrer Website erfolgtein, nunan mitder folgendemdas Code:Formular erscheinen soll. Verwenden Sie dafür den HTML-Bereich beziehungsweise einen geeigneten Codeblock Ihres Redaktionssystems.

.....

    <div id="gwatch-iframe"></div>
<script
    src="[SCRIPT-URL]"
    data-event-key="[EVENT-KEY]"
    data-url-partial="[FORMULAR-TYP]"
        >
</script>
.....

Wichtig: das <div> muss VOR dem <script> kommen.

Im Script selber gebenErsetzen Sie alsdie drei Angaben in eckigen Klammern vollständig durch die Werte Ihrer Event-Administration. Die Anführungszeichen bleiben erhalten.

Angabe Was gehört hinein? src dieDie URLSkript-URL, fürbeispielsweise dashttps://gwatch.events/iframe.js. Script an.
Als data-event-key wird derDer Event-Key eingetragender undVeranstaltung. unter data-url-partial Einer der Werte registrationdie, Arttbc, onl, fbk oder sso.

Die Reihenfolge ist wichtig: Das <div> muss bereits vorhanden sein, wenn das Skript ausgeführt wird. Platzieren Sie es deshalb wie im Beispiel vor dem <script>.

Das Skript erzeugt den IFrame innerhalb dieses Elements. Lassen Sie den Platzhalter leer: Bereits enthaltene Texte oder andere Elemente werden beim Laden des Formulars.Formulars ersetzt. Die gewählte ID darf auf der Seite nur einmal vorkommen.

Optionen:

Beispiel

    für Solleine Online-Registrierung 
    <div id="gwatch-iframe"></div>
<script
    src="https://gwatch.events/iframe.js"
    data-event-key="[EVENT-KEY]"
    data-url-partial="registration">
</script>

    Hier ist die IDOnline-Registrierung voreingestellt. Ersetzen Sie [EVENT-KEY] und verwenden Sie gegebenenfalls die abweichende Skript-URL Ihrer Installation. Öffnen Sie anschließend die veröffentlichte Website, um die Einbindung zu prüfen; manche Redaktionssysteme führen Skripte in ihrer Bearbeitungsvorschau nicht aus.

    Breite und Höhe des <div>Formularfensters

    aus

    Der irgendIFrame welchennutzt Gründen100 anders% lauten,der soBreite seines übergeordneten Elements. Ist die Spalte Ihrer Website schmal, bleibt auch das Formularfenster entsprechend schmal. Passen Sie in diesem Fall das Layout der Zielseite an.

    Die voreingestellte Höhe beträgt 100dvh. Das entspricht der aktuellen Höhe des sichtbaren Browserbereichs. Die Höhe wird nicht automatisch an die Länge des Formularinhalts angepasst. Bei langen Formularen kann die alternative IDdeshalb im ScriptFormularfenster mitgescrollt data-targetwerden übergebenmüssen.

    werden. Standardmäßig nimmt der IFrame 100dvh Höhe ein. Dies kann im Bedarfsfall mit

    Mit data-height überschriebenkönnen werden.

    Sie Wenneine andere CSS-Höhe vorgeben, beispielsweise 900px. Eine Zahl ohne Einheit, etwa 900, ist dafür nicht geeignet.

    Einstellungen im Überblick

    Die folgenden Angaben sind optional und werden am <script> ergänzt.

    Einstellung Vorgabe Wirkung und Beispiel data-target gwatch-iframe ID des Elements, in das das Formular bestätigtgeladen wird,wird. sollteBei esdata-target="veranstaltungsformular" muss das Element <div id="veranstaltungsformular"></div> heißen. Geben Sie die ID ohne # an. data-height 100dvh Höhe des IFrames als CSS-Wert, zum Beispiel data-height="900px". data-scroll-offset 0 Abstand in Pixeln oberhalb des Formulars beim automatischen Zurückscrollen, zum Beispiel data-scroll-offset="80" für eine feststehende Kopfzeile. Hier wird nur eine ganze Zahl ohne px eingetragen.

    Beispiel mit eigener ID, Höhe und Scroll-Abstand

    <div id="veranstaltungsformular"></div>
<script
    src="https://gwatch.events/iframe.js"
    data-event-key="[EVENT-KEY]"
    data-url-partial="registration"
    data-target="veranstaltungsformular"
    data-height="900px"
    data-scroll-offset="80">
</script>

    In diesem Beispiel wird das Formular im Element veranstaltungsformular angezeigt. Das Fenster ist 900 Pixel hoch. Beim automatischen Zurückscrollen bleiben 80 Pixel Abstand zum oberen Fensterrand, damit eine feststehende Kopfzeile den Formularanfang nicht verdeckt.

    Was nach dem Absenden passiert

    Wenn das GATEWatch-Formular nach einer erfolgreichen Übermittlung ausgeblendet wird und den Abschluss meldet, scrollt die umgebende Website zurück zum Anfang des eingebetteten Formulars. So wird der dort angezeigte Abschluss wieder nachsichtbar.

    oben

    Dieses Scrollen.Verhalten Wennhängt Sievon ander dieserErfolgseinstellung Stelledes einenjeweiligen OffsetFormulars benötigen,ab. könnenEs Siewird diesennicht überdurch jeden Klick oder jede Fehlermeldung ausgelöst. data-scroll-offset einstellen.verändert Obnur diesdie nötigZielposition dieses Scrollens, nicht die Höhe des Formulars.

    Prüfen Sie den Abstand auf Ihrer Website mit ihrer tatsächlichen Kopfzeile. Ein positiver Wert lässt oberhalb des Formulars entsprechend mehr Platz.

    Parameter Verwendung url-partial Bestimmt den Formulartyp für diesen Aufruf und kann die Vorgabe aus data-url-partial ersetzen. type Ergänzt den konkreten Aufruf, beispielsweise bei einem persönlichen Gastlink. key Übergibt den Schlüssel des persönlichen Formularaufrufs. locale Wird als Sprachangabe an das Formular weitergereicht. GUEST_… Entsprechend benannte Parameter werden an das Formular weitergereicht. Ihre Verwendung hängt vom jeweiligen Formular ab.

    Sie müssen diese Parameter für gewöhnliche Einladungen nicht selbst zusammensetzen. Verwenden Sie die von GATEWatch erzeugten Links vollständig. Weiterleitungen, Linkverkürzungen oder die Website dürfen die benötigten Parameter nicht entfernen. Andere Parameter werden durch dieses Skript nicht automatisch weitergereicht.

    Die Einbindung prüfen

      Direkter Aufruf: Öffnen Sie die Zielseite ohne zusätzliche Parameter. Erscheint das vorgesehene Formular der richtigen Veranstaltung? Darstellung: Prüfen Sie eine breite und eine schmale Bildschirmansicht. Sind alle Felder und Schaltflächen erreichbar? Einladungslink: Öffnen Sie einen neu erzeugten Link aus dem vorgesehenen Einladungsablauf. Stimmen Formular und Zugang? Übermittlung: Führen Sie den vorgesehenen Ablauf vollständig aus. Prüfen Sie die Rückmeldung und, sofern eingerichtet, das Zurückscrollen zum Formularanfang. Kopfzeile: Verdeckt eine feststehende Navigation den Formularanfang? Passen Sie gegebenenfalls data-scroll-offset an.

      Häufige Probleme

      Beobachtung Was Sie prüfen sollten Es erscheint kein Formular. Steht das <div> vor dem Skript? Stimmen seine ID und data-target überein? Sind Skript-URL, Event-Key und Formulartyp vollständig eingesetzt? Der Code wird als Text angezeigt. Verwenden Sie einen HTML- oder Codeblock, der Skripte ausführen darf, statt eines gewöhnlichen Textfelds. Das Skript wird entfernt oder blockiert. Lassen Sie die Website-Betreuung prüfen, ob das Redaktionssystem, ein Einwilligungsdialog oder die Sicherheitsrichtlinien der Website das externe Skript beziehungsweise den IFrame blockieren. Die falsche Veranstaltung erscheint. Vergleichen Sie Event-Key und Skript-URL mit den Angaben der Event-Administration. Es erscheint ein anderer Formulartyp als eingetragen. Prüfen Sie, ob die Seitenadresse einen Parameter url-partial enthält. Dieser kann die Vorgabe ersetzen. Ein persönlicher Link führt nur zum allgemeinen Einstieg. Kontrollieren Sie, ob die vollständigen URL-Parameter nach einer Weiterleitung noch vorhanden sind. Vergleichen Sie außerdem die hinterlegte alternative Formular-URL mit der tatsächlichen Zielseite. Das Formular ist zu schmal oder die Höhe passt nicht. Prüfen Sie die Breite des umgebenden Website-Elements und welcherden Wert passtvon könnendata-height. Die Fensterhöhe wächst nicht automatisch mit dem Formularinhalt. Nach dem Absenden wird nicht nach oben gescrollt. Prüfen Sie amzunächst, bestenob andie Übermittlung erfolgreich war und das Formular für das Ausblenden im Erfolgsfall eingerichtet ist. Erst danach den Scroll-Abstand anpassen. Der Formularanfang verschwindet unter der bestehendenKopfzeile. WebseiteErhöhen testenSie data-scroll-offset passend zur Höhe der feststehenden Kopfzeile.

      Für die Website-Betreuung: Das Skript meldet fehlende oder ungültige Pflichtangaben sowie ein nicht gefundenes Zielelement in der Browserkonsole mit „GWatch error:“. Diese Meldung hilft, die Ursache einzugrenzen.

      Zur Vorbereitung: Voraussetzungen und ggf. nachkorrigieren.

      Formulartypen.
      nach oben