Zwei Formulare in eine HTML-Seite einbinden

Der eingebettete IFrame ist eine einfache Möglichkeit ein Formular in eine Webseite zu integrieren. Code kopieren, einfügen und fertig. Manchmal möchte man jedoch zwei Formulare in die Seite integrieren. Einige Webdesign Software, wie z.B. der Magix Webdesigner, verwalten die mobile und normale Variante der Homepage in einer HTML-Datei, hier ist dann das Formular zweimal eingebunden.

Damit zwei Formulare innerhalb einer HTML-Seite reibungsfrei funktionieren, sind ein paar kleine manuelle Änderungen am Code notwendig. Wie das genau funktioniert habe ich in dem folgenden Video erklärt:

 

Anleitung

Legen wir los. Das erste Formular fügen wir noch recht normal ein. Im Export-Assistenten wählen wir den Einbetteten IFrame als Option aus:

Im nächsten Schritt konfigurieren wir den Iframe entsprechend unseren Wünschen. Statt den Code zu kopieren, entfernen wir aber folgende Zeile:

window.onload = function () { ReplaceContent(); }

Den Code kopieren wir nun nicht über den Button “Code kopieren”, sondern indem wir in das Textfeld klicken und STRG + A und danach STRG + C drücken. Dies kopiert den Code mit unseren Änderungen. Der Code wird nun einfach als erstes Formular eingefügt.

Die Vorschau im Browser sollte nichts anzeigen, da wir ja den Code zum Laden des Formulars entfernt haben. Nun kommt das zweite Formular. Gleiche Vorgehensweise. Nur sind hier ein paar Codeänderungen mehr nötig:

Die Änderungen im Detail:

<div id="ctnr"></div>

wird zu:

<div id="ctnr1"></div>

Das Laden des Iframes wird von

window.onload = function () { ReplaceContent(); };

zu

window.onload = function () { ReplaceContent(); ReplaceContent1(); };

und

function ReplaceContent()

wird

function ReplaceContent1()

zu guter Letzt:

var ctnr = document.getElementById('ctnr');

zu

var ctnr = document.getElementById('ctnr1');

Das wars!

Anschließend sollten beide Formulare angezeigt werden und unabhängig voneinander funktionieren.

Beide Formulare sind vollständig unabhängig voneinander und auch die Überprüfungen der Pflichtfelder kommen sich nicht mehr in die Quere.

Download des Beispiels