Embed the Contact Form in your Website!

An iFrame is the easiest way to integrate the contact form into your website so that it is responsive. You only need to insert a small line of code at a suitable position! It does not matter whether it is a static or a dynamic website (e.g. WordPress, Bootstrap, Joomla!, Typo3, etc.)



The Define height section in particular is worth reading for a fully responsive integration!



1. Insert the following code at a suitable position!


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

Note: This iFrame does not yet include automatic height adjustment.
»  Go to iFrame with automatic height adjustment!






2. Customize the iFrame!


URL for the form
Insert the URL for the contact form between the quotation marks of src="". Pay attention to whether the URL starts with http: or https:!

Set the width
You can adjust the width of the iFrame using the width parameter.
Note: If you do not want the contact form to be responsive, you can also enter the value under "width" in px. For example: 

<iframe src="contact.php" style="border: none; width:720px; height:700px;"></iframe>


Set the height
You can adjust the height of the iFrame using the height parameter. As an alternative, you can have the height adjusted automatically. See next section!





Tip: iFrame with automatic height adjustment


1. You can also set the height to automatic adjustment. To do so, insert this JavaScript code between <head> and </head> on the page on which you want to embed the contact form:

<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. Note for WordPress users: You can use this plugin to insert JavaScript: Insert Headers and Footers.

2. In addition, insert this iFrame code at a suitable position: 

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

Ensure you use the correct URL between the quotation marks of src="" if you write out the URL. (especially with regard to http: or https:)

3. Only relevant if the success message (see config.php, line 13) has been disabled: Please remember to use a frame breaker script for the thank-you page. See next section!






3. Show the thank-you page outside the iFrame! (Frame breaker script)


It can make sense to display the thank-you page outside the iFrame. Insert this code in your thank-you page between <head> and </head>. 

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

Note for WordPress users: You can use this plugin to insert JavaScript: Insert Headers and Footers.






4. You’re done! :-)