So binden Sie das Kontaktformular in Ihre Website ein!
Die einfachste Möglichkeit, um das Kontaktformular nahtlos in Ihre Website einzubinden, funktioniert mit unserem responsiven iFrame.
Obwohl ein einfaches iFrame (im Sinne von: <iframe src="kontakt.php" style="border: none; width:100%; height:700px;"></iframe>) auch funktionieren würde, könnte sich dieses allerdings nachteilig auf die Darstellung der Erfolgsmeldung oder der Danke-Seite auswirken.
Sie müssen lediglich zwei Code-Abschnitte in Ihre Seite 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.
1. Fügen Sie diesen JavaScript Code zwischen <head> und </head> in die Seite ein, in welche das Kontaktformular eingebunden 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. (siehe Wikipedia: Same-Origin-Policy)
Hinweis: Falls Sie ein CMS, wie bspw. WordPress oder Typo3 nutzen, benötigen Sie ein Plugin, um JavaScript Code einzufügen. (Empfehlung für WordPress: Insert Headers and Footers)
2. Fügen Sie diesen iFrame Code an eine geeignete Stelle in Ihrer Seite ein:
<iframe src="kontakt.php" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%;" allowfullscreen scrolling="no"> </iframe>
Wichtig: Achten Sie auf die korrekte URL zwischen src="", sofern Sie die URL ausschreiben. (insbesondere auf http:// bzw. https://)
3. Falls die Erfolgsmeldung (siehe config.php, Zeile 13) deaktiviert wurde: Danke Seite außerhalb des iFrame anzeigen
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: Falls Sie ein CMS, wie bspw. WordPress oder Typo3 nutzen, benötigen Sie ein Plugin, um JavaScript Code einzufügen. (Empfehlung für WordPress: Insert Headers and Footers)