brandonmcpeak
9/12/2018 - 4:36 PM

iFramed form with resizer and parameter append

Embed a form in an iframe, with auto-resize of iframe to content and rebuilding of iframe to include parent page parameters in iframe URL for passthrough to hidden fields. Set up for logging and cross-domain usage.

Requires inclusion of iframeresizer.contentWindow.js in the target page.

See: https://github.com/davidjbradshaw/iframe-resizer

iframed-form-resizer-and-query-append
content_copyfile_download
<noscript>
  <iframe src="https://go.pardot.com/l/311851/2018-03-21/69x17" id="sizetracker" width="100%" height="100%" type="text/html" frameborder="0" allowTransparency="true"></iframe>
</noscript>

<script type="text/javascript">
 var form = 'https://go.pardot.com/l/311851/2018-03-21/69x17';
 var params = window.location.search;
 var thisScript = document.scripts[document.scripts.length - 1];
 var iframe = document.createElement('iframe');

 iframe.setAttribute('src', form + params);
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', '100%');
 iframe.setAttribute('type', 'text/html');
 iframe.setAttribute('frameborder', 0);
 iframe.setAttribute('allowTransparency', 'true');
 iframe.style.border = '0';

 thisScript.parentElement.replaceChild(iframe, thisScript);
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.js"></script>
<script type="text/javascript">iFrameResize({log:true, checkOrigin:false});</script>