Ratgeber · 6 Min. Lesezeit
So binden Sie ein Formular auf Ihrer Website ein
Es gibt mehrere Wege, ein Formular auf Ihre Website zu bringen, vom einzeiligen Snippet bis zur vollständig individuellen API-Integration. Dieser Leitfaden führt durch Inline-Einbettungen, Popup-Modals, die Web Component und das JS SDK sowie die öffentliche REST API, damit Sie den passenden Ansatz wählen können.
Inline-Einbettung
Eine Inline-Einbettung setzt das Formular direkt in den Fluss Ihrer Seite, sodass es wie jeder andere Abschnitt zwischen Ihren übrigen Inhalten steht. Sie fügen ein kleines Snippet dort ein, wo das Formular erscheinen soll, und es wird an Ort und Stelle gerendert — ohne Weiterleitung, ohne separate Landingpage.
Am einfachsten geht das mit einer Web Component: Fügen Sie das <yeetform-embed>-Tag mit Ihrem Formular-Slug hinzu, und das Formular lädt inline. Wenn Sie möchten, erreichen Sie dasselbe mit einem einzigen JS-SDK-Aufruf, der in ein von Ihnen gewähltes Zielelement rendert.
Popup oder Modal
Manchmal möchten Sie das Formular gar nicht auf der Seite haben, bis jemand danach fragt. Ein Popup oder Modal hält Ihr Layout sauber und öffnet das Formular in einer Überlagerung, wenn ein Besucher auf eine Schaltfläche klickt — ideal für Kontakt-Buttons, Feedback-Widgets oder einen Call-to-Action in der Bildschirmecke.
Mit dem JS SDK verknüpfen Sie eine Schaltfläche mit YeetForm.open(slug), und das Formular erscheint als zentriertes Modal über Ihrer Seite. Der Besucher füllt es aus, ohne die Seite je zu verlassen, und die Überlagerung schließt sich beim Absenden, sodass das Formular nie mit Ihrem Hauptinhalt um Platz konkurriert.
Web Component und JS SDK
Für die meisten Websites decken die Web Component und das JS SDK alles ab. Das <yeetform-embed>-Tag ist die Variante ohne Build — es funktioniert in reinem HTML, in einem CMS-Block oder in jedem Framework, das benutzerdefinierte Elemente erlaubt. Das JS SDK gibt Ihnen programmatische Kontrolle, wenn Sie sie brauchen.
Das SDK (public/sdk.js) stellt eine kleine Reihe von Methoden bereit:
- YeetForm.render(slug, target, options) — bettet das Formular inline in ein von Ihnen gewähltes Element ein.
- YeetForm.open(slug, options) — öffnet das Formular als Popup-Modal.
- YeetForm.load(slug, lang) — ruft das Formular-Schema ohne Oberfläche ab, etwa um Felder zu zählen oder zu prüfen.
- YeetForm.submit(slug, answers) — sendet eine Antwort programmatisch aus Ihrem eigenen Code.
API für individuelle Integrationen
Wenn Sie volle Kontrolle brauchen — ein maßgeschneidertes Frontend, eine mobile App oder einen serverseitigen Ablauf — nutzen Sie die öffentliche REST API. Sie ist CORS-fähig, sodass Sie sie direkt aus Browser-Code aufrufen können, und für öffentliche Formulare ohne Authentifizierung, sodass kein API-Schlüssel nötig ist, um ein Schema zu laden oder eine Antwort zu senden.
Eine typische Integration holt das Formular-Schema mit einer GET-Anfrage, rendert die Felder beliebig in Ihrer eigenen Oberfläche und sendet die gesammelten Antworten dann per POST als Antwort zurück. Da das Schema reines JSON ist, können Sie völlig individuelle Layouts umsetzen, während YeetForm im Hintergrund weiterhin Speicherung, Benachrichtigungen und Analyse übernimmt.