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 ReplaceContent()

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

 

3 Kommentare

  1. Guten Abend
    Ich habe den Form gekauft und auch seit heute den neuen Version
    jetz wollte es in zwei seiten einbauen den Formular es get nicht

    ich habe die info gefunden aber warum geht nicht oder ist es für neue verseion nicht gültig

    habe eine frage im Video ist zu sehen das in 4 orten 1 dazu kommt aber da im txt ist nicht so

    zitat:
    und
    function ReplaceContent()
    wird
    function ReplaceContent()
    mache ich was falsch oder wie..

    mfg

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.