Here’s how to integrate the contact form into your website!
The easiest way to seamlessly integrate the contact form into your website is by using our responsive iFrame.
Although a simple iFrame (in the sense of: <iframe src="contact.php" style="border: none; width:100%; height:700px;"></iframe>) would also work, it could potentially have a negative impact on the display of the success message or the thank-you page.
You only need to insert two code sections into your page. It doesn’t matter whether it's a static website or a dynamic one (e.g., WordPress, Bootstrap, Joomla!, Typo3, etc.).
1. Insert this JavaScript code between <head> and </head> in the page where the contact form will be integrated:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Important: The JavaScript code only works if the contact form is on the same domain. (see Wikipedia: Same-origin policy)
Note: If you are using a CMS, such as WordPress or Typo3, you will need a plugin to insert JavaScript code. (Recommendation for WordPress: Insert Headers and Footers)
2. Insert this iFrame code at an appropriate place in your page:
<iframe src="contact.php" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%;" allowfullscreen scrolling="no"> </iframe>
Important: Make sure to use the correct URL between src="" if you are writing out the URL (especially with http:// or https://).
3. If the success message (see config.php, line 13) has been disabled: Show the thank-you page outside of the iFrame
It may be useful to display the thank-you page outside of the iFrame. Insert this code into your thank-you page between <head> and </head>:
<script type="text/javascript"> if (top != self) top.location = self.location; </script>
Note: If you are using a CMS, such as WordPress or Typo3, you will need a plugin to insert JavaScript code. (Recommendation for WordPress: Insert Headers and Footers)