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)







  4. The contact form has been successfully integrated into your website!