Built with HTML, CSS, JavaScript & PHP - Fully customizable
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.).
<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)
<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://).
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)