So binden Sie das Kontaktformular in Ihre Website ein!

Die einfachste Möglichkeit, um das Kontaktformular responsive in Ihre Website einzubinden, funktioniert via iFrame. Sie müssen lediglich eine kleine Zeile Code an eine geeignete Stelle einfügen! Es spielt hierbei keine Rolle, ob es sich um eine statische Website oder um eine dynamische Website (z.B. WordPress, Bootstrap, Joomla!, Typo3 usw.) handelt.



Der Abschnitt Höhe definieren ist für eine vollständige responsive Einbindung lesenswert!




1. Fügen Sie den nachfolgenden Code an eine geeignete Stelle ein!


<iframe src="kontakt.php" style="border: none; width:100%; height:700px; margin: 0 0 0 1%;"></iframe>

Hinweis: Dieses iFrame besitzt allerdings noch keine automatische Höhenanpassung.
»  Zum iFrame mit automatischer Höhenanpassung!






2. iFrame anpassen!


URL zum Formular
Zwischen src="" fügen Sie die URL zum Kontaktformular ein. Bitte achten Sie ggf. auf http: bzw. https: am Anfang der URL!

Breite definieren
Die Breite des iFrame können Sie über den Parameter width anpassen.
Hinweis: Wenn Sie das Kontaktformular nicht responsive einbinden möchten, können Sie den Wert unter "width" auch in px angeben. Also zum Beispiel:

<iframe src="kontakt.php" style="border: none; width:720px; height:700px; margin: 0 0 0 1%;"></iframe>

Höhe definieren
Die Höhe des iFrame können Sie über den Parameter height anpassen. Alternativ kann die Höhe auch automatisch angepasst werden. Siehe nächster Abschnitt!






Tipp: iFrame mit automatischer Höhenanpassung


1. Fügen Sie diesen JavaScript Code zwischen <head> und </head> in die Seite ein, in welche das Kontaktformular integriert wird:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

Wichtig: Der JavaScript Code funktioniert nur, wenn sich das Kontaktformular auf der selben Domain befindet. Hinweis für WordPress Nutzer: Sie benötigen ein Plugin, um JavaScript Code einzufügen. (z.B.: Insert Headers and Footers)

2. Fügen Sie diesen iFrame Code an eine geeignete Stelle ein:

<iframe src="kontakt.php" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%; margin: 0 0 0 1%;" allowfullscreen scrolling="no"> </iframe>

Achten Sie auf die korrekte URL zwischen src="", sofern Sie die URL ausschreiben. (insbesondere auf http: bzw. https:)

3. Denken Sie daran, für die Danke-Seite ein Framebrecher Script zu nutzen. Siehe nächster Abschnitt!






3. Danke Seite außerhalb des iFrame anzeigen! (Framebrecher)

Es kann sinnvoll sein, die Danke-Seite außerhalb des iFrame anzeigen zu lassen. Fügen Sie diesen Code in Ihre Danke-Seite zwischen <head> und </head> ein:

<script type="text/javascript">
if (top != self)
  top.location = self.location;
</script>

Hinweis für WordPress Nutzer: Sie benötigen ein Plugin, um JavaScript Code einzufügen. (z.B.: Insert Headers and Footers)






4. Fertig! :-)