So geht's
Embed-Script (empfohlen)
Ein Platzhalter-<div> mit dem Kürzel des Formulars und ein externes Script. Das Script baut den Rahmen (iframe), passt seine Höhe an (mehrere Seiten, Fehlermeldungen, Danke-Seite), scrollt die Seite bei Seitenwechsel und Fehlern an die richtige Stelle und übernimmt Weiterleitungen. Es kommt ohne Inline-JavaScript aus, reicht einmal pro Seite (auch für mehrere Formulare) und wird von uns aktuell gehalten: Verbesserungen kommen ohne neuen Code bei allen Einbettungen an.
An die Webseite anpassen
Breite, Abstände, Farben und Schrift lassen sich in der Einbettung setzen, ohne das Formular im Designer zu ändern. So kann dasselbe Formular auf verschiedenen Seiten verschieden aussehen. Ein Beispiel: bündig in der Inhaltsspalte, volle Breite, Akzentfarbe und Schrift der Webseite.
Schrift der Webseite
Ein iframe erbt keine Schriften der umgebenden Seite. Geben Sie deshalb die Schriftdatei mit data-font-url an und ihren Namen mit data-font. Weil die Datei von Ihrer Domain in das Formular geladen wird, muss Ihr Server sie für zummit Forms freigeben (CORS), z. B. mit diesem Header für den Schriften-Ordner:
Ereignisse
Das Formular meldet der Webseite, was passiert. Das Embed-Script löst jede Meldung als Ereignis am Platzhalter aus (es steigt im Dokument auf) und setzt dort data-zummit-state auf loading, ready, submitted oder error. Alle Meldungen enthalten type und slug, aber nie Antworten oder personenbezogene Daten.
WordPress, Bricks und HTML
iframe mit Inline-Script
Die bisherige Variante: ein iframe und ein kleines Inline-Script, das die Höhe anpasst und Weiterleitungen übernimmt. Bereits eingebaute Codes funktionieren unverändert weiter. So sieht der Code aus:
Feste Höhe
Manche Systeme entfernen Script-Tags. Nehmen Sie dann die Variante „Feste Höhe“: nur ein iframe mit einer Höhe Ihrer Wahl. Ist das Formular höher, scrollt es innerhalb des Rahmens.
Weiterleitung nach dem Absenden
Hat die Danke-Seite eine Weiterleitung, leitet das eingebettete Formular die ganze Seite weiter, nicht nur den Rahmen. Das funktioniert mit dem Embed-Script und dem Inline-Script; mit fester Höhe bleibt die Danke-Seite stehen.
Barrierefreiheit
Der Rahmen trägt den Namen des Formulars als Titel. Bei Seitenwechseln springt der Fokus an den Anfang der neuen Seite, bei Fehlern in das erste fehlerhafte Feld und nach dem Absenden auf die Danke-Seite; das Embed-Script scrollt die Seite jeweils dorthin.
Offline und Aufrufe
Ist das Formular offline, zeigt der Rahmen „nicht verfügbar“. Der Code bleibt gültig und funktioniert wieder, sobald Sie das Formular veröffentlichen. Jedes Laden des eingebetteten Formulars zählt als Aufruf; deshalb lädt die Vorschau unter Embed-Code erst auf Klick.