Einbau in bestehende Webseite mit IFrame

Im folgenden Dokument wird beschrieben, wie Sie ein Formular in eine bestehende Webseite mittels eines IFrames einbinden können. Die Einbindung mittels IFrame erlaubt einen schnellen problemlosen Einbau in eine bestehende Webseite. Da beide Dokumente unabhängig voneinander bleiben werden Einflüsse von Formular und HTML-Seite vermieden (z.B. unerwünschte Designveränderungen durch CSS).

Hinweis: Das hier gezeigte Verfahren funktioniert ebenfalls mit der Software DA-BestellFormular und DA-QuizMaker.

Legen Sie das Formular ganz normal mit dem DA-FormMaker an und exportieren Sie dieses in das HTML- oder PHP-Format und speichern Sie es in das Verzeichnis Ihrer Webseite:

Öffnen Sie nun die Seite in welche das Formular eingebunden werden soll mit Ihrem HTML-Editor. Fügen Sie an der gewünschten Stelle den folgenden HTML-Code ein (je nach Editor müssen Sie vorher auf die Quelltextansicht umschalten):

<iframe src="formular.htm" width="90%" height="500" 
name="FORMULAR" scrolling="no" frameborder="0">
</iframe>

Abbildung: Beispiel Quelltextumschaltung in Expression Web

Im Quelltext können Sie die folgenden Einstellungen vornehmen:

formular.htm (Dateiname der Formulardatei)
90% (Breite des IFrames, Angabe in % oder Pixel möglich)
500 (Höhe des IFrames, testen Sie je nach Formularlänge, welche Höhe die beste Darstellung ermöglicht)
scrolling="no" (Einstellung ob Scrollbalken eingeblendet werden sollen, mögliche Werte yes (ja), no (nein) oder auto (automatisch, wenn nötig))
frameborder="0" (Dicke des Framerahmens, 0 = kein Rahmen)

Weitere Informationen zu IFrames und Einstellungen finden Sie hier.

Video Tutorial

Formulare responsiv einbinden

Der normale IFrame ist leider etwas starr, d.h. er hat eine feste Breite und Höhe. Während man die Breite auch mit Prozentangaben versehen kann, geht dies mit der Höhe nicht. Diese ist fest.

Bei responsiven Formularen ist das natürlich ein Problem. Beim verkleinern der Webseite oder Darstellung auf einem Telefon werden entweder Scrollbalken im IFrame angezeigt oder das Formular wird nicht mehr vollständig dargestellt.

Auf unserer Webseite eKiwi.de gibt es eine Anleitung um einen Iframe responsive zu gestalten.

Zusätzlich gibt es eine Videoanleitung:

Transparenter IFrame

Hat die Webseite bereits einen Hintergrund, kann man den IFrame transparent gestalten:

In den iFrame Code der Hauptseite fügen wir den folgenden Parameter hinzu:

 allowtransparency="true"

In die Unterseite muss ebenfalls etwas Code eingefügt werden:

background:transparent;

Download des Beispiels